CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
JacobTheDev
JacobTheDev

Reputation: 18520

DIV Not Being Generated in IE7 with jQuery

I can't figure out why this script isn't working in IE7 and 8. It works fine in all other browsers, but for some reason, in IE7 and 8 this script is only firing the // thumbs hover bit, and not the // loading images bit (which is actually more important). Everything seems to be fine, does anyone have any ideas?

     function featuredJS() {

        $("[title]").attr("title", function(i, title) {
            $(this).data("title", title).removeAttr("title");
        });

        // loading images

        var last = "featured/01.jpg";

        $("#thumbs a").click(function(event) {
            event.preventDefault();
            var position = $(this).attr("class");
            var graphic = $(this).attr("href");
            var title = $(this).attr("alt");
            var description = $(this).data("title");
            var currentMargin = $("#full-wrapper #full").css("marginLeft");
            var currentWidth = $("#full-wrapper #full").css("width");
            var transitionTest = currentMargin.replace("px", "") * 1;
            if(last != graphic && ((transitionTest % 938) == 0 || transitionTest == 0)) {
                $("#placeholder").before( "<div class='featured'><div class='description " + position + "'>" + "<h3>" + title + "</h3>" + "<p>" + description + "</p>" + "</div><img src=\"" + graphic + "\" /><div style='clear:both;'></div></div>" );

                $("#full-wrapper #full").animate({
                    marginLeft: "-=938px"
                }, 500);

                $("#full-wrapper #full").css("width","+=938px");
                last = graphic;
            };
        });

        // thumbs hover

        $("#thumbs .thumb").hover(
            function () {
                $(this).find(".red-bar").animate({height:"72px"},{queue:false,duration:500});
            },
            function () {
                $(this).find(".red-bar").animate({height:"3px"},{queue:false,duration:500});
            }
        );

    };

Demo page at http://www.weblinxinc.com/beta/welex/demo/

Upvotes: 0

Views: 105

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

Your problem is caused by not having a margin set to begin with. transitionTest then becomes NaN because the style is auto, not 0px like you're expecting. Consider trying this instead:

var transitionTest = parseInt("0"+currentMargin,10);

This will trim off the "px" for you, as well as handle the case where the margin is a keyword.

Upvotes: 1

Related Questions