:strip_exif()/u/80168/hitman.gif?f=community)
Ik heb op een website voor mijn klant een menu waarvan een item naar beneden 'slided' wanneer er op geklikt werd, waarna er meerdere menu items getoond werden waarop doorgeklikt kan worden.
Dit deed ik d.m.v.:
<a href="javascript:void(0)" onclick=doSlide('demodiv');">Hoofditem</a>
Vervolgens sliden er drie menu items naar beneden die allen naar een eigen pagina verwijzen. Ging perfect.
Nu wil ik dat er aan het item 'Hoofditem' ook een link hangt. Ik doe:
<a href="index.php">Hoofditem</a>
En in de body:
<body onload="doSlide('demodiv');">
Het idee is dat er een nieuwe pagina opent (index.php) als er op Hoofditem wordt geklikt, waarna dan het menu alsnog uitslided met de drie subitems (dus achteraf, en niet meteen zoals op de 1e manier beschreven).
Wat gebeurt er nu: het menu slide juist naar boven, in plaats van naar beneden. ZIe ook de link onderaan.
Hieronder de code van de JS:
function doSlide(id){
timeToSlide = 60; // in milliseconds
obj = document.getElementById(id);
if(obj.style.display == "none"){ // if it's allready hidden we slide it down
obj.style.visibility = "visible";
obj.style.display = "block";
height = obj.offsetHeight;
obj.style.height="10px";
obj.style.visibility = "visible";
slideDown(obj,0,height,Math.ceil(height/timeToSlide));
} else {
slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight);
}
}
function slideDown(obj,offset,full,px){
if(offset < full){
obj.style.height = offset+"px";
offset=offset+px;
setTimeout((function(){slideDown(obj,offset,full,px);}),1);
} else {
obj.style.height = full+"px"; //If the data inside is updated on runtime you can use auto instead...
}
}
function slideUp(obj,px,full){
if((obj.offsetHeight-px) > 0){
obj.style.height = obj.offsetHeight-px+"px";
setTimeout((function(){slideUp(obj,px,full);}),1);
} else {
obj.style.height=full+"px"; // we reset the height if we were to slide it back down
obj.style.display = 'none';
}
}
Hoe los ik dit op?
Voorbeeld spreekt voor zich: Link.
Menu klapt in bij het openen terwijl dit juist moet uitklappen..(What we do)
Dit deed ik d.m.v.:
<a href="javascript:void(0)" onclick=doSlide('demodiv');">Hoofditem</a>
Vervolgens sliden er drie menu items naar beneden die allen naar een eigen pagina verwijzen. Ging perfect.
Nu wil ik dat er aan het item 'Hoofditem' ook een link hangt. Ik doe:
<a href="index.php">Hoofditem</a>
En in de body:
<body onload="doSlide('demodiv');">
Het idee is dat er een nieuwe pagina opent (index.php) als er op Hoofditem wordt geklikt, waarna dan het menu alsnog uitslided met de drie subitems (dus achteraf, en niet meteen zoals op de 1e manier beschreven).
Wat gebeurt er nu: het menu slide juist naar boven, in plaats van naar beneden. ZIe ook de link onderaan.
Hieronder de code van de JS:
function doSlide(id){
timeToSlide = 60; // in milliseconds
obj = document.getElementById(id);
if(obj.style.display == "none"){ // if it's allready hidden we slide it down
obj.style.visibility = "visible";
obj.style.display = "block";
height = obj.offsetHeight;
obj.style.height="10px";
obj.style.visibility = "visible";
slideDown(obj,0,height,Math.ceil(height/timeToSlide));
} else {
slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight);
}
}
function slideDown(obj,offset,full,px){
if(offset < full){
obj.style.height = offset+"px";
offset=offset+px;
setTimeout((function(){slideDown(obj,offset,full,px);}),1);
} else {
obj.style.height = full+"px"; //If the data inside is updated on runtime you can use auto instead...
}
}
function slideUp(obj,px,full){
if((obj.offsetHeight-px) > 0){
obj.style.height = obj.offsetHeight-px+"px";
setTimeout((function(){slideUp(obj,px,full);}),1);
} else {
obj.style.height=full+"px"; // we reset the height if we were to slide it back down
obj.style.display = 'none';
}
}
Hoe los ik dit op?
Voorbeeld spreekt voor zich: Link.
Menu klapt in bij het openen terwijl dit juist moet uitklappen..(What we do)
:strip_exif()/u/22670/td_icon2.gif?f=community)
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
En als je dan toch code 'leent' is 't wel handig even te kijken wat 't nou precies doet (en desnoods met debuggen uit te vogelen waar je probleem zit: 
Dit topic is gesloten.