PDA

View Full Version : Background Image Carousel - IE Issue



Frank Haggerty
03-11-2012, 10:44 PM
1) Script Title: :: Background Image Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

3) Describe problem: The script is running fine in Firefox, Chrome and Safarai, but not IE 8 or 9. The loader is showing in IE, but the carousel never starts. I am an amatuer at this so I am not sure if there is something conflicting with what is already built into the page. Here is the link: http://www.jeffcooper.com/index.html

jscheuer1
03-12-2012, 02:23 AM
Two problems.


The page is using an outdated version of the script. Go back to the demo page and get the most recent version. It's a drop in replacement.


There's a syntax error in the on page code (get rid of that red comma in the highlighted line):


<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['feature/graphics/picarea1.jpg', '<a href="http://online.wsj.com/article/SB10001424052970204520204577249423718181572.html?mod=WSJ_LifeStyle_Lifestyle_6" target="_blank"><h2>The Wall Street Journal</h2>Click Here to View Article</a>'],
['feature/graphics/picarea2.jpg', '<h2>Technicolor Headquarters</h2>Core & Shell Design</br>Hollywood, CA'],
['feature/graphics/picarea2a.jpg', '<h2>Technicolor Headquarters</h2>Core & Shell Design</br>Hollywood, CA'],
['feature/graphics/picarea3.jpg', '<h2>Viewpoint School</h2>Calabasas, CA.'],
['feature/graphics/picarea4.jpg', '<h2>Television Academy Theatre</h2>North Hollywood, CA'],
['feature/graphics/picarea5.jpg', '<h2>BluWave</h2>NBC Universal<br>Universal City, CA'], //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:6000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['feature/graphics/left.gif', 'feature/graphics/right.gif', 'feature/graphics/up.gif', 'feature/graphics/down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})

</script>


As a side note, the page is in quirks mode (no standards invoking DOCTYPE). This may or may not contribute to other problems. As an example, if the page were in standards mode IE 9 would have no problem with the Carousel script. But IE 8 and less still need the updated script and proper syntax as outlined above regardless of the mode of the page. But using a standards invoking DOCTYPE would require that the page be rewritten. Otherwise the layout would be changed almost beyond recognition in at least some browsers.

Frank Haggerty
03-12-2012, 03:05 PM
Works great now. Thanks!