ie8 issue with navigation

[holodude]

I'm using the current version of the anythingslider and I'm using the shiny theme. When I set the slider to run automatically through the slides it doesn't follow the slides (ie make the bullet for slide 2 highlighted for slide 2). This works fine in firefox and chrome, but not IE8. If you manually run through the slides, it works correctly on all browsers, highlighting the correct bullet in the navigation. If I hover the mouse over the slide (regardless of whether the pause on hover parameter is set to true or false) it updates to the correct slide. This behaviour exists whether I have only pictures, or combo of pictures and video in the slider. Because the videos are set to pause the slideshow, they update the slide to the correct bullet in the navigation when it arrives at the video.

[Mottie]

Hi Holodude!

By "bullet" do you mean navigation tab? So, this problem is only happening with IE8, is it also only the shiny theme? Could you please provide me with an example of the problem. Thanks.

[holodude]

Hi Mottie. Yes, I am referring to the circular lights in the navigation tab. I just tried with the default1 theme and it happens with it as well. It just doesn't seem to register that the slide has moved to the next one, until you move the mouse. I only have access to firefox, chrome and IE8, and IE8 is the only browser that has issues.

Essentially as soon as I load the page, there is a long pause and the slideshow then starts. If I don't move the mouse, even by the time it reaches the 4th image, the light in the navigation still is on the first circle, indicating it should be the first image.

I'm using it in conjunction with colorbox so my script is as follows:

$(function () {

  // Set up players
  // please use your own player file
  // ***********************


  var fp = 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf';
  flowplayer('a.flowplayer', fp, {
    clip: {
      onResume: function (clip) { $('#slider').data('AnythingSlider').startStop(false); },
      onFinish: function (clip) { $('#slider').data('AnythingSlider').startStop(true); },
      scaling: 'fit',
      autoBuffering: true,
      autoPlay: false

    },
    play:{opacity:0}
  });

  // Set up AnythingSlider
  $('#slider').anythingSlider({
    theme: "default1",
    height: 200,
    buildNavigation: true,
    delay: 5000,
    buildStartStop: true,
    hashTags: false,
    resizeContents: false,
    autoPlay: true,
    expand: false,
    startPanel: 1,
    infiniteSlides: true,
    onSlideComplete: function (slider) {
      //alert('Welcome to Slide #' + slider.currentPage);
    },



    // pause all videos when changing slides
    onSlideInit: function (e, slider) {
      if ($f) {
        $f("*").each(function () {
          if (this.isPlaying()) {
            this.pause();
          }
        });
      }
    },

    // Only play a paused video when a slide comes into view
    onSlideComplete: function (slider) {
      if ($f) {
        slider.$currentPage.find('.flowplayer').flowplayer().each(function () {
          if (this.isPaused()) {
            this.play();
          }
        });
      }
    },

    // *********** Video ***********
    // this DOES NOTHING because jwplayer is set up outside of AnythingSlider
    addWmodeToObject: "opaque",

    // return true if video is playing or false if not
    isVideoPlaying: function (slider) {
      var playing = false;
      if ($f) {
        slider.$currentPage.find('.flowplayer').flowplayer().each(function () {
          if (this.isPlaying()) {
            playing = true;
          }
        });
      }
      return playing;
    }
  })






  .find('.panel:not(.cloned) img') // ignore the cloned panels
  .attr('rel', 'group')           // add all slider images to a colorbox group
  .colorbox({
    Width: '95%',
    Height: '95%',
    scalePhotos: false,
    maxWidth: '95%',
    maxHeight: '95%',
    InnerWidth: '50%',
    InnerHeight: '50%',
    escKey: false,
    onComplete: function (clip) { $('#slider').data('AnythingSlider').startStop(false); },
    onClosed: function (clip) { $('#slider').data('AnythingSlider').startStop(true); },
    href: function () { return $(this).attr('src'); },
    title: function () { return $(this).attr('title') },
    rel: 'group',
    photo: 'true'
  })

  $('#slider').find('div[class*=caption]')
  .css({ position: 'absolute' })

  $('.flowplayer').colorbox({
    rel: 'group',
    onComplete: function (clip) { $('#slider').data('AnythingSlider').startStop(false); },
    onClosed: function (clip) { $('#slider').data('AnythingSlider').startStop(true); },
    scalePhotos: true,
    innerWidth: '565',
    innerHeight: '355',
    href: function () { return $(this).attr('link2'); },
    iframe: true
  })
});

