Forums

buckycat7

I took the code from the MenuFader tutorial and changed a few things about so it would work in the way I needed it to. It now works great in any browser other then IE but doesn't work at all in IE.

Here is the Code I'm using:

CSS:


.menu{list-style: none;}
.menu li{float: left; padding-right: 2px;}
.menu li a{display:block; width: 120px; text-indent:-9999px;}
.menu li a.overview{background: url(images/overviewf.jpg) bottom center no-repeat;  height:30px; }
.menu li a.details{background: url(images/details.jpg) bottom center no-repeat;  height:30px; }

#content{width: 620px; height: 500px; border-top: 1px solid #666; padding: 1px;}

.buttonf {float: left; margin: 0; cursor: pointer; }

#one {display: block; opacity: 1}
#one-button {opacity: 1.0;}

#two {display: none; opacity: 1}
#two-button {opacity: 0.5;}

JQuery:


		jQuery(document).ready(function($){
											
			$(\"#page-wrap .buttonf\").click(function(){
				
				$clicked = $(this);
				
				if($clicked.css(\"opacity\") != \"1\" && $clicked.is(\":not(animated)\"))
				{
					$clicked.animate({
						opacity: 1,
						borderWidth: 4
					}, 600 );
		
					var idToLoad = $clicked.attr(\"id\").split('-');
					$(\"#content\").find(\"div:visible\").fadeOut(\"fast\", function(){
						$(this).parent().find(\"#\"+idToLoad[0]).fadeIn();
					})
				}

				$clicked.siblings().animate({
					opacity: 0.5,
					borderWidth: 1,
					
				}, 600 );
				
			});
		});

Note: I'm using the jQuery(document) so that it will work in wordpress.

HTML:


<div id=\"page-wrap\">


<ul class=\"menu\">
	<li id=\"one-button\" class=\"buttonf\"><a class=\"overview buttonf\" href=\"#\">Text</a></li>
	<li id=\"two-button\" class=\"buttonf\"><a class=\"details buttonf\" href=\"#\">Text</a></li>
</ul>
	
<div class=\"clear\"></div>

<div id=\"content\">
			
			<div id=\"one\">
				<p>This content is for one.</p>
			</div>
			
			<div id=\"two\">

				<p>This content is for two.</p>
			</div>
					
		</div>
	
</div>

Any ideas why this won't work in IE?

buckycat7

Thanks?

blackbookdesign

I got the same problem for IE with wordpress
see related post if any ideas can come up: http://www.css-tricks.com/forums/viewtopic.php?f=5&t=1521
cheers.

treehouse : what would you like to learn today?

Forums

JQuery in IE