Anything Slider

[maskedwallaby]

I have an Anything Slider implemented into my website that works fine in all browsers except Internet Explorer. I’ve discovered that in all versions of IE, the slider fails to import my slider themes. I’m using the base Javascript provided in the latest version of the Anything Slider, so I’m not sure why IE has a problem importing the css.

As far as I can tell, these are the relevant portions of the slider files I’m using.

Here’s my call within the HTML document; “plugins” contains the base Javascript for the Anything Slider, while “script” contains my customized instructions:

Here’s the relevant portions of the “plugins” Javascript file that have to do with themes:

// Add theme stylesheet, if it isn't already loaded

if (base.options.theme !== 'default' && !$('link[href*=' + base.options.theme + ']').length){

		$('body').append('');

}

$.anythingSlider.defaults = {

// Appearance

width               : null,      // Override the default CSS width

height              : null,      // Override the default CSS height

resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport

expand				: false,

tooltipClass        : 'tooltip', // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

theme               : 'default', // Theme name

themeDirectory      : 'css/theme-{themeName}.css', // Theme directory & filename {themeName} is replaced by the theme value above

And then my separate “script” file, with custom instructions:

$(document).ready(function(){



$('#slider1')

.anythingSlider({

width          : 700,

height         : 334,

startStopped   : false,

toggleControls : false,

theme          : 'nivo',

})



$('#slider2')

.anythingSlider({

width               : 300,

height              : 320,

startStopped        : true,

resizeContent      : false,

toggleControls		: false,

expand				: false,

startPanel			: 1,

theme				:'news',

})



});

Firefox and Webkit browsers have no trouble finding these theme files, so why does IE? I suppose I could try to place the theme css within my regular css file and just add “#slider1” or “#slider2” to all the relevant rules… what do you guys think?

[Mottie]

Hi maskedwallaby!

Remove the trailing commas and IE will start working – specifically the comma at the end of the “theme” line in both code examples.

[maskedwallaby]

Thanks for the suggestion, Mottie! Unfortunately, removing the commas did not fix my problem; the theme files still wouldn’t show up.

For the nonce, I’ve created an alternate main stylesheet where I just tossed in the theme CSS rules into the main stylesheet, rather than keeping them as separate files. All the browsers (including IE) seem okay with that, so I’ll continue on in this fashion for the time being. I’m still flabbergasted as to why IE can’t interpret the Javascript’s instructions for where the theme files are. Any other ideas?

[Mottie]

You could just include all of the theme css in the main stylesheet, then you don’t need to worry about IE loading it. I’m guessing that you’ve already made sure that the theme name matches the css definitions (i.e. You are using div.anythingSlider-nivo .anythingWindow {} in the css for the nivo theme, etc.).

If you still can’t get it working, then please share a link to your site so I can get a better idea of the problem.

[maskedwallaby]

I have a test site up at stdfwd.tsts.com. Everything’s looking good now on the normal browser end (IE8, Firefox, Webkit, Opera), and I’m still using my solution which was to move the theme styles into the main stylesheet. But I’ve come up against another problem:

The dreaded Internet Explorer 6/7 z-index bug!

I have a drop-down menu which is appearing underneath my main slider. I’ve solved it in the normal fashion, giving the containing element a higher z-index. I’ve noticed that this works, at least for the split-second until the Anything Slider loads. Then the menu is underneath again. Somewhere, my CSS is giving the slides a higher Z-index value, but I’m not sure where, or if it’s the Javascript’s fault somehow. I’ve tried giving the #feature box a higher z-index to no avail, so I’ll try some of the other divs and see what happens. Of course, if you see something I’m not seeing, I’d appreciate a whack on the head to point me in the right direction! I’m like a donkey in that aspect though, you have to hit me on the opposite side of where you want me to go. I run from danger.

[Mottie]

Try this plugin: http://docs.jquery.com/Plugins/bgiframe

[maskedwallaby]

Haha, thanks for the resource! Unfortunately I just fixed it 10 minutes ago… went to the top level divs, gave them some crazy high/low z-indexes, and IE is happy again.

Now my only remaining issue is with IE7… the “forward” arrow on the right side of the main slider won’t appear. I’m diving through to see if I can at least make it stand out, but according to IE developer tools, it doesn’t even appear to be rendering.

[maskedwallaby]

Nevermind, I at least found the arrow. Time to position! Thanks for your help, Mottie.

[Author]

Posts