JavaScript slideshow not working on ie

alebarvo · 05-16-2012, 08:45 PM

Hello guys and gals

,

I am using one of the JavaScript codes provided at http://www.javascriptkit.com, and it works great on Chrome and Firefox. But Internet Explorer is giving me trouble

Here is the HTML:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Keywords go here" name="keywords" />
<meta content="Description goes here" name="description" />
<meta content="This website is coded and maintained by ***** " name="author" />
<meta content="@2004 ***** " name="copyright" />
<meta http-equiv="Content-Style-Type" content="text/css2" />
<title>Concepto MV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>

<!--Website coded and maintained by Alexandra barvo
Copyright @2011 w ww.alexandrabarvo.com -->
</head>
<body>
<div id="background"></div><!--Backgroung-->
<div id="wrapper">
<div id="nav">
<div id="logo">
<img src="images/logo.png"/>
</div><!--logo-->
<ul id="main_nav">
<li><a class="active" href="index.html">HOME</a></li>
<li>|</a></li>
<li><a href="about.html">OUR COMPANY</a></li>
<li>|</a></li>
<li><a href="services.html">SERVICES</a></li>
<li>|</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
<ul id="social">
<li><a href="http://www.twitter.com" target="blank"><img src="images/twitter.png" border="0"/></a></li>
<li><a href="http://www.flickr.com" target="blank"><img src="images/flickr.png" border="0"/></a></li>
<li><a href="http://www.facebook.com" target="blank"><img src="images/facebook.png" border="0"/></a></li>
</ul>
</div><!--nav-->
<div id="slideshow">
<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['images/render1.jpg', '', '']
ultimateshow[1]=['images/render2.jpg', '', '']
ultimateshow[2]=['images/render3.jpg', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="900px" //set to width of LARGEST image in your slideshow
var slideheight="400px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>
</div><!--slideshow-->
<div class="push"></div><!--push-->
</div><!--wrapper-->
<div class="footer">
<p id="copy">Copyright &copy; 2012</p>
</div><!--footer-->
</div><!--body-->
</body>
</html>

And here is the CSS

Code:

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	background:url(../images/bg.jpg) repeat;
	padding: 0px;
	font: 12px 'Comfortaa', Helvetica, sans-serif;
	color: #CCC;
}

#wrapper{
	margin:0 auto 75px auto;
	width:960px;
	min-height: 100%;
	height:auto !important;
	height:100%;
}

#background{
	background:url(../images/nav_bg.png) repeat-x;
	position:absolute;
	left:0;
	top:35px;
	width:100%;
	height:100%;
	z-index:-1;
}

#website{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:99;
}

#nav{
	/*background: url(../images/nav_bg.png) repeat-x;*/
	width: 100%;
	height: 75px;
	margin-top: 35px;
	margin-bottom: 75px;
}

#logo{
	margin-left:40px;
	float:left;
}

#main_nav{
	margin-left: 22px;
}

ul#main_nav{
	list-style:none;
	float:left;
	margin-top: 38px;
}

ul#main_nav li{
	display:inline;
	padding-left:7px;
	font-size:14px;

}

ul#main_nav a{
	text-decoration:none;
	color:#ccc;
}

ul#main_nav a:hover{
	text-decoration:none;
	color:#666;
}

ul#social{
	list-style:none;
	float:left;
	margin-top: 34px;
	margin-left: 22px;
}

ul#social li{
	display:inline;
	padding-left:10px;
	font-size:18px;
}

ul#social a{
	text-decoration:none;
	color:#ccc;
}

ul#social a:hover{
	text-decoration:none;
	color:#666;
}

#slideshow{
	width:900px;
	height:400px;
	border:#101010 solid 5px;
	padding: 0px;
	margin: 0px auto;
}

.footer{
	text-align:center;
	background-color: #000; 
	padding: 37px 0px 0px 0px;
	margin:0px;
	width:100%;
	background:url(../images/nav_bg.png) repeat-x;
}

.footer, .push{
	height: 75px;
}

Can anyone tell me of I am doing something wrong, or if I just need to use another code for the slideshow to work on ie?

Thank you so much for you time.
Ale

EpicWebDesign · 05-16-2012, 10:53 PM

Are you sure you have the right paths to the CSS and image files? It runs just fine for me on IE (I just created 3 sample colored images for testing the slideshow) but you can see it working here on my server: http://epicwebdesignsolutions.com/cl...lideshow2.html

Note: the only thing I changed was the to rename the CSS file as style2.css and moved it to the same directory as the actual page so I didn't have to create another css subdirectory on my my server and/or over-write the existing style.css file I already had.

Magic Toolbox · 05-17-2012, 11:25 AM

It'll save you time if you choose a slideshow that already works in all major browsers + iPhone, Android etc.

For example, Magic Slideshow.

The JavaScript slideshow you are currently using keeps the images within the JS script whereas ideally the images should be separated from the script because they form part of the content of your web page.

alebarvo · 05-29-2012, 02:58 PM

Thank you for your help guys!!!

IT WORKS NOW!

TonyaDesigns · 09-28-2012, 10:03 PM

How did you fix your slide show?

Can someone please take a look at my
post about having a problem with my
javascript slide not show showing up in IE?
Thank you so much.

My post is located here.