SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small Bit of Help, Please. DIV & Mozilla

    I have a table sitting in a DIV. The table, when absolutely positioned, resides adjacent to an image on the page. The image links and onmouseover shows the DIV. onmouseout hides the DIV. The DIV is a submenu so obviously I want users to be able to move their mouse to the submenu. To counter the hiding of the DIV, I added another show/hide javascript call on the table in the DIV. So, it's turned off when it leaves the link but is turned back on by the DIV table in the same change of pixel, so there shouldn't be even a flicker.

    Works with IE, but in Mozilla it doesn't make the leap and the menu just closes. I'd like to give the URL directly but as it's my new company design I'd rather it not be released in public. If you could please contact me (PM if you like) I will send the address straight away.

    Thanks in advance.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For this you should use a timeout. Make a global javascript variable to store the timeout. When you onMouseOut, instead of making the div invisible, start a timeout on a function that makes the div invisible.

    <a onMouseOver="killTimeout(); showDiv();" onMouseOut="startTimeout();" ...></a>
    Code:
    <script>
      var gTimeout = null;
      function startTimeout() {
        gTimeout = setTimeout("hideDiv('divId')", 100);
      }
      function killTimeout() {
        clearTimeout(gTimeout);
      }
      function showDiv() {
        //do whatever you do to show it
      }
      function hideDiv(obj) {
        //do whatever you do to hide it
      }
    </script>
    This will give the user some time(100 milliseconds) to move their mouse over the menu.

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  3. #3
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool! Will try that. From the looks of it, it should work perfectly and you didn't even see the page

    Just hate more JS :P

  4. #4
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, well, figures. Couldn't customize it right. Probably because there's multiple menus and the JS I was using lets you have a name for each one.

    Code:
    <script type='text/javascript'>
    <!--
    var gTimeout = null;
    function startTimeout() {
     gTimeout = setTimeout("hideDiv('divId')", 100);
    }
    function killTimeout() {
    clearTimeout(gTimeout);
    }
    function showDiv() {
      if (document.getElementById) {
    	var e = document.getElementById(id);
    	if (e) {
    	  if (e.style.display != "block" ) e.style.display = "block"
    	  else e.style.display = "none"
    	}  
      }
    }
    function hideDiv(obj) {
      if (document.getElementById) {
    	var e = document.getElementById(id);
    	if (e) {
    	  if (e.style.display != "block" ) e.style.display = "block"
    	  else e.style.display = "none"
    	}  
      }
    }
    //-->
    </script>
    and
    onMouseOver="killTimeout(); showDiv('e1');" onMouseOut="startTimeout();"
    in the tags.

    I tried

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I noticed you are calling the function like this:

    showDiv('e1');

    So you are passing the id of the div to the function. Then you need to make sure the function is this:

    function showDiv(id) {

    instead of

    function showDiv() {

    likewise in hideDiv, we have

    function hideDiv(obj) {

    obj should be id, since you are calling

    var e = document.getElementById(id);

    lastly, if you have multiple divs then you will need if statements in your startTimeout() and killTimeout() functions as well as defining a global var for each timeout.

    var gTimeout1, gTimeout2, etc
    function startTimeout(id) {
    if (id == "e1")
    gTimeout1 = setTimeout....;
    }

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  6. #6
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Hate to ask you for more help, but I really don't know Javascript at all. Would you mind, assuming that there's just e1 and e2 (which there is), provide the whole chunk of code in its entirety? Chances are I won't be able to get it to work properly if I have to edit it much.

    Thanks again.

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var gTimeout1 = null; var gTimeout2 = null;
    function startTimeout(id) {
      if (id == "e1")
        gTimeout1 = setTimeout("hideDiv('e1')", 100);
      else if (id == "e2")
        gTimeout2 = setTimeout("hideDiv('e2')", 100);
    }
    function killTimeout(id) {
      if (id == "e1")
        clearTimeout(gTimeout1);
      else if (id == "e2")
        clearTimeout(gTimeout2);
    }
    function showDiv(id) {
      if (document.getElementById) {
    	   var e = document.getElementById(id);
    	   if (e) {
    	     if (e.style.display != "block" ) e.style.display = "block"
    	       else e.style.display = "none"
    	   }  
      }
    }
    function hideDiv(id) {
      if (document.getElementById) {
    	   var e = document.getElementById(id);
        if (e) {
    	     if (e.style.display != "block" ) e.style.display = "block"
    	     else e.style.display = "none"
    	   }  
      }
    }
    tags:

    <a onMouseOver="killTimeout('e1'); showDiv('e1');" onMouseOut="startTimeout('e1');" ...></a>

    and the other tag will have e2 instead of e2
    good luck.

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  8. #8
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I'll try it out. And if you'd like to see the page, PM me.

  9. #9
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aww, not working! I'm getting "object expected" errors on the link lines.

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do your divs have id=e1, id=e2 respectively

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  11. #11
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, of course. I'll PM you the page.

  12. #12
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I had a chance to look it over. I made the following changes and it worked.
    1. Change the timeout time from 100, to 2000.
    2. Modify your div tags
    Code:
    <div class="dropdown" id='e2' onMouseOver="killTimeout('e2'); showDiv('e2');" style="display:none; position:absolute; left:100; top:100;">
    Obviously change the left, top positioning.

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  13. #13
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try that. Thanks again.

  14. #14
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, that didn't quite work but I did some editing and got it to the point where I ALMOST got it to do everything it needs to.

    The only problem is that when I hover over the link, then the div, then back to the link, it closes.

    Please use provided URL.

  15. #15
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! Thanks for all of your help.

  16. #16
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad you got it working, good luck with your site.

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.


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
  •