SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmouseover hide/show menu not working in IE6

    I have developed an image based menu with a combination of zeldman's image-matrix css trick and a tiny bit of javascript. The css is working fine across browser's and platforms (I test firefox, safari, opera, and IE). However, the javascript will not work in IE. The function is not a problem in any of the other browsers.

    All help and suggestions greatly appreciated, code below:

    javascript:
    Code:
    // really simple sub-menu hide/show
    function hideShow(element){
    		this.href = "javascript:hideShow(" + element + ");";
    	if (document.all) {
    		var e = document.getElementById(element);
    		if (e.className == 'hide' || e.style.display == 'none'){
    		
    		if (document.all){
    		switch(element) {
    			case 'aboutMenu':
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'booksMenu':
    				hide('aboutMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'newsMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'eventsMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('communityMenu');
    				break;
    			case 'communityMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				break;
    			}
    			}
    			
    		e.className = 'show';
    		e.style.display = 'block';
    	
    		//window.setTimeout("hide('" + element + "')", 8000);
    	
    	} 
    	
    	} else if (document.getElementById) {
    	
    		var e = document.getElementById(element);
    		if (e.className == 'hide' || e.style.display == 'none'){
    		
    		switch(element) {
    			case 'aboutMenu':
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'booksMenu':
    				hide('aboutMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'newsMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'eventsMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('communityMenu');
    				break;
    			case 'communityMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				break;
    			}
    			
    		e.className = 'show';
    		e.style.display = 'block';
    		
    		//window.setTimeout("hide('" + element + "')", 8000);
    	
    	} 
    	}
    }
    
    function hide(element){
       	var e = document.getElementById(element);
       	e.className = 'hide';
    	e.style.display = 'none';
    }
    html
    Code:
    	<ul id="topNav">
    		<li id="about">
    			<a href="#" onmouseover="hideShow('aboutMenu');" onblur="hide('aboutMenu');">About</a>	
    			<ul id="aboutMenu" class="hide" style="display: none;">
    				<li id="bio"><a href="#" title="Bio">Bio</a></li>
    				<li id="aboutVI"><a href="#" title="About V.I.">About V.I.</a></li>
    				<li id="links"><a href="#" title="Links">Links</a></li>
    			</ul>
    		</li>
    		<li id="books">
    			<a href="#" onmouseover="hideShow('booksMenu');" onblur="hide('booksMenu');">Books</a>
    			<ul id="booksMenu" class="hide" style="display: none;">
    				<li id="novels"><a href="#" title="Novels">Novels</a></li>
    				<li id="shortStories"><a href="#" title="Short Stories">Short Stories</a></li>
    				<li id="essays"><a href="#" title="Essays">Essays</a></li>
    			</ul>
    		</li>
    		<li id="news">
    			<a href="#" onmouseover="javascript:hideShow('newsMenu');" onblur="hide('newsMenu');">News</a>
    			<ul id="newsMenu" class="hide" style="display: none;">
    				<li id="current"><a href="#" title="Current">Current</a></li>
    				<li id="archives"><a href="#" title="Archives">Archives</a></li>
    				<li id="pressRoom"><a href="#" title="Press Room">Press Room</a></li>
    			</ul>
    		</li>
    		<li id="events">
    			<a href="#" onmouseover="javascript:hideShow('eventsMenu');" onblur="hide('eventsMenu');">Events</a>
    			<ul id="eventsMenu" class="hide" style="display: none;">
    				<li id="tourInfo"><a href="#" title="Tour Info">Tour Info</a></li>
    				<li id="other"><a href="#" title="Other">Other</a></li>
    				<li id="photos"><a href="#" title="Photos">Photos</a></li>
    			</ul>
    		</li>
    		<li id="community">
    			<a href="#" onmouseover="javascript:hideShow('communityMenu');" onblur="hide('communityMenu');">Community</a>
    			<ul id="communityMenu" class="hide" style="display: none;">
    				<li id="FAQs"><a href="#" title="FAQs">FAQs</a></li>
    				<li id="discussion"><a href="#" title="Discussion">Discussion</a></li>
    				<li id="newsletter" title="Newsletter"><a href="#">Newsletter</a></li>
    				<li id="podcast"><a href="#" title="Podcast">Podcast</a></li>
    			</ul>
    		</li>
    	</ul>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll probably have to excuse me, since I'm not a JavaScript guru, but could you per chance post a link to a test page with this in action? I don't want to recommend something that won't work (or forward this to someone who knows more about JS than I do).

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    test page

    hi dan, the menu in action is here:

    http://aromanscandal.org/paretsky/interior.html

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    GOOD LORD - talk about overthinking a solution to a problem... That's NOT 'really simple' anymore - you've got redundant if statements that do nothing, multiple switch statements that are functionally identical... and about a dozen more classes than are needed... onmouseover is automatically running javascript, so the javascript: isn't needed...

    Lemme see if I can make sense of this, rewrite pending.

    -- edit --

    oh, and it doesn't work in ANY browser with large fonts on... and you cannot rely on onblur EVER firing (it rarely does).

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, CSS:

    Code:
    #topNav li ul {
    	display:none;
    }
    
    #topNav li.show ul {
    	display:block;
    }
    Javascript:
    Code:
    <script type="text/javascript">
    var last='';
    
    function Show(element){
    	Hide();
    	last=element;
    	element.className='show';
    	return true;
    }
    
    function Hide() {
    	if (last!=='') {
    		last.className='';
    		last='';
    		return true;
    	} else return false;
    }
    and the HTML:

    Code:
    <ul id="topNav">
    		<li class="hide" onmouseover="Show(this);">
    			<a href="#">About</a>	
    			<ul>
    				<li><a href="#" title="Bio">Bio</a></li>
    				<li><a href="#" title="About V.I.">About V.I.</a></li>
    				<li><a href="#" title="Links">Links</a></li>
    			</ul>
    		</li>
    		<li class="hide" onmouseover="Show(this);">
    			<a href="#">Books</a>
    			<ul>
    				<li><a href="#" title="Novels">Novels</a></li>
    				<li><a href="#" title="Short Stories">Short Stories</a></li>
    				<li><a href="#" title="Essays">Essays</a></li>
    			</ul>
    		</li>
    		<li class="hide" onmouseover="Show(this);">
    			<a href="#">News</a>
    			<ul>
    				<li><a href="#" title="Current">Current</a></li>
    				<li><a href="#" title="Archives">Archives</a></li>
    				<li><a href="#" title="Press Room">Press Room</a></li>
    			</ul>
    		</li>
    		<li class="hide" onmouseover="Show(this);">
    			<a href="#">Events</a>
    			<ul>
    				<li><a href="#" title="Tour Info">Tour Info</a></li>
    				<li><a href="#" title="Other">Other</a></li>
    				<li><a href="#" title="Photos">Photos</a></li>
    			</ul>
    		</li>
    		<li class="hide" onmouseover="Show(this);">
    			<a href="#">Community</a>
    			<ul>
    				<li><a href="#" title="FAQs">FAQs</a></li>
    				<li><a href="#" title="Discussion">Discussion</a></li>
    				<li><a href="#" title="Newsletter">Newsletter</a></li>
    				<li><a href="#" title="Podcast">Podcast</a></li>
    			</ul>
    		</li>
    	</ul>
    I pulled the onblur since it doesn't fire properly in any browser... I'd probably use a onmouseout myself there, in which case you just add an onmouseout="hide();" after the but that's just personal preference. I threw in proper return values mostly for future coding - it's just 'safer' to plan ahead on those.

    Note that because it changes the parent LI's class and not the one that's showing/hiding, you can use:

    #navTop li.hide a

    to keep the anchor lit - or to change the background of the entire LI (the anchor and child UL to boot).

    Should work IE, FF, Opera and Safari no problem... though to get your images you will likely have to add the classes back to your anchors.

    THOUGH, you have some MAJOR layout issues in CSS, at least in regards to 'large font' systems, probably because of this:
    Code:
    position: relative;
    	float: left;
    	width: 53.6em;
    	margin-top: -12em; _margin-top: -24em;
    	margin-left: 11em; _margin-left: 5.5em;
    	border: 0; 
    	height: 2em !important; _overflow:hidden;
    Being that EM is NOT a fixed metric, as you cannot guarantee the user has the same fonts you do, AND the size is effected by large fonts, it can EASILY break your layout (as it's doing on my machine) - and people wonder why I'm so adamant about EM layouts being a bad idea. Here's a screencap:

    http://battletech.hopto.org/for_othe...roken_sara.jpg - 1600x1200 285k

    A LOT of the problem is likely that your 'overthinking' your CSS - I'd say... about 40% of your CSS and positioning is unneccessary, and is just confusing the matter.

  6. #6
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    deathshadow, many thanks for the help. i understand about the font size issue, it is actually the reason i am using ems (to be ie compliant). i've heard that setting the font-size to 62.5% in the body is a method to force browsers to treat an em as roughly 10px as opposed to 16px (of course if you redefine the font-size on an element you are also using for positioning this gets thrown).

    however, i am a bit stumped as to what is causing the extra bottom margin on my header which is forcing me to use the negative positioning values you point out, and which i would really like to fix.

    in terms of your javascript solution, this isn't working (copied verbatim from here and applied to my code as indicated). i don't understand how you are assigning a mouseover event to an element that has its display set to 'none' as in your code above; is there something i am missing? i did rewrite things to be more simple, as below:

    thanks,
    alex

    ps- by unecessary classes etc are you referring to the way that i've positioned the active areas of my menus? afaik (which may not be far) this is how one can set up an 'image map' of sorts using css so one doesn't have to use separate images for each button.

    javascript
    Code:
    function hideShow(element){
    		this.href = "javascript:hideShow(" + element + ");";
    	
    		var e = document.getElementById(element);
    		if (e.className == 'hide' || e.style.display == 'none'){
    		
    		switch(element) {
    			case 'aboutMenu':
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'booksMenu':
    				hide('aboutMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'newsMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('eventsMenu');
    				hide('communityMenu');
    				break;
    			case 'eventsMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('communityMenu');
    				break;
    			case 'communityMenu':
    				hide('aboutMenu');
    				hide('booksMenu');
    				hide('newsMenu');
    				hide('eventsMenu');
    				break;
    			}
    			
    		e.className = 'show';
    		e.style.display = 'block';
    		
    	} 
    	return true;
    }
    html
    Code:
    	<ul id="topNav">
    		<li id="about">
    			<a href="#" onmouseover="hideShow('aboutMenu');">About</a>	
    			<ul id="aboutMenu" class="show">
    				<li id="bio"><a href="#" title="Bio">Bio</a></li>
    				<li id="aboutVI"><a href="#" title="About V.I.">About V.I.</a></li>
    				<li id="links"><a href="#" title="Links">Links</a></li>
    			</ul>
    		</li>
    		<li id="books">
    			<a href="#" onmouseover="hideShow('booksMenu');">Books</a>
    			<ul id="booksMenu" class="hide">
    				<li id="novels"><a href="#" title="Novels">Novels</a></li>
    				<li id="shortStories"><a href="#" title="Short Stories">Short Stories</a></li>
    				<li id="essays"><a href="#" title="Essays">Essays</a></li>
    			</ul>
    		</li>
    		<li id="news">
    			<a href="#" onmouseover="hideShow('newsMenu');">News</a>
    			<ul id="newsMenu" class="hide">
    				<li id="current"><a href="#" title="Current">Current</a></li>
    				<li id="archives"><a href="#" title="Archives">Archives</a></li>
    				<li id="pressRoom"><a href="#" title="Press Room">Press Room</a></li>
    			</ul>
    		</li>
    		<li id="events">
    			<a href="#" onmouseover="hideShow('eventsMenu');">Events</a>
    			<ul id="eventsMenu" class="hide">
    				<li id="tourInfo"><a href="#" title="Tour Info">Tour Info</a></li>
    				<li id="other"><a href="#" title="Other">Other</a></li>
    				<li id="photos"><a href="#" title="Photos">Photos</a></li>
    			</ul>
    		</li>
    		<li id="community">
    			<a href="#" onmouseover="hideShow('communityMenu');">Community</a>
    			<ul id="communityMenu" class="hide">
    				<li id="FAQs"><a href="#" title="FAQs">FAQs</a></li>
    				<li id="discussion"><a href="#" title="Discussion">Discussion</a></li>
    				<li id="newsletter" title="Newsletter"><a href="#">Newsletter</a></li>
    				<li id="podcast"><a href="#" title="Podcast">Podcast</a></li>
    			</ul>
    		</li>
    	</ul>

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alxklo
    I don't understand how you are assigning a mouseover event to an element that has its display set to 'none' as in your code above; is there something i am missing?
    It's not assigned to that element, but one of it's children - notice the CSS declaration:

    #topNav li ul
    and
    #topNav li.show ul

    That first one sets the property of all ul's under li's under #topnav - the second one sets all ul's uder li's with the class .show under #topnav. All I'm doing is changing the parent containers class, and all the children will follow - which works fine in testing here.

    It's a way to use less classes, cleaning up the CSS a good deal.

    Those endless switch statements and multiple hide calls of yours - that's just more work than is needed and overthinking the solution.

    Hang on, I'll take a stab at a rewrite.

  8. #8
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, going through this - the biggest problem I'm seeing is the use of EM with images as backgrounds - since EM resizes and backgrounds DON'T (in anything other than opera) this layout is uber broken... I'm gonna see if I can trick it with a mix of px and em

    THIS is why I don't EVER use EM or default size fonts - because the moment you get images involved it's a nightmare and a half.

    EVERYTHING in that header should probably be declared in PX - except perhaps the width. EM does NOT start out the same size between browsers, so in IE and Opera on windows large fonts, and Opera on linux (or other X11 based) at 100dpi is going to be broken as is...

    I'm slicing the header background into three images, then compositing them on screen so when the font size changes the layout doesn't break.

  10. #10
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think I'm making 'my version' look wrong - do you have a baseline .jpg of what you WANT it to look like? With your existing code I get different appearances in all browsers, DOUBLE that when 'large fonts/120 dpi' is figured into the equation.

  11. #11
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    working through ems

    ok, so i went through and changed everything that should stay put to have pixels as the declarations for margins and positioning, which is helping tremendously. Still a bit more work to do, but this is definitely helping. So the lesson for me here is to use ems for the font-sizes so IE can resize them, and pixels for everything else (particularly background image declarations, the reasons for which are becoming obvious here). Will have to finish this and take abother stab at the .js tonight- still a bit confused on this, but it is maybe becoming more clear. What I don't understand is why it doesn't work at all in IE. It seems like there must be something very basic which is causing IE to break? It doesn't throw any errors either, which has me double stumped.

    Anyway, thanks again for the continued help deathshadow.

    -Alex

  12. #12
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's my 'version' in action:

    http://battletech.hopto.org/for_othe.../template.html

    as always the directory
    http://battletech.hopto.org/for_others/alxklo

    is unlocked you you can grab the files.

    I resliced/remastered all the images for filesize optimization as well as simplifying the 'rollovers' - as well as making the rollover effects actually line up...

    I know the header probably isn't what you want it to look like - but I couldn't figure out what you wanted from the example so I went with a flat padding. Is the picture to the right supposed to ride down into the content, or is it supposed to stay up above? Both are possible just by changing the height of the header and applying a negative margin.

    I kept the EM width declarations and font sizes where possible - not my style and my initial 'gut' was to change it all to a pt/px mix, but I was able to retain it, so it will resize in IE 6.x just fine... That's a real headache though, I could probably shave another k or so off the CSS just by switching that out. Mostly I kept it on width so that it will dynamically resize in IE/Opera to '120dpi' even if gecko browsers ignore that... at 48em that should work out to 768px on small font machines, and 960px wide on large font boxes.

    The HTML doesn't see too much reduction from yours, though I cleaned up the formatting a little. You'll notice I added some SPAN's - which position themselves via z-index to hide them - this has the advantage that if the user turns off images they'll still get the text much like alt text would work - IN FACT the result generally looks better than alt-text.

    CSS got the most reduction, being 3-4k smaller than yours.

    ... and as always it validates XHTML 1.0 Strict, and displays identical in both large/small fonts in IE 6&7, FF, Opera and Safari. No guarantees what IE 5.x thinks of it though.

    Get me a picture of what the header SHOULD look like, and I can tweak it further.

  13. #13
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    deathshadow, thanks thanks thanks. this'll get me back on the right track. want to try to parse the rest of this myself for learning purposes. although i may be back whining again tomorrow! best,
    alex

  14. #14
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    at 48em that should work out to 768px on small font machines, and 960px wide on large font boxes.
    Or not... just switched over to the laptop and the layout is broken there in Opera, but not in IE or FF... and it's the small fonts making that 48em too small.

    THIS is why I don't use EM or fixed layouts.


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
  •