Homepage » Javascript » Scripts » Uitschuivend blok

Info  
Door: MiraxMoeilijkheidsgraad: 1/3
Geplaatst op: 12-07-2004 Reacties: 7(Bekijken)
Views: 6364Log in om zelf te reageren
Laatste keer aangepast op 28-05-2005 door MiraxWaardering: 5/10 (1 stem)
Voorbeeld bekijken

Uitleg

Met het volgende script kan je een gedeelte van de pagina langzaam (eventueel snel), maar in ieder geval geanimeerd, uit laten schuiven. Deze gedeeltes zijn standaard ingeklapt.

Plaats dit gedeelte in de head van je pagina:

<script type="text/javascript"> var snelheid = 0.4 // dit beïnvloed de snelheid van het in en uitklappen. var i=0; var divid2,totale,k; function klappen(divid){   divid2 = divid; if(document.getElementById(divid).style.display != 'block'){ document.getElementById(divid).style.visibility = 'visible';   document.getElementById(divid).style.display = 'block';    document.getElementById(divid).style.height = 'auto';    totale = document.getElementById(divid).offsetHeight; klapuit(); }  else {   document.getElementById(divid).style.height = 'auto';    totale = document.getElementById(divid).offsetHeight;      k = totale; klapin(); } } function klapuit(){ j = totale;  if(i<j){     document.getElementById(divid2).style.height = i + 'px';     setTimeout('klapuit()',10);     i=i+snelheid;     }   else{ i=0; }  }    function klapin(){     if(k > 0){   document.getElementById(divid2).style.height = k + 'px';   k=k-snelheid;   setTimeout('klapin()',10);        }     else {     document.getElementById(divid2).style.visibility = 'hidden';   document.getElementById(divid2).style.display = 'none';        }    }  </script> <style type="text/css"> div#verzinhieriets{ display:none; overflow:hidden; visibility: visible; } </style>

Plaats dit gedeelte in de body van je pagina:

<div id="verzinhieriets"> De eigenlijke inhoud, <br />bijvoorbeeld een gedeelte van<br /> een menu</div> En met een link (bijvoorbeeld) kun je het activeren. <a href="javascript:klappen('verzinhieriets')">Uitklappen!</a>

7 reacties
huub8 Geplaatst op 17-12-2007 om 13:38
 

Regular		 Ik snap niet wat ik moet invullen, (moet ik bijvoorbeeld iets invullen voor document?)?
huub8 Geplaatst op 17-12-2007 om 12:04
 

Regular		 Ik snap niet wat ik moet invullen, (moet ik bijvoorbeeld iets invullen voor document?)?
jerden Geplaatst op 22-01-2007 om 19:23
 

Regular		 hoe maak ik deze uitschuifblock horizontaal?
Onbekend lid Geplaatst op 16-05-2006 om 16:44
 

Spammer		 Cool, je kunt er ook forms en flash inzetten...
bruninmi Geplaatst op 30-03-2006 om 21:47
 

Regular		 Wat moet je doen als je dit uitklapmenu meer dan 1 keer wil gebruiken?

Pagina 1 2 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be