New to JQ but not JS: Why does this work in every browser EXCEPT IE??
Hi,
I have a simple effect on a list where I display a div when the user hovers over a list item. Here's my JQ:
- $(document).ready(function() {
var switches = $('#switches > li');
var slides = $('#insideCenter > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
Pertinate CSS:
- #centerMain ul li a.active {background-position:0 -25px;}
#insideCenter div.active {display: block;}
#item1 {display:none; margin:12px 50px 0px 15px;}
#item2 {display:none; margin:12px 30px 0px 15px;}
#item3 {display:none; margin:12px 30px 0px 15px;}
And markup snippet:
- <ul id="switches">
<li class="tools"><a name="item1" href="#item1" class="item1 active">Item 1</a></li>
<li class="tools"><a name="item2" href="#item2" class="item2">Item 2</a></li>
<li class="tools"><a name="item3" href="#item3" class="item3">Item 3</a></li>
</ul>
<div id="insideCenter">
<div id="item1" class="active"><p>Lorem ipsum dolor sit amet</p></div>
<div id="item2"><p>Lorem ipsum dolor sit amet</p></div>
<div id="item3"><p>Lorem ipsum dolor sit amet</div>
</div>
The effects work perfectly in FF, Safi, and Chrome, but not in IE 7-9! It you want to see the code in action, checkout my
company's website.
This is my first foray into JQuery but I have lots of vanilla JS experience (although not for a couple of years now -- I'm out of shape). I am at a loss; I thought that one of the benefits of frameworks like JQuery is that it addresses much of the cross-browser issues!
Any help is greatly appreciated.
Thanks,
Vin