Keskustelu: Nettisivujen teko: Jquery slideToggle

pistemies [09.10.2019 21:32:00]

Minulla on pikku lista otsikoita ja jokaista otsikkoa klikkaamalla tulisi saada näkyviin alaotsikot. No se onnistuu.
Mutta sitten kun klikkaa saman otsikon buttonia uudestaan (teskti on muuttunut muotoon 'Hide'), mitään ei tapahdu.
Mikä tässä vois olla vikana?

 $(document).ready(function(){
 $("#spitfi-shipping-method-2").hide();
  $("#shower3").click(function() {
   var goShow = $('#spitfi-shipping-method-2:visible').length;
   var goHide = goShow;

    $("#spitfi-shipping-method-2" ).slideToggle("show");
    if (goHide) {
       $('#shower3').prop('value', '{{ button_show }}');
    } else {
      $('#shower3').prop('value', '{{ button_hide }}');
    }
  });
});

Ps. Tuossa siis näkyy myös hiukan Twig template koodia ;)

Ps Again: Tein alert testin. Kun ensimmäisen kerran klikkaa buttonia 'Show', se toimii, mutta kun painaa buttonia 'Hide', ohjelma ei tunnista klikkausta. Olen myös poistanut tuosta tuon "ready(function)" silmukan, kun se taitaa olla turha.

Lisäys: Käytössä Jquerý 2.1

Tronic [10.10.2019 07:58:06]

En tunne käyttämääsi frameworkkia, mutta jos se poistaa napin DOM:sta button_hidellä ja luo uuden button_show:lla, ei dokumentin latauduttua rekisteröity onclick-handler tietenkään enää toimi. Mahdollisesti frameworkissasi on muu "oikea" tapa onclick-handlerin rekisteröintiin siten, että se myös säilyy piilottelun jälkeen.

Voit ratkaista ongelman puhtaasti HTML:llä käyttäen details ja summary elementtejä. Jos haluat lisäksi piilottaa/näyttää tai muutoin muokata jotain summaryn sisällä olevaa sen mukaan onko details auki, onnistuu se CSS:llä details[open] ja details:not([open]). Sopivilla tyyleillä saat tästä kyhättyä varmaankin juuri haluamasi näköisen.

pistemies [10.10.2019 13:38:26]

Tronic kirjoitti:

(10.10.2019 07:58:06): En tunne käyttämääsi frameworkkia, mutta jos...

Kiitos. Tuo CSS onkin aikaa vievin saada siitä edes hiukan nätin näköinen ;)

pistemies [10.10.2019 15:45:14]

Sellainen pulma tuli tähän, että Firefox ei näytä tuon summary elementin nuolta. Miten se voisi onnistua?

HTML5 [10.10.2019 20:30:57]

Kuulostaa siltä, että jokin CSS:ssä aiheuttaa tuon. Kokeile poistaa ominaisuuksia yksi kerrallaan, kunnes nuoli palaa. Kätevimmin tämä onnistunee selaimen kehitystyökaluilla, mutta rivejä voi myös kommentoida pois (tosin CSS:n tapauksessa voi olla helpompaa lisätä rivin alkuun mitä tahansa epävalidia, koska selain hylkää vain kyseisen rivin).

Tronic [11.10.2019 07:56:52]

https://stackoverflow.com/questions/51830251/styling-the-html5-summary-arrow-for-firefox

pistemies [20.10.2019 19:12:27]

Pitkästä aikaa taas ehdin tähän ulkoasuun paneutua. Tämä toimisi Mozillassa.

summary:before {
   content: ' ';
   border: solid #000000;
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 0 5px 5px 0;
   transform: rotate(-45deg);
}

Mutta miten tuon saisi toimimaan, niin että ei näkyisi muissa selaimissa kuin Mozillassa? Olen kokeillut esim. tällaista:

summary::-moz-summary:before {

Mutta tämä tai muut kokeiluni ei toimi ollenkaan.

The Alchemist [21.10.2019 11:43:28]

Jokaisen säännön on tarkoitus toimia kaikissa selaimissa, joten kirjoita myös sellaiset tyylit, joita voit käyttää jokaisen selaimen kanssa. Kaikki muut lähestymistavat ovat vääriä.

Tässä tapauksessa voit häxätä natiivin markerin piiloon WebKit-selaimista ja sen jälkeen lisätä omasi, joka on käytössä kaikilla selaimilla.

pistemies [21.10.2019 12:10:52]

The Alchemist kirjoitti:

(21.10.2019 11:43:28): Jokaisen säännön on tarkoitus toimia kaikissa...

Hiukan on outo ehdotus. Tarkoittaako tämä sitä, että Mozilla selaimille ei voi asettaa omaa CSS-tyyliä ja että kaikki CSS, mikä ei toimi Mozillassa, pitää poistaa muilta myös muilta selaimilta?

Lisäys:

Ps. Niimpä se näyttäisi olevan tämän elemenetin kohdalla. Oletus summary markeria ei voi käyttää missään yhteydessä, ei edes sitä tukevilla selaimilla, jos haluaa että kaikissa selaimissa toimii. Ihan oma "hyrrä" toimii:

summary:after {
  background: #adadad;
  border-radius: 5px;
  content: "+";
  color: #fff;
  float: left;
  font-size: 1.5em;
  font-weight: bold;
  margin: -5px 10px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
  margin-top:2px;
}
details[open] summary:after {
  content: "-";
}
details summary::-webkit-details-marker {
   display:none
}

Ps. Milloinkahan Mozillaan tulee täysi HTML 5-tuki?

The Alchemist [21.10.2019 14:24:48]

En lähde penkomaan teknisiä spesifikaatioita mutta se markeri ei tiettävästi kuulu standardiin vaan on WebKit-selainten oma (epästandardi) sovellutus. Siksi se kuuluukin ottaa pois käytöstä ja korvata omalla ratkaisulla.

HTML5 [21.10.2019 16:36:32]

Siis miksi tuo nuoli pitäisi Firefoxissa erikseen lisätä? Kyllä se minulla näkyy ihan oletuksena.

Varmista, että summary-elementin display-ominaisuudella on sen oletusarvo list-item eikä esimerkiksi block.

Standardinmukainen vastine tuolle WebKitin vale-elementille on ::marker, jota Firefoxin pari tuoreinta versiota tukee.

pistemies [21.10.2019 18:41:40]

HTML5 kirjoitti:

(21.10.2019 16:36:32): Siis miksi tuo nuoli pitäisi Firefoxissa...

Oikeastaan en tarkoittanut sinua, kun heitin ilmaan ajatelman Mozillan HTML5-tuesta ;)
Mutta kiitos viestistä. Oikeastaan tuo oma viritelmä on parempi, voi puskea ulkoasua mieleisekseen.

HTML5 [21.10.2019 21:24:15]

Tulevaisuudessa nuolen piilottamiseen voi riittää, että vaihtaa summary-elementin list-style-type- tai display-ominaisuuden arvoa, esimerkiksi list-style: none tai display: block. Kumpikin toimii jo Firefoxissa. Tässä selaimessa ::marker-elementin voi piilottaa myös content: '' -määrityksellä.

/* Yksi ominaisuuksista riittää! */

summary {
  display: block;
  list-style: none;
}

summary::marker {
  content: '';
}

The Alchemist [22.10.2019 05:32:40]

Noh, näköjään heinäkuun alusta Firefox on saanut tuen summary-elementin "markerille". Enpä ole itsekään huomannut asiaa, kun testailen Firefoxilla enää vasta aivan viimeisessä vaiheessa; kaikki muut kehitys tulee tehtyä Chromella.

Lebe80 [22.10.2019 09:26:00]