The CSS file for the theme is as follows (I've done a bit of modifying in order to get it to work with different arrows than the theme calls for):

/*
    AnythingSlider v1.7+ themes
    Shiny theme
*/

/****************************
 SET DEFAULT DIMENSIONS HERE
 ****************************/
/* Change the ID to match your slider */
#slider {
    width: 550px;
    height: 298px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: hidden;
}

#slider li 
{
    width: 550px;
    height: 298px;
}

/* Opera width restriction */
.anythingBase {
    max-width: 32766px;
    background: transparent;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    /* override the #slider overflow above, once the class is added */
    overflow: visible !important;
    height: 300px;
}

#slider a.flowplayer {
    display:block;
    width: 485px;
    height: 252px;
    padding: 0 0px 0 0px;
    z-index: -1;
    }

/*************
 ACTIVE STATE (slider has keyboard focus)
 *************/
/* slider window - top & bottom borders, active state */
div.anythingSlider-shiny.activeSlider .anythingWindow {
    border-color: #999;
}
div.anythingSlider-shiny.activeSlider .back a {
    background-position: left top;
}
div.anythingSlider-shiny.activeSlider .forward a {
    background-position: right top;
}
div.anythingSlider-shiny .back a:hover,
div.anythingSlider-shiny .back a.hover,
div.anythingSlider-shiny.activeSlider .back a:hover,
div.anythingSlider-shiny.activeSlider .back a.hover {
    background-position: left -112px;
}
div.anythingSlider-shiny .forward a:hover,
div.anythingSlider-shiny .forward a.hover,
div.anythingSlider-shiny.activeSlider .forward a:hover,
div.anythingSlider-shiny.activeSlider .forward a.hover {
    background-position: right -112px;
}
/*****************
 DEFAULT STATE (no keyboard focus)
 *****************/
/* Overall Wrapper */
div.anythingSlider-shiny {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0 0px; /* adjust left/right padding here to move arrows towards or away from the center */
}

/* Panels/Slides */
.anythingBase .panel {
    background: transparent;
    display: block;
    overflow: hidden;
    float: left;
    margin: 0;
    padding: 0;
}
/* Vertical panels */
.anythingBase .panel.vertical {
    float: none;
}

/* Slider window - top & bottom borders, default state */
div.anythingSlider-shiny .anythingWindow {
    border: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

}

/* Insert new arrows for navigation - stolen from metallic theme/*

* Navigation Arrows */
div.anythingSlider-shiny .arrow {
    top: 50%;
    position: absolute;
    display: block;
    z-index: 100;

}
div.anythingSlider-shiny .arrow a {
    display: block;
    height: 112px;
    margin-top: -47px; /* half height of image */
    width: 45px;
    outline: 0;
    background: url(../images/shiny-2.png) no-repeat;
    opacity: 0.50;
    filter: alpha(opacity=50);
    }

div.anythingSlider-shiny .forward { right: 0; }
div.anythingSlider-shiny .back { left: 27; }
div.anythingSlider-shiny .forward a { background-position: right bottom; }
div.anythingSlider-shiny .back a { background-position: left bottom; }
div.anythingSlider-shiny .forward a:hover, div.anythingSlider-shiny .forward a.hover { background-position: right top; }
div.anythingSlider-shiny .back a:hover, div.anythingSlider-shiny .back a.hover { background-position: left top; opacity: 0.50; filter: alpha(opacity=50); }


/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
div.anythingSlider-shiny .back.disabled,
div.anythingSlider-shiny .forward.disabled {
    display: none;
}

