jQuery .each and .children not working in IE

Question

I'm making an Instagram image slider feed, and it's working fine in Chrome, Safari, Firefox and Opera, but it fails in all versions of IE. It doesn't even give me an error message, it just does nothing.

I needed to return the height of the images to the parent div to get the correct height for the background.

In IE the first image is loaded up and then nothing happens after that, it doesn't even return the height of the first image. I've searched around and think it might have something to do with .children() and .each() not working correctly in IE, but I'm not sure.

So is this the cause of a IE/jQuery compability issue? or is it something else? and is there an alternative way of doing this? (I have removed most of the Auth token for security purposes)

her is a jfiddle of the result: http://jsfiddle.net/5ACr9/embedded/result/

        (function($){
            $.fn.MySlider = function(interval) {
            var slides;
            var cnt;
            var amount;
            var j;

            function run() {
                // hiding previous image and showing next
                $(slides[j]).fadeOut(1000).removeClass("selected");
                j++;
                if (j >= amount) j = 0;
                $(slides[j]).fadeIn(1000).addClass("selected");
                // loop
                setTimeout(run, interval);
            }


            slides = $('#insta-slider').children();
            amount = slides.length;
            j=0;

            setTimeout(run, interval);
            };
        })(jQuery);

        // custom initialization
        jQuery(window).load(function() {
            $('.smart_gallery').MySlider(5000);
              //gets the height of the first image and returns it to parent
            $( "#insta-slider" ).each(function() {
                        var newHeight = 0, $this = $( this );
                    $.each( $this.children(), function() {
                        newHeight = $( this ).height();
                    });
                        $this.height( newHeight );
              });

            var tid = setTimeout(resize, 5000);

            function resize(){
                  //returns the height of each image after the first one
                  $( "#insta-slider" ).each(function() {
                            var newHeight2 = 0, $this = $( this );
                        $.each( $this.children(".selected"), function() {
                            newHeight2 = $( this ).height();
                        });
                            $this.height( newHeight2 );
                  });

              tid = setTimeout(resize, 5000);
           }

        });

Welcome to stackoverflow. While posting questions, try to show us only the relevant code and make a concise question. This question is really long and tiring. — Itay, Sep 19 '13 at 06:51
Rest assured `children` and `each` work just fine in IE. Some versions of IE produce different DOM structures given the same HTML than Chrome/Firefox. (eg: TBODY element for tables). — David-SkyMesh, Sep 19 '13 at 06:51
Could you write a much smaller version of your JavaScript that demonstrates the issue, and include representative HTML with your question? Perhaps host an example that demonstrates the bug on jsfiddle? — David-SkyMesh, Sep 19 '13 at 06:52
OK, you've got a jsfiddle, great! Now, what's it supposed to do? For me (Firefox 24, Linux 32bit) it just shows a single image. That image is a link to instagram, There are two links below with `0` as their text which also open instagram. Otherewise, it seems to do nothing. — David-SkyMesh, Sep 19 '13 at 07:20
it's supposed to be a image carousel, but like in IE it only shows the first image. it never changes to the next image — Gustyninja, Sep 19 '13 at 07:25
What is your IE version you used to test this? Always good to mention which version. — JofryHS, Sep 19 '13 at 10:21
It needs to support IE 9, 8 and 7. And I've tested it in those versions aswell. — Gustyninja, Sep 19 '13 at 11:52

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

Check your jquery version if it is gereater than 1.9 then it will not work in IE

As promised, this version leaves behind the older Internet Explorer 6, 7, and 8 browsers. In return it is smaller, faster, and can be used in JavaScript environments where the code needed for old-IE compatibility often causes problems of its own. But don’t worry, the jQuery team still supports the 1.x branch which does run on IE 6/7/8. You can (and should) continue to use jQuery 1.9 (and the upcoming 1.10) on web sites that need to accommodate older browsers.

Read jquery-2-0-released

Also check that you didn't use console.log() in your javascript code because it doesn't work in IE

You have use CDATA check that it is properly ends or read Should I use "]]>" or "//]]>" for closing a CDATA section into xHTML

edited May 23 '17 at 11:50

Community

1
1

answered Sep 19 '13 at 06:57

Rohan Kumar

40,431
11
76
106

jquery version is 1.9 and CDATA is properly closed, but still nothing. – Gustyninja Sep 19 '13 at 07:08
@Gustyninja In the fiddle I saw **JQMIGRATE: Logging is active** in **console** and I said in my `answer` that `console.log()` not works in **IE**, see the `migrate plugin` which you used. – Rohan Kumar Sep 19 '13 at 07:27
oh ok, I don't have console.log() in my code, does it turn on automatically? is there anyway to force it off? – Gustyninja Sep 19 '13 at 07:42
@Gustyninja This will help you http://stackoverflow.com/questions/3326650/console-is-undefined-error-for-internet-explorer – Rohan Kumar Sep 19 '13 at 07:51
Thank you, but unfortunately this did nothing. So I don't think the console is the problem. – Gustyninja Sep 19 '13 at 08:40
1

@RohanKumar To be exact, `console.log()` doesn't work when the console is not open in IE<10. This bug has been fixed in IE10+. – Teemu Sep 19 '13 at 09:56

jQuery .each and .children not working in IE

1 Answers1