Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Margin disappearing on slideToggle in IE

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #32171
    soap
    Participant

    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/

    #53304
    soap
    Participant

    I hope this post doesn’t get lost in oblivion!

    #53208
    soap
    Participant

    well i guess this one is too hard for jamy_za and TheDoc :)

    #53183
    TheDoc
    Member

    haha 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!

    #53186
    soap
    Participant

    I 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..

    #53177
    jamygolden
    Member

    Hi 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’s

    #53050
    soap
    Participant

    I will give it a shot tonight and let you know how it goes. Thanks a lot! :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.