/* Navigation tabs - Slider control block */
div.anythingSlider-shiny .anythingControls {
    outline: 0;
    float: right;
    position: absolute;
    bottom: 5px;
    right: 55px;
    z-index: 100;
    opacity: 0.90;
    filter: alpha(opacity=90);

}
/* control list */
div.anythingSlider-shiny .anythingControls ul {
    float: left;
    margin: 0;
    padding: 0;
    z-index: 100;
}
/* control tabs */
div.anythingSlider-shiny .anythingControls ul li {
    display: block;
    float: left;
}
/* control links */
div.anythingSlider-shiny .anythingControls ul a {
    display: block;
    background: transparent url(../images/shiny.png) no-repeat -1px -167px; /* default tab, active/inactive slider */
    text-decoration: none;
    width: 14px;
    height: 14px;
    margin: 0 1px;
    padding: 0;
    outline: 0;
}
/* control nav window (navigationSize = true) */
div.anythingSlider-shiny .anythingControls .anythingNavWindow {
    overflow: hidden;
    float: left;
}
div.anythingSlider-shiny .anythingControls ul a.hover,
div.anythingSlider-shiny .anythingControls ul a:hover {
    background-position: -14px -167px;
}
div.anythingSlider-shiny .anythingControls ul a.cur {
    background-position: -27px -167px;
}
div.anythingSlider-shiny .anythingControls ul a.cur:hover {
    background-position: -40px -167px;
}

/* Start/stop button - stopped */
div.anythingSlider-shiny .start-stop {
    background: transparent url(../images/shiny.png) no-repeat -53px -167px;
    color: #ddd;
    width: 14px;
    height: 14px;
    padding: 0;
    float: right;
    z-index: 100;
    outline: 0;
    margin: 0 0 0 3px;
}
/* Start/stop button - stopped */
div.anythingSlider-shiny .start-stop:hover,
div.anythingSlider-shiny .start-stop.hover {
    background-position: -66px -167px;
}
/* start/stop button - playing */
div.anythingSlider-shiny .start-stop.playing {
    background-position: -79px -167px;
}
div.anythingSlider-shiny .start-stop.playing:hover,
div.anythingSlider-shiny .start-stop.playing.hover {
    background-position: -92px -167px;
}

/* Navigation size window arrows */
div.anythingSlider-shiny .anythingControls li.next a span, div.anythingSlider-shiny .anythingControls li.prev a span {
    text-indent: 1px;
    padding: 6px 0 0 4px;
    font-size: 8px;
}
div.anythingSlider-shiny .anythingControls li.prev a, div.anythingSlider-shiny .anythingControls li.next a {
    color: #ddd;
}
div.anythingSlider-shiny .anythingControls li.next a:hover, div.anythingSlider-shiny .anythingControls li.prev a:hover {
    color: #000;
}

/***********************
  COMMON SLIDER STYLING
 ***********************/
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
div.anythingSlider-shiny .arrow a span, div.anythingSlider-shiny .anythingControls ul a span, div.anythingSlider-shiny .start-stop span {
    display: block;
    line-height: 1px; /* needed for IE7 */
    width: 0;
    text-indent: -9999px;
}

Do you need a working example or something? The work I'm doing is for a site that isn't published to the web yet so I don't have an easy mechanism to share the example. Let me know if you need anything else.

[Mottie]

Sorry, I should have linked to one of the Playground demos

Update: I added your code to this demo... it just needs to point to the images you are using.

I tested the shiny demo in IE8 and it seems to be fine. So maybe it's just a CSS problem?

[holodude]

OK, well if you look at the official demos of the themes, and choose ANY theme, and it will not work in IE8 on my machine: http://mottie.github.com/AnythingSlider-Themes/ It will slide, but it won't specify the correct slide it is on.

You need to make sure to keep the mouse completely still once you hit the 'start' button, and away from the slider. I'm using IE 8.0.6001.18702 by the way.

