IE8/9 slide show visibility issues..?

Question

js and jquery newb here, I've got an issue with my slideshow on the homepage of http://www.irvins.com:8080 - I've got it working in IE10/Firefox/Webkit but IE8 and IE9 still won't play ball with my script. IE8 won't display the initial slide, and won't animate (so you get just a blank space with the various slides all marked "display: none". IE9 picks up the first slide but again doesn't animate. Here's the script I'm using jquery 1.8.1 (min) and the following script:

components.directive('uiSlideshow', function () {
    return {
        restrict: 'EAC',
        link: function(scope, elm, attr, ctrl) {
            console.log(elm);
            elm.children('.slide').first().addClass('active');
            setInterval(function() { 
                elm.children('.slide')
                    .first()
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo(elm);
            },  5000);
        }
    }
});

The slides (from Chrome - IE8 has all slides as "display: none;"):

<section class="feature ui-slideshow"> 
    <figure class="slide" style="display: block;">
        <a href="/search_results.asp?category=25&amp;top_category_id=25">
            <img src="public/images/ss-lighting-0213.jpg" alt="Country Style Lighting" border="0">
        </a>
    </figure>
    <figure class="slide" style="display: none;">
        <a href="/search_results.asp?category=70&amp;top_category_id=70">
            <img src="public/images/ss-tinware-0213.jpg" alt="Tinware" border="0">
        </a>
    </figure>
    <figure class="slide" style="display: none;">
        <a href="/search_results.asp?category=55&amp;top_category_id=55">
            <img src="public/images/ss-furniture-0213.jpg" alt="Upholstered Furniture" border="0">
        </a>
    </figure>
    <figure class="slide active" style="display: none;">
        <a href="/search_results.asp?category=60&amp;top_category_id=60">
            <img src="public/images/ss-bedding-0213.jpg" alt="Milsboro Quilted Bedding" border="0">
        </a>
    </figure>
</section>

Anything obvious that I'm overlooking? Something specific I'm using that old IE can't comprehend?

----------------------- Update -----------------------

Thanks to ajp15243 for the suggested IE9 fix

I realize now that I had two entirely different problems, a console variable issue (solved, see comments below) and something else that is stopping IE8 from displaying anything, I'm thinking this must be another piece of my 'directives.js' code?

IE9 slides now animating after using the following addition at the beginning of my js file for the slider:

/**
 * Protect window.console method calls, e.g. console is not defined on IE
 * unless dev tools are open, and IE doesn't define console.debug
 */
(function() {
  if (!window.console) {
    window.console = {};
  }
  // union of Chrome, FF, IE, and Safari console methods
  var m = [
    "log", "info", "warn", "error", "debug", "trace", "dir", "group",
    "groupCollapsed", "groupEnd", "time", "timeEnd", "profile", "profileEnd",
    "dirxml", "assert", "count", "markTimeline", "timeStamp", "clear"
  ];
  // define undefined methods as noops to prevent errors
  for (var i = 0; i < m.length; i++) {
    if (!window.console[m[i]]) {
      window.console[m[i]] = function() {};
    }    
  } 
})();

----------------------- Update 2 -----------------------

Problems solved!

The second issue turned out to be related to angular.js, it required changing what I had been using for "html class...", see below:

<!--[if IE 8 ]><html lang="en" class="ng-app:Irvins" id="ng-app" ng-app="Irvins" xmlns:ng="http://angularjs.org"> <![endif]-->

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

Your code includes console.log(elm);. This will work in Firefox and Chrome, because those browsers have nicely defined the console variable. However, there are some quirks (to put it nicely) with it in IE, and your script is likely throwing an error on that line and not continuing in IE8/9. Look at this question for using it in IE8, and this question for IE9.

When you're ready to "go live" with the site, you should ideally remove all of your console logging, too.

edited May 23 '17 at 10:29

Community

1
1

answered Apr 26 '13 at 13:55

ajp15243

7,704
1
32
38

Thanks! You were correct about the console - it seems that the 'F12'/developer toolbar has to be open in IE8/9 for console variable to work (bizarre...) IE9 is now working as intended, however IE8 is still showing nothing, all slides are "display: none;". Possibly a name I'm using somewhere is still tripping up the browser? – islane Apr 26 '13 at 15:35
1

"Bizarre" doesn't even begin to describe debugging/developer tools in IE8 :). – ajp15243 Apr 26 '13 at 15:36
Haha, I'd like to understand IE developers thoughts behind some of these "features", they had to have noticed things like this in beta *sigh* Sorry for the half comment above. Didn't have enough characters... I'll edit my original post to reflect the IE9 fix. – islane Apr 26 '13 at 15:40
I would first see if the IE8 developer tools console is spitting out an error anywhere. Remember to click "Start Debugging"! – ajp15243 Apr 26 '13 at 15:44
1

**After much frustration, got it all solved!** See edit above - turns out that the primary issue was caused by angular.js I hadn't realized that IE8 was handling "html class="ng-app"... differently. The solution was: `` More info on this IE8 angular.js quirk at this link: http://stackoverflow.com/questions/13184063/why-does-ng-class-ng-app-break-angularjs – islane Apr 26 '13 at 17:02

IE8/9 slide show visibility issues..?

1 Answers1