[Javascript] scroll vergroot height

[Verwijderd]

Beste mede programmeurs.

Ik ben tegen een probleem aangelopen in javascript. Ik heb samen met een maatje van mij een script geschreven waarbij het de bedoeling is dat wanneer ik op: Content beheer klik dat ik dan een lijst krijg uitgeschoven met alle beschikbare modules.

Het leuke tot nu toe is: HET WERKT, maar niet voor de volle 100%....

Wanneer ik met mijn cursor op het menu ga staan, maakt niet uit welk item, dan maakt hij de ruimte van het eerst onderste vaste menu item "FAQ" een stuk groter en dat is iets wat ik dus niet wil. Wanneer ik hem weer sluit de scroll, dan toond hij alles weer goed, maar wanneer ik dan met mijn cursor iets beweeg dan krijg ik weer die ruimte vergroting.

Hieronder zie je een deel van de betreffende HTML en het javascript wat hier is gebruikt.

Graag hoor ik van jullie.

Het sjavascript wat is geschreven voor de scroll

code:

<script language='javascript'>

function scroll(item){
     if(parseInt(document.getElementById("submenu_"+ item).style.height) == 0){
          scrolldown(item);
     }
     else{
          scrollup(item);
     }
}

function scrolldown(item){
     if((parseInt(document.getElementById("submenu_"+ item).style.height) + 15) > parseInt(document.getElementById("submenu_"+ item +"_content").offsetHeight)){
          document.getElementById("submenu_"+ item).style.height = parseInt(document.getElementById("submenu_"+ item +"_content").offsetHeight) +"px";
     }
     if(parseInt(document.getElementById("submenu_"+ item).style.height) < parseInt(document.getElementById("submenu_"+ item +"_content").offsetHeight)){
          document.getElementById("submenu_"+ item).style.height = (parseInt(document.getElementById("submenu_"+ item).style.height) + 15) +"px";
          setTimeout("scrolldown('"+ item +"')", 20);
     }
}

function scrollup(item){
     if((parseInt(document.getElementById("submenu_"+ item).style.height) - 15) < 0){
          document.getElementById("submenu_"+ item).style.height = "0px";
     }
     if(parseInt(document.getElementById("submenu_"+ item).style.height) <= parseInt(document.getElementById("submenu_"+ item +"_content").offsetHeight)){
          document.getElementById("submenu_"+ item).style.height = (parseInt(document.getElementById("submenu_"+ item).style.height) - 15) +"px";
          setTimeout("scrollup('"+ item +"')", 20);
     }
}

</script>

De tabel waar het allemaal omgaat.

code:

<td height="500" valign="top" class="navigatiecontent">
                <div id="navigatie">
                        <ul>
                                <li>
                                        <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Hoofdpagina</a>
                                        <a href='javascript: scroll("contentbeheer");' id="normal">[img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Content beheer</a>
                                        <div id='submenu_contentbeheer' style='height: 0px; overflow: hidden;'>
                                        <div id='submenu_contentbeheer_content'>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Menu</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Pagina</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Afbeelding</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Gebruikers</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Nieuws</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Poll</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Prikbord</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Vacature</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Download</a>
                                                <a href="#" id="normal">[img]"images/spacer.gif"[/img][img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;F.A.Q.</a>

                                        </div>
                                        </div>

                                        <a href="faq/" id="normal">[img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;F.A.Q.</a>
                                        <a href="contact/" id="normal">[img]"images/spacer.gif"[/img][img]"images/arw.gif"[/img]&nbsp;Contact </a>
                                </li>
                        </ul>
                  </div>
    </td>

Indien jullie meer code nodig hebben dan hoor ik dat graag, maar dat lijkt mij tot nu toe nog niet nodig.

Gr. Martijn

P.s.

Hier zit hem volgens de browser de foutmelding

code:

 if(parseInt(document.getElementById("submenu_"+ item).style.height) <= parseInt(document.getElementById("submenu_"+ item +"_content").offsetHeight)){
          document.getElementById("submenu_"+ item).style.height = (parseInt(document.getElementById("submenu_"+ item).style.height) - 15) +"px";
          setTimeout("scrollup('"+ item +"')", 20);
     }

[ Voor 29% gewijzigd door Verwijderd op 13-06-2005 17:46 ]

[UltimateB]

Waarschijnlijk helpt het de leesbaarheid als je de code in een [code]-tag zet Niet echt leesbaar op deze manier.

[Verwijderd]

Ja sorry, kon de juiste aanduiding voor de code niet zo 1-2-3 vinden. Nu is het aangepast. Hoop dat je er nu wat verder mee komt.

[NMe]

Welke foutmelding krijg je van je browser? Lijkt me wel relevante info. Een live voorbeeldje is misschien ook wel handig.

Verder staat je topic in het foute subforum, clientside programmeren, waar Javascript onder valt, hoort in Webdesign & Graphics. Ik zal je topic even goed zetten.

PW>>WG

[Verwijderd]

Ja sorry jongens, ben zoals jullien kunnen zien geheel nieuw op dit forum. Vandaar dat nog niet alles vlekkeloos zal lopen.

Voor een voorbeeld verwijs ik jullie graag door naar:http://www.dream-webdesign.nl/s

En klik vervolgens op Content beheer

Ik krijg wanneer ik de scroll sluit een fout melding. Deze staat links onder in de IE browser.:

Er staat een ongeldig argument op regel 45, teken 11, code 0
en dat is deze regel

code:

         document.getElementById("submenu_"+ item).style.height = (parseInt(document.getElementById("submenu_"+ item).style.height) - 15) +"px";

Gr. Martijn

[ Voor 11% gewijzigd door Verwijderd op 13-06-2005 18:22 ]

[r0bert]

Doe eens dit:

code:

alert((parseInt(document.getElementById("submenu_"+ item).style.height) - 15) +"px");

En kijk of dit een geldige waarde is voor height.

edit: en verander de naam van de var "item" even naar wat anders, want deze is misschien wel reserved en anders op zijn minst verwarrend (bijv oModItem is al beter).

[ Voor 38% gewijzigd door r0bert op 13-06-2005 18:26 ]

[RickyHeijnen]

De javascript error die je krijgt als het menutje weer sluit heeft niks te maken met het feit dat het menu een beetje verspringt als je eroverheen gaat (als het submenu gesloten is).

[Verwijderd]

Maar dan is mijn vraag. Waar kan het dan wel mee te maken hebben ?

[André]

IE pikt een negatieve height niet, dus probeer dit eens:

code:

var a = parseInt(document.getElementById("submenu_"+ item).style.height) - 15;
if (a < 0) { a = 0; }
document.getElementById("submenu_" + item).style.height = a + "px";

[Kayshin]

Ehm, als ik in Opera 8.0 naar je voorbeeld kijk, kan ik dat menu wel uitschuiven, maar als ik hem dichtklap gaat hij dicht tot op een stukje (5-8px) na, hij schuift dan steeds op en neer van 5-8 naar 13-15 px en weer terug. (soort van flikker dus)

[Verwijderd]

En dat ligt niet aan Opera

Als ik in Firefox het voorbeeld bekijk werkt alles oke, maar zodra het menuutje één keer open en dicht geklapt is, en ik hem weer probeer te openen, zie ik dezelfde flikker.

Edit:

HUH... Zodra de flikker begint werkt het in/uitklappen niet meer, maar als ik een halve minuut toekijk en het weer probeer werkt het uitklappen wel, alleen geeft ie tijdens de animatie constant de flikker weer.

[ Voor 36% gewijzigd door Verwijderd op 14-06-2005 00:42 ]