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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2008
    Location
    Los Angeles
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ie6 mouseover/hover layer help?

    Hey there,

    I have a site which I do not want (or have time to) rebuild yet, and need a patch, so although I realize there are better, more holistic approaches to this problem, and would usually make use of them, I am just looking for a quick fix patch at this point.

    I have an image-based menu, and need to add a drop-down to one of the items, I created an absolute positioned div and hid it by default, calling on a small piece of javascript to change the 'visibility' to 'visible' when the image button calls onmouseover.

    This works perfectly in FF and IE7, but in IE6 the box (div) just flickers, and disappears before I can get down to the 2nd (of 2) menu item.

    Here is the relevant code:
    Code:
    <style type="text/css">
    	#blog-drop-box {
    		background-color: #f8f1d8;
    		color: #9b623f;
    		width: 150px;
    		height: 50px;
    		padding: 0;
    		text-align: left;
    		z-index: 99999;
    		border: 1px solid #666;
    		border-width: 0 1px 1px 0;
    		position: absolute;
    		top: 179px;
    		left: 50%;
    		margin: 0 0 0 -30px;
    		visibility: hidden;
    		z-index: 99999;
    	}
    
    	#blog-drop-box a {
    		font: 12px Arial, Helvetica, sans-serif;
    		color: #9b623f;
    		display: block;
    		margin: 0;
    		padding: 5px 0 5px 15px;
    		border: 1px solid #9b623f;
    		border-width: 0 0 1px 0;
    	}
    
    	#blog-drop-box a:hover {
    		display: block;
    		color: #000;
    		border: 1px solid #000;
    		border-width: 0 0 1px 0;
    		visibility: visible;
    	}
    </style>
    
    <div id="blog-drop-box">
    	<a href="blogeditors/" onmouseover="toggleBlogs('over'); MM_swapImage('homenav_blogs','','images/homenav_blogs-over.gif',1)" onmouseout="toggleBlogs('out'); MM_swapImgRestore()">Staff Blogs</a>
    	<a href="blogbeautynista/" onmouseover="toggleBlogs('over'); MM_swapImage('homenav_blogs','','images/homenav_blogs-over.gif',1)" onmouseout="toggleBlogs('out'); MM_swapImgRestore()">Beautynista Blog</a>
    </div>
    
    <script type="text/javascript">
    	function toggleBlogs(curStatus) {
    		if (curStatus == "over") {
    			document.getElementById("blog-drop-box").style.visibility = "visible";
    		} else {
    			document.getElementById("blog-drop-box").style.visibility = "hidden";
    		}
    	}
    </script>
    
          <TD COLSPAN=2 class="blog-menu-td"><a href="/blogeditors/" onMouseOver="toggleBlogs('over'); MM_swapImage('homenav_blogs','','images/homenav_blogs-over.gif',1)" onMouseOut="toggleBlogs('out'); MM_swapImgRestore()"><IMG NAME="homenav_blogs" SRC="images/homenav_blogs.gif" WIDTH=81 HEIGHT=33 BORDER=0 ALT=""></a></TD>
    Any help would be greatly appreciated, so frustrating, when will ie6 die?!
    Thanks.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    The usual way to fix this is to put a delay on the image off, using a setTimeout, and then cancel the timeout if you find an imageover for the same chunk.

    With a menu, this means that the mouseover on the menu has to cause the display, of course, and then you have to have a mouseover on the dropdown as well. EITHER the menu or dropdown mouseover has to cancel the mouseout.

    It sound like a lot of code, but it's truly not. Honest.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    ...but in IE6 ....

    enuff said. heheh

    We should organize a petition to outlaw IE6. What a better world it would be without IE6.

    Think of the children!!

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Code:
    <style type="text/css">
    	#blog-drop-box {
    		background-color: #f8f1d8;
    		color: #9b623f;
    		width: 150px;
    		height: 50px;
    		padding: 0;
    		text-align: left;
    		z-index: 99999;
    		border: 1px solid #666;
    		border-width: 0 1px 1px 0;
    		position: absolute;
    		top: 179px;
    		left: 50%;
    		margin: 0 0 0 -30px;
    		visibility: visible;
    		z-index: 99999;
    	}
    
    	#blog-drop-box a {
    		font: 12px Arial, Helvetica, sans-serif;
    		color: #9b623f;
    		display: block;
    		margin: 0;
    		padding: 5px 0 5px 15px;
    		border: 1px solid #9b623f;
    		border-width: 0 0 1px 0;
    	}
    
    	#blog-drop-box a:hover {
    		display: block;
    		color: #000;
    		border: 1px solid #000;
    		border-width: 0 0 1px 0;
    		visibility: visible;
    	}
    #homenav_blogs{visibility: hidden;}
    </style>
    
    <div id="blog-drop-box">
    	<a href="blogeditors/" onmouseover="toggleBlogs('over')" onmouseout="toggleBlogs('out')">Staff Blogs</a>
    	<a href="blogbeautynista/" onmouseover="toggleBlogs('over')" onmouseout="toggleBlogs('out')">Beautynista Blog</a>
    </div>
    
    <script type="text/javascript">
    	function toggleBlogs(curStatus) {
    		if (curStatus == "over") {
    			document.getElementById("homenav_blogs").style.visibility = "visible";
    		} else {
    			document.getElementById("homenav_blogs").style.visibility = "hidden";
    		}
    	}
    </script>
    
          <TD COLSPAN=2 class="blog-menu-td">
    
    <a href="/blogeditors/">
    <IMG id="homenav_blogs" SRC="http://www.wingsacrossamerica.us/events/blogIcon.gif" WIDTH=81 HEIGHT=33 BORDER=0 ALT=""></a></TD>
    not sure what you wanna do but I made it so the image shows up if you mouseover the div. Otherwise, there's no way to get to the div once you onmouseoff

  • #5
    New Coder
    Join Date
    Oct 2008
    Location
    Los Angeles
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved, or at least patched. ;)

    Hey guys, thanks for your suggestions.

    @Old Pedant: I tried what you suggested, but I could not get my delay to work properly across all browsers - got it working in IE6, then was flakey in FF, probably due to my feeble js skills.

    What I ended up doing was taking a cue from Stu Nicholls' CSSPlay (http://www.cssplay.co.uk/) drop-downs and wrapped a table in conditional comments, like so:
    (note: I left the js the same as the above original)
    Code:
    <div id="blog-drop-box">
    	<!--[if IE 6]>
    		<table border="0" cellpadding="0" cellspacing="0" height="50" width="150" onmouseover="toggleBlogs('over'); MM_swapImage('homenav_blogs','','images/homenav_blogs-over.gif',1)" onmouseout="toggleBlogs('out'); MM_swapImgRestore()">
    			<tr>
    				<td>
    	<![endif]-->
    	<a href="blogeditors/" onmouseover="toggleBlogs('over'); MM_swapImage('homenav_blogs','','images/homenav_blogs-over.gif',1)" onmouseout="toggleBlogs('out'); MM_swapImgRestore()">Staff Blogs</a>
    	<!--[if IE 6]>
    				</td>
    			</tr>
    			<tr>
    				<td>
    	<![endif]-->
    	<a href="blogbeautynista/" onmouseover="toggleBlogs('over'); MM_swapImage('homenav_blogs','','images/homenav_blogs-over.gif',1)" onmouseout="toggleBlogs('out'); MM_swapImgRestore()">Beautynista Blog</a>
    	<!--[if IE 6]>
    				</td>
    			</tr>
    		</table>
    	<![endif]-->
    </div>
    Works beautifully in FF, IE6/7, and Safari. That should hold 'em till we can get around to a proper (and total) redesign.

    @TinyScript: lol, yes, so true - but I'm more worried about my *own* sanity at this point!

    Thanks guys, take care.


  •  

    Posting Permissions

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