login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div show/hide (Opgelost)

Offline qubus - 21/06/2013 16:20 (laatste wijziging 21/06/2013 16:21)
Avatar van qubusLid Hallo,

Ik gebruik volgend scriptje om een div te laten zien en verbergen.
  1. function showHide(id) {
  2. var elm = document.getElementById(id);
  3. elm.style.display = (elm.style.display=='none'?'block':'none');
  4. }


Ik roep het als volgt aan:
  1. <a href="#" onclick="showHide('div_header'); return false;"><img src="./image/informatie.png" alt="" title="" align="absbottom" /></a>

Nu zou ik graag willen dat deze div langzaam opent ipv meteen geheel zichtbaar.
Ik gebruik ook jquery, maar kom er niet uit hoe ik dat in dit script kan integreren.

Iemand een idee...?

6 antwoorden

Gesponsorde links
Offline WouterJ - 21/06/2013 17:26
Avatar van WouterJ HTML gevorderde Als je jQuery toch al gebruikt, gebruik het dan in je hele script:
  1. <a href="#" class="show-link" data-target="#div_header"><img ...></a>
  2.  
  3. jQuery(function ($) {
  4.  
  5. $('.show-link').on('click', function (e) {
  6. var target = $($(this).data('target'));
  7.  
  8. target.toggle();
  9. });
  10. });

.toggle() kun je dan snelheid meegeven, bijv. .toggle('slow') of een specifiek aantal miliseconden: .toggle(200)

Nog een snelheidoptimalistie tip: Als je nu een paar keer op de link klikt moet JavaScript telkens alle elementen in de HTML doorzoeken of hij #div_header kan vinden. Je kan begrijpen dat dat best wel wat tijd kost. Het is beter om deze elementen te cachen en slechts de 1e keer op te zoeken:
  1. jQuery(function ($) {
  2.  
  3. var cached = {}; // hierin gaan we de elementen vasthouden
  4.  
  5. $('.show-link').on('click', function (e) {
  6. var target = $(this).data('target');
  7.  
  8. if (cached[target]) { // als hij al gecached is
  9. target = cached[target]; // zoek hem niet opnieuw op, gebruik de cache
  10. } else { // de eerste keer
  11. target = cached[target] = $(target); // zoek element op en cache hem
  12. }
  13.  
  14. target.toggle();
  15. });
  16.  
  17. });
Offline qubus - 21/06/2013 18:59
Avatar van qubus Lid Hallo Wouter,

Dank voor je antwoord. Het is voor mij nog niet helemaal duidelijk.
Als ik nu op meerdere pagina's meerdere div's heb met allemaal een eigen id of class, moet ik dan voor elke een apart jquery script maken?
Nu geeft ik het id van de div mee in de functie, en kan ik één functie dus voor alle div's gebruiken.
Kun je dit nog even verduidelijken voor me?

Alvast heel erg bedankt, ik leer er veel van.

Groeten Mark
Offline WouterJ - 21/06/2013 21:06
Avatar van WouterJ HTML gevorderde Wat ik in mijn script heb gedaan is net wat anders dan jij deed. Ik haal alle elementen op met de class 'show-link' en daar bind ik een eventhandler aan. Deze gebruik het data-target attribuut om het element te bepalen die geopend moet worden.
Offline qubus - 21/06/2013 22:51 (laatste wijziging 21/06/2013 22:57)
Avatar van qubus Lid Hallo,

Ik zal wel een sukkel zijn, maar kom er niet uit.
Ik heb een bestand: scripts.js wat ik in de html laad
Daar wil ik graag een functie in, welke de div die ik met 'id' specificeer langzaam opent.
Kan dat met de code die je geeft?

Ik heb alweer van alles geprobeert, maar het lukt me niet.
Sorry...
De pagina lijkt ook weer naar boven te verschuiven bij openen, ook als de div verder naar beneden is. Is dat op te lossen?

Groeten Mark
Offline WouterJ - 21/06/2013 23:49
Avatar van WouterJ HTML gevorderde Dat eerste, zie hier een voorbeeldje hoe het werkt: http://jsfiddle.net/7LpRE/3/

Dat tweede: Voeg e.preventDefault() toe als eerste regel in je event handler. De e variabele hebben we zojuist in de parameters van de functies gestopt en is een event object en preventDefault doet precies wat het zegt: het voorkomen van het standaard gedrag
Bedankt door: qubus
Offline qubus - 22/06/2013 09:59
Avatar van qubus Lid Bedankt Wouter! Voor je geduld en hulp.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.361s