Keskustelu: Nettisivujen teko: Sivun hyppäys jQuery slideToggle

Laittelin pientä viritelmää, jolla saa halutessaan linkistä sivupalkin näkyviin absolute-sijoituksella.
Js-koodi on seuraava:

$('#cleft').ready(function(){
  $("#cleft").click(function(){
    $("#clist-left").slideToggle("slow");
  });
});

<a href="<!-- suora linkki tässä-->#clist-left"><?php echo $text_sidebar;?></a>

Muuten toimii hyvin, mutta sivu pomppaa ylös aivan kuin käyttäisin tuossa clist-left elementin alussa a name elementtiä. Ilman tuota suoraa linkkiosoitetta siirtyy etusivulle. Ehkä tämän tyyppisen on olemassa oma funktio?

Jos haluat, ettei linkki vie minnekään, laita osoitteeksi pelkkä # tai estä tavallinen toiminta JS-koodilla.

Mitään a name -elementtiä ei ole, ja tarkoittamasi name-attribuutin käyttö a-elementissä on muutenkin jo iät ja ajat sitten korvautunut id-attribuutilla missä tahansa elementissä. Siis nykyään ei pidä laittaa mitään ylimääräisiä <a name="x"> -tageja vaan yksinkertaisesti vaikka <h2 id="x">. Kyseessä ei ole mikään uusi suositus, vaan name-attribuutin käyttö on deprekoitu jo XHTML 1.0:ssa 2000-luvun alussa.

Metabolix kirjoitti:

Jos haluat, ettei linkki vie minnekään, laita osoitteeksi pelkkä # tai estä tavallinen toiminta JS-koodilla.

Kiitos! Tuo pelkkä # käänsi sen parin sekunnin viiveellä etusivulle. Mutta tuo jälkimmäinen toimi oikein hyvin.

Sanoinkin väärin, #-linkki voi viedä sivun alkuun. Sen sijaan href-attribuutin voi poistaa kokonaan, mutta silloin yleensä myös elementin oletustyyli vaihtuu.

Toiselle sivulle #-linkin ei pitäisi koskaan viedä, joten jos niin käy, koodissasi on jotain ylimääräistä, josta et ole kertonut.

Palauta a-elementin click-tapahtuman käsittelevässä koodissa lopuksi false, niin linkin osoittamaan kohteeseen ei siirrytä lainkaan. Minulla oli tapana jättää href-attribuutti pois kokonaan "linkeistä", joiden ei ole tarkoituskaan ohjata minnekään, mutta sitten luin sellaista, ettei iOS:n selain triggeröisi sellaisten a-elementtien click-tapahtumaa ollenkaan. Googelluksen perusteella vaikuttaa tosiaan olevan näin.

$('a').click(function(e) {
  // Suorita koodia...

  // Ilmeisesti iOS:n selain vaatii myös preventDefault():n kutsumisen
  e.preventDefault();
  return false;
}

jQueryn tapahtumankäsittelijässä return false johtaa kutsuihin event.stopPropagation() ja event.preventDefault(). Pitäisi siis olla täysin turha käyttää näitä sekaisin. Jos käyttää jo preventDefault-kutsua, ei tarvitse käyttää return false -riviä (eikä kannatakaan, jos ei halua sivuvaikutuksena stopPropatagion-kutsua).

iOS:n (tai Safarin mobiiliversion) erikoisesta toiminnasta on bugiraportti, jossa kerrotaan, että CSS-tyyli "cursor: pointer" korjaa ongelman. Ilmeisesti kosketuslaitteella ei voi klikata mielivaltaisia elementtejä vaan vain niitä, jotka jollain logiikalla vaikuttavat erityisen klikattavilta; muuten pitäisi käyttää kosketustapahtumia.