Home › Forums › JavaScript › Margin disappearing on slideToggle in IE
- This topic is empty.
-
AuthorPosts
-
March 29, 2011 at 12:30 am #32171soapParticipant
Howdy,
I need some help!
I have this:
$(document).ready(function() {
$(".toggle_container").hide();
$("h2.trigger").click(function() {
$(this).toggleClass("active").next().slideToggle(300);
return false;
});
});Applied to this:
Marketing Consulting
Expert marketing consulting to guide your way, troubleshoot and help you come up with sound strategy and marketing planning. As well as being included in many of our marketing packages, marketing consulting is offered separately in blocks of hours or on a project basis.
Marketing Analysis
We offer an analysis of your current marketing. This is an extensive evaluation of your marketing messaging and imagery, your print and Internet marketing, where applicable, your results and your markets.
with this CSS:
h2.trigger {
background:url(../images/service-nav-sprite.png) no-repeat scroll top left;
cursor:pointer;
display:block;
margin:10px 0 0 0; padding:0;
width:701px;height:41px;
}
.toggle_container {
background-image:url(../images/serv-content-bg.png);
background-repeat:repeat;
border:1px solid #dddddd;
padding:8px 10px;
}I’m looking at it in IE 8 and when you click one of the boxes, it expands but when you click it again to close it, it collapses but loses the top margin. It works fine in FF and Chrome.
Obviously it’s meant to retain the margin:10px 0 0 0; declared in h2.trigger {}
Don’t know why… Here is a link to the problem: http://websitesthatmarket.com/tpo/test/
March 29, 2011 at 10:43 am #53304soapParticipantI hope this post doesn’t get lost in oblivion!
March 29, 2011 at 9:57 pm #53208soapParticipantwell i guess this one is too hard for jamy_za and TheDoc :)
March 29, 2011 at 11:26 pm #53183TheDocMemberhaha sorry, Soap – I am no JQuery expert. But here’s an extra little bump for you!
Also, you can always grab Jamy’s attention by putting his name like this: @jamy_za – hi Jamy!
March 30, 2011 at 12:26 am #53186soapParticipantI looked around the web and apparently this is an IE8 bug and people say they’ve fixed it with overflow:hidden but this didn’t work for me..
March 30, 2011 at 3:11 am #53177jamygoldenMemberHi Gray =)
@soap, IE has problems every so often, instead of trying figure out exactly why something is happening, sometimes it’s best just to change the way you’re doing it.Try this kind of markup:
Marketing Consulting
Expert marketing consulting to guide your way, troubleshoot and help you come up with sound strategy and marketing planning. As well as being included in many of our marketing packages, marketing consulting is offered separately in blocks of hours or on a project basis.
Marketing Analysis
We offer an analysis of your current marketing. This is an extensive evaluation of your marketing messaging and imagery, your print and Internet marketing, where applicable, your results and your markets.
$(document).ready(function() {
$("#toggle-containers li").css('height', '40px');
$("h2.trigger").click(function() {
if($(this).parent().hasClass("active")){
$(this).parent().removeClass("active").animate({height: '40px'});
}
else{
$(this).parent().toggleClass("active").animate({height: '100%'});
}
return false;
});
});I haven’t tested the js and it could be optimized, but you get what I mean.
And add the margin to the li’sMarch 30, 2011 at 10:42 am #53050soapParticipantI will give it a shot tonight and let you know how it goes. Thanks a lot! :)
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.