Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Massachusetts
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation expand div onmouseover, should be simple -- please help!

    Hi everyone,

    So I've been working on this site and I think I must be tired or something because I can't for the life of me figure out why this script isn't working! I'm trying to make a simple mouse over drop down menu. I want to mouse over a tab and have it change the display property of the div below it. I watched the script in firebug and when I mouse over it the script window says:

    function onmouseover(event) {
    expandDiv('tools');
    }

    /*and*/

    function onmouseout(event) {
    hideDiv('tools');
    }
    This is the HTML:

    <div class="tab"><a href="" onmouseover="expandDiv('tools');" onmouseout="hideDiv('tools');">Tools</a>
    <br />
    <div id="tools" class="menu">
    <ul>
    <li>Rakes</li>
    <li>Leaf Grabbers</li>
    <li>Bulb Augers</li>
    <li>Trowels</li>
    <li>Scoops</li>
    <li>Weeders</li>
    <li>Composting</li>
    <li>Easy Reachers</li>
    <li>Pruning Saws</li>
    <li>Scissors</li>
    <li>Shears</li>
    <li>Knives</li>
    <li>Grass & Hedge Shears</li>
    <li>Tool & Shear Sharpeners</li>
    </ul>
    </div>
    </div>
    The script:

    function expandDiv(menu){
    if(document.getElementById(menu).style.display == 'none')
    {document.getElementById(menu).style.display = 'block';}
    else
    {document.getElementById(menu).style.display = 'none';}
    }
    function hideDiv(menu){
    if(document.getElementById(menu).style.display == 'block')
    {document.getElementById(menu).style.display = 'none';}
    else
    {document.getElementById(menu).style.display = 'block';}
    }
    And the CSS:

    .tab {
    display:none;
    text-align:center;
    width:8%;
    float:left;
    margin-top:.8em;
    margin-right:2em;
    }
    Any help you can give would be awesome. I know I'm doing something stupid but I need a fresh pair of eyes to find it.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Oh...I see the problem: When you set the display in CSS, it is *NOT* available via element.style.display. But in any case, there is NO REASON for you to use an if test in your expandDiv and hideDiv functions! You don't want to toggle the display; you want to set it directly.

    Easy fix:
    Code:
    function expandDiv( id)
    {
        document.getElementById(id).style.display = "block";
    }
    function hideDiv(id)
    {
        document.getElementById(id).style.display = "none";
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    function onmouseover(event) {
    expandDiv('tools');
    }
    
    /*and*/
    
    function onmouseout(event) {
    hideDiv('tools');
    }
    ..is, apparently the code that displays in Firebug.

    It works for me, apart from the fact that nothing is initially visible. So use

    Code:
    .tab {
        display: block;
    /* .. and possibly.. */
    #tools {
        display: none;
    Also, use href="#" for the link.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    And your CSS makes no sense.
    Code:
    .tab {
        display:none;
        ...
    }
    That will initially hide *EVERYTHING*, even the <a> toggler!

    You need, instead,
    Code:
    #tools { 
        display : none;
        ...
    }
    EDIT: Andrew beat me to it.
    Last edited by Old Pedant; 12-26-2012 at 10:52 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Actually, even if you use <a href="#"> you also need to add an onclick to your <a> tag:
    Code:
    <a href="#" onclick="return false;" ...>
    so that it will do nothing at all if clicked on.

    A better answer might be to use a <span> instead of <a>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    A better answer might be to use a <span> instead of <a>.
    I agree there is no reason to use a link if it isn't a link.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Realistically, this whole thing could be done ultra simple, once the CSS is corrected:
    Code:
    <div class="tab">
      <span 
        onmouseover="document.getElementById('tools').style.display='block';"
        onmouseout ="document.getElementById('tools').style.display='none';"
    >Tools</span>
    <br />
    <div id="tools" class="menu">
    <ul>
    ...
    Maybe not best coding style, but the simplest.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there yokopolaris,

    and a warm welcome to these forums.

    Have you not considered just using CSS as a possible solution?
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>get your tools here...</title>
    
    <style type="text/css">
    #tools {
        float:left;
        cursor:pointer;
     }
    #tools ul {
        display:none;
     }
    #tools:hover ul {
        display:block;
     }
    </style>
    
    </head>
    <body>
    
    <div id="tools">Tools
    <ul>
     <li>Rakes</li>
     <li>Leaf Grabbers</li>
     <li>Bulb Augers</li>
     <li>Trowels</li>
     <li>Scoops</li>
     <li>Weeders</li>
     <li>Composting</li>
     <li>Easy Reachers</li>
     <li>Pruning Saws</li>
     <li>Scissors</li>
     <li>Shears</li>
     <li>Knives</li>
     <li>Grass &amp; Hedge Shears</li>
     <li>Tool &amp; Shear Sharpeners</li>
    </ul>
    </div>
    
    </body>
    </html>
    coothead


  •  

    Tags for this Thread

    Posting Permissions

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