www.webdeveloper.com
+ Reply to Thread
Results 1 to 2 of 2
  1. 02-17-2010 07:27 AM #1
    vouzamo
    vouzamo is offline Registered User
    Join Date
    Jun 2007
    Posts
    73

    Post Mouseover JQuery zIndex change not working in IE

    I have made a layout which includes some coloured tabs which make ajax calls to get content. These tabs are partially hidden and onmouseover the tab should move to the front. this works perfectly in Firefox, Chrome, Opera, and Safari, but not in IE. I get no javascript errors and the page validates on W3C Validator without error.

    The live page can be viewed here: http://www.vouzamo.co.uk/tyro

    Code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>We Are TYRO!</title>
		<style type="text/css">
			body
			{
				background: url('images/background.png') repeat center center fixed;
			}
			#logo
			{
				position: absolute;
				width: 200px;
				height: 108px;
				top: 10px;
				left: 50%;
				margin-left: -450px;
			}
			#navigation
			{
				position: absolute;
				width: 900px;
				top: 80px;
				left: 50%;
				margin-left: -450px;
			}
			#navigation img
			{
				position: absolute;
				z-index: 1;
				opacity: 50;
				cursor: pointer;
			}
			#outer
			{
				position: absolute;
				width: 900px;
				top: 125px;
				left: 50%;
				margin-left: -450px;
				background: #eee9d2 url('images/paper1.png') no-repeat top left;
				z-index: 2;
			}
			#inner
			{
				position: relative;
				width: 900px;
				min-height: 600px;
				background: url('images/paper2.png') no-repeat bottom left;
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
		<script type="text/javascript">
			var current_page = 0;
			function ajax(url,element)
			{
				$.get(url,function(data){
					$('#'+element).html(data);
				});
			}
		</script>
	</head>
	<body>
		<div id="logo">
			<img src="images/logo.png" alt="Tyro Logo">
		</div>
		<div id="navigation">
			<img style="margin-left: 440px;" src="images/link1.png" alt="The Band Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 1){$(this).css('zIndex','1');}" onclick="current_page = 1; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('the_band.asp','inner');">
			<img style="margin-left: 520px;" src="images/link2.png" alt="Music Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 2){$(this).css('zIndex','1');}" onclick="current_page = 2; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('music.asp','inner');">
			<img style="margin-left: 610px;" src="images/link3.png" alt="Photos Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 3){$(this).css('zIndex','1');}" onclick="current_page = 3; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('photos.asp','inner');">
			<img style="margin-left: 690px;" src="images/link4.png" alt="Video Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 4){$(this).css('zIndex','1');}" onclick="current_page = 4; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('video.asp','inner');">
			<img style="margin-left: 780px;" src="images/link5.png" alt="Events Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 5){$(this).css('zIndex','1');}" onclick="current_page = 5; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('events.asp','inner');">
		</div>
		<div id="outer">
			<div id="inner">
				content gets pulled into here
			</div>
		</div>
	</body>
</html>
    Reply With Quote Reply With Quote
  2. 02-17-2010 09:05 AM #2
    Gozzy82
    Gozzy82 is offline Registered User
    Join Date
    Feb 2010
    Location
    Amsterdam
    Posts
    174
    i played around with it a bit, it seems that the z-index of #navigation is blocking the image from beeing displayed.

    i added .parent().css('zIndex', '3'); to the first tab to illustrate it should work when you work around/fix the navigation z-index problem.

    http://www.webdevout.net/test?02P

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>We Are TYRO!</title>
<base href="http://www.vouzamo.co.uk/tyro/" />
		<style type="text/css">
			body
			{
				background: url('images/background.png') repeat center center fixed;
			}
			#logo
			{
				position: absolute;
				width: 200px;
				height: 108px;
				top: 10px;
				left: 50%;
				margin-left: -450px;
			}
			#navigation
			{
				position: absolute;
				width: 900px;
				top: 80px;
				left: 50%;
				margin-left: -450px;
                                z-index:2;
			}
			#navigation img
			{
				position: absolute;
				z-index: 1;
				opacity: 50;
				cursor: pointer;
			}
			#outer
			{
				position: absolute;
				width: 900px;
				top: 125px;
				left: 50%;
				margin-left: -450px;
				background: #eee9d2 url('images/paper1.png') no-repeat top left;
				z-index: 2;
			}
			#inner
			{
				position: relative;
				width: 900px;
				height: 600px;
                                z-index:1;
				background: url('images/paper2.png') no-repeat bottom left;
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
		<script type="text/javascript">
			var current_page = 0;
			function ajax(url,element)
			{/*
				$.get(url,function(data){
					$('#'+element).html(data);
				});
                         */
			}
		</script>
	</head>
	<body>
		<div id="logo">
			<img src="images/logo.png" alt="Tyro Logo">
		</div>
		<div id="navigation">
			<img style="margin-left: 440px;" src="images/link1.png" alt="The Band Tab" onmouseover="$(this).css('zIndex','3').parent().css('zIndex', '3');" onmouseout="if(current_page != 1){$(this).css('zIndex','1');}" onclick="current_page = 1; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('the_band.asp','inner');">
			<img style="margin-left: 520px;" src="images/link2.png" alt="Music Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 2){$(this).css('zIndex','1');}" onclick="current_page = 2; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('music.asp','inner');">
			<img style="margin-left: 610px;" src="images/link3.png" alt="Photos Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 3){$(this).css('zIndex','1');}" onclick="current_page = 3; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('photos.asp','inner');">
			<img style="margin-left: 690px;" src="images/link4.png" alt="Video Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 4){$(this).css('zIndex','1');}" onclick="current_page = 4; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('video.asp','inner');">
			<img style="margin-left: 780px;" src="images/link5.png" alt="Events Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 5){$(this).css('zIndex','1');}" onclick="current_page = 5; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('events.asp','inner');">
		</div>
		<div id="outer">
			<div id="inner">
				content gets pulled into here
			</div>
		</div>
	</body>
</html>
    so i know this is not an solution but it is a identification of the problem..
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

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

Forum Rules

 HTML5 Development Center



Recent Articles