SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover Menu with timer (in Firefox)

    I am trying to create some hover menus, and unfortunately I am new to Javascript and can't quite tweak it like I need.

    Basically, when someone hovers over a link (image button), I want to set one div to display:block, and the div below it to display:none. Essentially replacing one div with the other.

    I have some code that does that, but it does not work in Firefox.

    Here I am passing in 2 objects, the first is the div of the menu I want to open, the second is the name of the div I am hiding "under" the menu.

    Once the menu is open, I would like to set a timer for 1-2 seconds to keep it open.

    Thanks in advance for your time.

    Rick



    <script language="JavaScript" type="text/jscript"><!--
    function show(object, object2) {
    if (document.getElementById) {
    document.getElementById(object).style.display = 'block';
    document.getElementById(object2).style.display = 'none';
    }
    else if (document.layers && document.layers[object]) {
    document.layers[object].display = 'block';
    document.layers[object2].display = 'none';
    }
    else if (document.all) {
    document.all[object].style.display = 'block';
    document.all[object2].style.display = 'none';
    }
    }

    function hide(object, object2) {
    if (document.getElementById) {
    document.getElementById(object).style.display = 'none';
    document.getElementById(object2).style.display = 'block';
    }
    else if (document.layers && document.layers[object]) {
    document.layers[object].display = 'none';
    document.layers[object2].display = 'block';
    }
    else if (document.all) {
    document.all[object].style.display = 'none';
    document.all[object2].style.display = 'block';
    }
    }
    //--></script>

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your script tag looks very IE-centric.
    Code:
    <script language="JavaScript" type="text/jscript">
    Try
    Code:
    <script type="text/javascript">

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'm sorry to say that the script you have there is a horrible vestige from the stoneage of computing, but it does work with the following code

    Code css:
    .hidden {
    	display: none;
    }
    Code html4strict:
    <p><a id="myLink" href="page.html" onmouseover="show('myLinkHide', 'myLinkShow')" onmouseout="hide('myLinkHide', 'myLinkShow')">Some link</a></p>
    <div id="myLinkShow">
    Hover over the link.
    </div>
    <div id="myLinkHide" class="hidden">
    Thank you for hovering over the link.
    </div>

    A simpler version of the code works with much easier javascript too:

    Code html4strict:
    <p><a id="myLink" href="page.html">Some link</a></p>
    <div id="myLinkShow">
    Hover over the link.
    </div>
    <div id="myLinkHide" class="hidden">
    Thank you for hovering over the link.
    </div>

    Code javascript:
    document.getElementById('myLink').onmouseover = function () {
    	document.getElementById(this.id + 'Show').className = 'hidden';
    	document.getElementById(this.id + 'Hide').className = '';
    };
    document.getElementById('myLink').onmouseout = function () {
    	document.getElementById(this.id + 'Hide').className = 'hidden';
    	document.getElementById(this.id + 'Show').className = '';
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Guys, I really appreciate the replies.

    Now, right when the page loads, it says:
    Error: 'document.getElementById(...)' is null or not an object

    I thought I followed pmw57's code pretty closely and used r51's suggestion.

    Do you have any other suggestions?? My first code worked perfect in IE. I just assumed I need to add another else if and list things correctly for Firefox to understand.


    But here is what I am using now:

    <script type="text/javascript"><!--
    document.getElementById('myLink').onmouseover = function ()
    { document.getElementById(this.id + 'Show').className = 'hidden';
    document.getElementById(this.id + 'Hide').className = '';};
    document.getElementById('myLink').onmouseout = function ()
    { document.getElementById(this.id + 'Hide').className = 'hidden';
    document.getElementById(this.id + 'Show').className = '';};
    //--></script>




    <p><a id="myLink" href="page.html">Some link</a></p>
    <div id="myLinkShow">Hover over the link.</div>
    <div id="myLinkHide" class="hidden">Thank you for hovering over the link.</div>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The script I'm using requires access to the page elements.

    If the script is run from the head then you'll need to use some kind of window.onload technique to run the script after the page has finished loading.

    A better solution is to place the script at the end of the body, just before the </body> tag so that the script can gain immediate access the page elements.

    It is also best practice for speeding up your web site to put scripts at the bottom.

    By that I mean the following structure:

    Code html4strict:
    <html>
    <head>
    </head>
    <body>
    ...
    <script src="script.js"></script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Hmm, I thought JS always goes at the top.

    Worked fine at the bottom, tho. I don't get the error anymore, but the link and 2 divs are constantly displayed in firefox and IE7.

    I am not sure if this matter (I don't think it should) but these div's and stuff are on a master page, not an aspx. So, it's not in the body, but I do have it just above the last </asp:Content> at the bottom of the page.

    Any suggestions??

    Thanks for the link, I'll check it out.

    Thanks for your time!!
    Rick

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The "myLinkHide" div has a class called "hidden" that should initially prevent it from showing.

    Have you defined the css declaration for the hidden class?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked beautifully with your link, but I tried changing it to work hovering over my image button or a div around it, and I get the object is null when the page loads.

    I feel I am really close. I really appreciate your time.

    Here is what I have for the divs I am tring to hide and show.



    <div id="SelfEmployed">
    <bis:NavigationHyperLink ID="ibSelfEmployedTopNav" runat="server" /_img/nav_top_1_on.gif">
    </bis:NavigationHyperLink></div>


    <div id="SelfEmployedHide"> //navigation menu here
    </div>
    <div id="SelfEmployedShow">
    <asp:Image ID="Image6" runat="server" ImageUrl="~/_img/nav_top_pic_1.jpg" />
    </div>



    <script type="text/javascript"><!--
    document.getElementById('SelfEmployed').onmouseover = function ()
    { document.getElementById(this.id + 'Show').className = 'hidden';
    document.getElementById(this.id + 'Hide').className = '';};

    document.getElementById('ibSelfEmployedTopNav').onmouseout = function ()
    { document.getElementById(this.id + 'Hide').className = 'hidden';
    document.getElementById(this.id + 'Show').className = '';};
    //--></script>

  9. #9
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I am such an idiot. I forgot to change the name in the second part of the JS to the divs name.

    So that is fixed and it works beautifully!!!.

    Thank you so much for your time and effort!!!

    Rick


Tags for this Thread

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
  •