ie8 issue with navigation
holodude opened this issue · 24 comments
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.
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.
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.
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?
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.
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.
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>
Also look at the demo, I had to set the theme option to shiny... maybe that's it?
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/
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.
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/
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.
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.
I'm using IE9. Can you inspect it and see if the class is being updated?
Which particular class am I looking for, and how do I check to see if it is being updated?
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 =(
Hmm... so I tested it quickly on my home PC and it appears that IE9 emulation mode (according to online articles) does not actually emulate properly (MS has stupidly patched these modes) so that since I have IE9 at home, even using firefox and ietab doesn't properly emulate IE8. So if a user has IE9 they can't test it on earlier browsers.
Here's a screenshot of what I see in IE8 vs in firefox (left is firefox, right is IE8). As far as I can tell the class is updating:
http://postimage.org/image/l2w52jiij/
Not sure what the differences between the two are (there seems to be some extra jquery related stuff in the IE8 one though).
I too have problems with this code on ie8 it affects my implementation on my site and also the same issues can be seen on the top example in metallic theme on your main demo page
im testing with an xp machine with ie8 - unfortunately ie8 still represents some 35% of our website vistors so this is not a trivial issue.
symptoms are random behavior of the hilighted slide marker ie not always changing to the correct hilighted bullet - and also clicking the bullets does not take you to the slide you are trying to reach.
moving the mouse in and out of hover over the bullets seems to make the correct bullet get hilighted sometimes.
iv e just hours and hours configuring the slider for my website and now ive found out its not working for a 1/3rd of my website vistors - any help would be greatly appreciated as I love this slider and couldnt bare the thought of changing to a less flexible one.
further observations... it seems to malfunction only when autoplay is on when its stopped the slides seem to work fine. - it only seems to affect the slides with the navigation bullets superimposed over the images - the themes with a separate navigation bar seem to work ok, the metallic theme on your demo page behaves exactly as the one on my site which was based on the metallic theme.
@roycruse & @holodude: Do me a favor and test out this version of AnythingSlider on IE8 - I still can't seem to duplicate the problem, so I changed a few things around to make it more straightforward. So, I'm hoping it fixes the problem.
If it does work, then I'll update the plugin core.
Thanks!
Hi Mottie
Unfortunately that doesnt seem to have made alot if any difference...
Im happy to do a screen share with our xp/ie8 box here if it would help you so you can see for yourself the strange behaviour.
I got some help and I think it should start working with this fix... basically change the text-indent:-9999px; applied to the span inside of the nav link to visibility:hidden;. If you guys can verify this, I'll update the plugin with it :P
Hi Mottie
Thankou for the update.
I Wasnt sure if you wanted me to replace text-indent:-9999px; with visibility:hidden; or add visibility:hidden; in addition to text-indent:-9999px;
Anyway - I tried both and there didnt seem to be any difference - this has definitely made a huge improvement as the slide selection links now work on ie8 for selecting slides.
However there still exists a problem on ie8 where the correct bullet does not get hilighted this seems to affect the the bullets in both auto play mode and when clicked manually.
The correct bullet only gets selected if you move the mouse around the screen - it seems to be when you move the mouse over any < a > elements (it doesnt even have to be ones within the slider)
If you click a bullet to move to a slide and quickly (before the slide animation has finished) move the mouse to an empty part of the page and just leave it - the bullets do not change (even when the slider starts to autoplay again) if however i move the mouse around the screen the hilighted bullet updates to the correct one.
Thankyou for your efforts so far as this issue is now only a minor one where as before when the navigation through the slides was broken it was much more serious.
I meant to remove the text-indent completely and add the visibility: hidden... I found out that if you completely remove the float:l left, the navigation works as expected, so it's something to do with the css and IE8. I have a feeling others have encountered this issue before, but I can't seem to find any information or work around on it.
Ok, hopefully I've fixed the issue. Try out the latest version 1.7.20.
I'm guessing this issue has been resolved. Please feel free to reopen it if you continue to have problems.