treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Anything slider - need help please to make it work in IE

  • Just created a site using ProLoser Anything Slider. It looks great in Firefox and Safari but not IE.

    If you could take a look at the code we would really appreciate some help

    http://http://whytooccupy.org/test/2.html
  • Hi Michelle!

    The problem is that IE hates trailing commas. I pasted the code below with the trailing comma after the "onSlideComplete" closing curly bracket (I added a comment to the line below) - remove it and all should be well :)
    $('#slider2').anythingSlider({
    resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
    navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
    navigationFormatter : function(index, panel){ // Format navigation labels with text
    return ['1', '2', '3', '4', '5', '6', '7', '8', '9'][index - 1];
    },
    onSlideComplete: function(slider) {
    // keep the current navigation tab in view
    slider.navWindow( slider.currentPage );
    } // *** remove comma from this line! ***
    });

  • Thank you so much. This allowed the arrows to show up and the slider to function.
    One more question please?
    Some of the styling is missing - the transparency of the arrows and the navigation at the bottom is a little off. Where do I fix this?


  • If you mean IE6, then you'll need to apply the png fix.

    If you mean IE7, then I wonder if you've included the "anythingslider-ie.css" stylesheet? It should be wrapped in a conditional comment, like this:
    	<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
    <![endif]-->
    IE8+ shouldn't have any problems, but if you are seeing something, they I would appreciate it if you shared an image or a link to your page so I can try and help fix the problem.
  • Hi Mottie,

    I tried the png fix you linked to and at first it worked in IE6 but there were two back buttons and then it made the buttons disappear altogether. That being said the functionality was still there - could click where the arrows were supposed to be and the panels would slide.
    Do you have any suggestions?

    thanks
  • Maybe the best solution would be to replace the png images with a gif or jpg in the ie stylesheet =/