SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with menu collapsing

    Hi,

    I have a problem with the collapsing of a menu and I hope someone here can help me

    The problem is that I when I open the site the menu's are not collapsed. They are open. I want them to be collapsed.

    This is my html code:
    Code:
    <body>
    <div class="hoofd">
    	<div class="logo">
         	<img src="Afbeeldingen/logowielermuseum.jpg" width="420" height="112">	</div>
    	<div class="taal">
    		<a href="#">English</a> ~ <a href="#">Fran&ccedil;ais</a>	</div>
    	
    	
    	
        <div class="sitemap">
    		<a href="#">Contact</a> ~ <a href="#">Sitemap</a> ~ <a href="#">Zoek</a> ~ <a href="#">Faq</a> ~ <a href="#">Colofon</a>	</div>
      <div class="menu">
      	<ul>
      		<li>
    			<a href="#" id="museum">Museum</a>
    			<ul>
    				<li>test1</li>
    				<li>test2</li>
    				<li>test3</li>
    			</ul>
    		</li>
    		<li>
    			<a href="#" id="collectie">Collectie</a>
    			<ul>
    				<li>test1</li>
    				<li>test2</li>
    				<li>test3</li>
    			</ul>		
    		</li>
    	</ul>
      </div>
    	<!-- TemplateBeginEditable name="Aanpasbaar" -->
     	<div class="inhoud"></div>
      <!-- TemplateEndEditable -->
      <div class="spatie">&nbsp;</div>
    </div>
    </body>
    This is my javascript code:

    Code:
    // JavaScript Document
    function expandOrCollapse()
    {
    var ul = this.nextSibling;
    while(ul.tagName != "UL") // Search for the next UL tag
    {
    ul = ul.nextSibling;
    if ( ul == null )
    return true;
    }
    if ( ul.style.display == "none"
    || ul.style.display == "" )
    ul.style.display = "block";
    else
    ul.style.display = "none";
    return false;
    }
    
    
    
    window.onload = ini;
    function ini()
    {
    if(document.getElementById("museum").nextSibling.tagName == "ul")
    {
    	document.getElementById("museum").nextSibling.nextSibling.style.display = "none";
    }
    else
    {
    	document.getElementById("museum").nextSibling.style.display = "none";
    }
    
    document.getElementById("museum").onclick = expandOrCollapse();
    
    }
    This is my reference to the javascript:

    Code:
    <script language="JavaScript" src="../menu.js">

    When I use FF, you can get an error log (don't know correct name in English) and it tells me this:

    document.getElementById("museum") has no properties

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Try putting this line right at the end:
    Code:
    window.onload = ini;
    Also, when comparing the tagName of something to a string, send it to lower/upper case first. At the moment you're not being very consistent:
    Code:
    while(ul.tagName != "UL")
    ...
    if(document.getElementById("museum").nextSibling.tagName == "ul")
    Do this:
    Code:
    while(ul.tagName.toLowerCase() != "ul")
    ...
    if(document.getElementById("museum").nextSibling.tagName.toLowerCase() == "ul")
    Also change this line:
    Code:
    document.getElementById("museum").onclick = expandOrCollapse();
    to this:
    Code:
    document.getElementById("museum").onclick = expandOrCollapse;
    You don't need the ()

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried it...

    It doesn't work

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I get this error:
    Code:
    document.getElementById("museum").nextSibling.style has no properties
    This is because you need to do nextSibling.nextSibling. The nextSibling is a text node (the whitespace between the nodes) and so the UL is two nodes away from the anchor, not one.

    Also see my other comments in the previous post.

    Also, you don't need to use the "language" attribute in the SCRIPT element. Use type="text/javascript" instead.

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I now have following code:

    Code:
    function expandOrCollapse()
    {
    var ul = this.nextSibling;
    while(ul.tagName.toLowerCase() != "ul") // Search for the next UL tag
    {
    ul = ul.nextSibling;
    if ( ul == null )
    return true;
    }
    if ( ul.style.display == "none" || ul.style.display == "" )
    ul.style.display = "block";
    else
    ul.style.display = "none";
    return false;
    }
    
    
    
    
    function ini()
    {
    	if(document.getElementById("museum").nextSibling.tagName.toLowerCase() == "ul")
    	{
    		document.getElementById("museum").nextSibling.nextSibling.style.display = "none";
    	}
    	else
    	{
    		document.getElementById("museum").nextSibling.nextSibling.style.display = "none";
    	}
    	
    	document.getElementById("museums").onclick = expandOrCollapse;
    }
    window.onload = ini;
    I get following error:

    document.getElementById("museum").nextSibling.tagName has no properties

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Like I said, it has to be nextSibling.nextSibling:
    Code:
     document.getElementById("museum").nextSibling.nextSibling.tagName

  7. #7
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok

    I can now collapse the menu, but when I open the site it is still open... It has to be closed when I open it...

    Also, when I close it, I can not open it again :s

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In your ini() function, #museum's display state is set to 'none' in both cases of the if statement. I believe you need a "block" in there somewhere.

  9. #9
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Indeed

    This is the code:

    Code:
    // JavaScript Document
    function expandOrCollapse()
    {
    var ul = this.nextSibling;
    while(ul.tagName.toLowerCase() != "ul") // Search for the next UL tag
    {
    ul = ul.nextSibling;
    if ( ul == null )
    return true;
    }
    if ( ul.style.display == "none" || ul.style.display == "" )
    ul.style.display = "block";
    else
    ul.style.display = "none";
    return false;
    }
    
    
    
    
    function ini()
    {
    	if(document.getElementById("museum").nextSibling.nextSibling.tagName.toLowerCase() == "ul")
    	{
    		document.getElementById("museum").nextSibling.nextSibling.style.display = "none";
    	}
    	else
    	{
    		document.getElementById("museum").nextSibling.nextSibling.style.display = "block";
    	}
    	
    	document.getElementById("museum").onclick = expandOrCollapse;
    }
    window.onload = ini;

    It is closed when I load the site, but now I can't open it anymore :s

  10. #10
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It only opens or closes when I refresh the page... Not when I click it :s

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You might need to do something to this like you did earlier:
    Code:
    var ul = this.nextSibling;

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also, I think this is unnecessary:
    Code:
    if ( ul == null )
    return true;

  13. #13
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand what you mean...

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Think about what I said earlier about nextSibling and text nodes.

  15. #15
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, everything is solved now

    Thanks for your help Really thanks

  16. #16
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Pleasure.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •