CODEWITHSUNDEEP
javascriptjqueryinternet-explorerslide
islane
islane

Reputation: 93

IE8/9 slide show visibility issues..?

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]-->

Upvotes: 1

Views: 837

Answers (1)

ajp15243
ajp15243

Reputation: 7950

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.

Upvotes: 1

Related Questions