I'm not sure what is going on with the playground demo, since I've been able to make it work fine (although the video doesn't show up correctly so I took it out). (http://jsfiddle.net/VM8XG/3344/) I can't understand how it would work fine in that demo, but not in reality.

[Mottie]

It works for me... but maybe the difference I'm seeing is that I'm running IE9 in IE8 compatibility mode. Are you including the original "anythingslider.css" file? If you are, then remove it and try to see if that is the problem... oh and remove the "anythingslide-ie.css" file as well, to see if that makes a difference.

[holodude]

The only CSS file I'm using (other than the two for the colorbox capabilities) is the CSS specifically for the shiny theme. Here is a listing of the files that are included, in the order they are listed:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">        window.jQuery || document.write('<script type="text/javascript" src="js/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="anythingSlider/js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<link rel="stylesheet" href="anythingSlider/css/theme-shiny-Project.css" media="screen" />
<script type="text/javascript" src="anythingSlider/js/jquery.anythingslider.js"></script>
<script type="text/javascript" src="anythingSlider/js/jquery.anythingslider.video.js"></script>
<script type="text/javascript" src="anythingSlider/js/flowplayer-3.2.6.min.js"></script>
<script type="text/javascript" src="anythingSlider/js/jquery.anythingslider.fx.js"></script>
<!--For ColorBox!-->
 <link rel="stylesheet" href="anythingSlider/css-color/colorbox.css" />
<script type="text/javascript" src="anythingSlider/js/jquery.colorbox-min.js"></script>

[Mottie]

Also look at the demo, I had to set the theme option to shiny... maybe that's it?

[holodude]

I don't think that is it. In order to get the shiny theme to show up on the demo at http://mottie.github.com/AnythingSlider-Themes/ you need to specify it from the dropdown. I've uploaded a different demo which uses the div statements to center images and includes the use of comments at http://jsfiddle.net/8KP2D/3/ but it still works fine in the demo on all browsers, albeit more jerky than I'd prefer (which is consistent with my use so far). My javascript code specifically is set for the shiny theme and I still have the issue in IE8. It is as if the playground demos use different scripts or load things differently than on my pages.

EDIT: OK, I did some more digging and noticed some weird behaviour. In IE7 my images are showing up very strangely, but the slider shows the correct slide when it rotates. Here's some pics to show when I run my IE8 in v8 mode vs in v7 mode:

version 7 mode (or version 8 mode with compatibility): http://postimage.org/image/v02h6syvr/
version 8 mode: http://postimage.org/image/wt5dv4k2f/

[Mottie]

Hmm, ok I'm not sure why the entire image is shifted over like that =/

But I did go back and look at all the themes in IE7 & 8. They all work, but the shiny theme is the only one that doesn't show the navigation arrows, in IE9 while in IE7 compatibility mode. I know the issue with that is the use of negative margins to position the arrow, so I can fix that. But, I'm really not sure what's going on with the issue you are having in those older browser versions, because I can't effectively test for the problem without having an actual IE version 7 or 8.

I hate to say it but maybe you'll have to build the theme starting from the plugin default theme.

[holodude]

Hmm... the navigation arrows aren't an issue, it is the indication of which slide I'm on that is currently the issue. Anyways I did some more testing and I noticed the following when I tested using firefox and ie tab 2, AND using the default template at http://mottie.github.com/AnythingSlider-Themes/ :

In ie7 standards mode, the demo at http://mottie.github.com/AnythingSlider-Themes/ works perfectly
in ie8 standards mode, ie8 forced standards mode, ie9 standards mode, and ie9 forced standards mode, the issue exists.

To show you what I mean, here are a couple of screenshots. Notice how they are different images but both say image 1:
http://postimage.org/image/uyravtvrr/
http://postimage.org/image/t3qk8nl29/

[Mottie]

LOL wow... the odd thing is that neither of your screenshots are of the actual first slide. The top one is slide 3 and the bottom one is slide 2. I just tested this again in my IE9 compatibility mode, in case I just missed it, and only the proper first slide is showing. I'm sorry, I can't duplicate this problem, so I don't know how to fix it.

[holodude]

What browser you using with IE9 compatibility? Firefox? I realize the screenshots weren't the first slide. The first slide shows properly, and slides to the 2nd and third when I hit start (which I screenshoted), so I was trying to show that the slider works, but it constantly shows it as slide 1 until I move the mouse around. Weird how you don't seem to be able to duplicate the problem.

[Mottie]

I'm using IE9. Can you inspect it and see if the class is being updated?

[holodude]

Which particular class am I looking for, and how do I check to see if it is being updated?

[Mottie]

The class is "cur". It is added to the nav button when its associated panel is current. I was hoping the problem was just the css was being overridden or something. I'm really at a loss here =(