Javascript slideshow shows twice in Internet Exporer

The slideshow this javascript renders works fine in Chrome and Safari but renders a double image (one on top of the other) in IE 10.0.5.

in the head:
<style>#trans { BORDER-TOP: #77f 0px solid; BORDER-RIGHT: #77f 0px solid; VERTICAL-ALIGN: top; BORDER-BOTTOM: #77f 0px solid; POSITION: relative; ZOOM: 1; BORDER-LEFT: #77f 0px solid; DISPLAY: inline; -moz-box-orient: vertical }
	#itop { CURSOR: pointer; POSITION: absolute; LEFT: 0px; Z-INDEX: 2; TOP: 0px }
		</style>

Open in new window


in the body, where the slideshow goes:
<div id="trans"><img id=ibom 
                              src="<%= Pic1 %>" width=791 height=410 
                              > <img onclick=gotoshow(); 
                              id=itop src="<%= Pic2 %>" width=791 height=410 
                              >
																			</div>
																			<script>/* <![CDATA[ */
// it seems best if this Javascript is Below the HTML for the Images
var see = 100, tImg = false, iBom=false, tID=0;
// I use the iNum (image number) for Array count
// because This has Two Images already in the Box to start, The iNum need to start at 2
var tRapid = 50, iNum = 2, slidespeed=5000;
var slidelinks = ["<%= URL1 %>","<%= URL2 %>","<%= URL3 %>","<%= URL4 %>","<%= URL5 %>"];
var slideimages = ["<%= Pic1 %>","<%= Pic2 %>","<%= Pic3 %>","<%= Pic4 %>","<%= Pic5 %>"];

// BELOW is a method for PRE-LOADING the Transition images
// there may be an Unwanted Initial Delay if you do Not Pre-Load the Images
var preImg = [];
for (var i = 0; i < slideimages.length; i++) {
  preImg[i] = new Image;
  preImg[i].src = slideimages[i];
  }
  
tImg= document.getElementById("itop");
iBom= document.getElementById("ibom");
var useO = 'opacity' in document.documentElement.style;

function dofade(){
see -= 6;
if (see < 10) {
    see = 100;
    tImg.src = iBom.src;
    if(useO) tImg.style.opacity = 1.0;
       else tImg.style.filter='alpha(opacity='+ 100 +')';
    iBom.src = slideimages[iNum];
    iNum++;
    if (iNum >= slideimages.length) {
	    iNum = 0;
	    }
tID=setTimeout("dofade();",slidespeed);
return;
}
tID=setTimeout("dofade();", tRapid);
if(useO) tImg.style.opacity = see/100;
	else tImg.style.filter='alpha(opacity='+ see +')';
}

tID=setTimeout("dofade();", slidespeed);// starts the slides with page load

function gotoshow(){
var cur = iNum-2; // has to go back by Two
if (cur == -1) cur = slidelinks.length-1;
if (cur == -2) cur = slidelinks.length-2;
window.location = slidelinks[cur];
}
/* ]]> */</script>

Open in new window

<style>#trans { BORDER-TOP: #77f 0px solid; BORDER-RIGHT: #77f 0px solid; VERTICAL-ALIGN: top; BORDER-BOTTOM: #77f 0px solid; POSITION: relative; ZOOM: 1; BORDER-LEFT: #77f 0px solid; DISPLAY: inline; -moz-box-orient: vertical }
	#itop { CURSOR: pointer; POSITION: absolute; LEFT: 0px; Z-INDEX: 2; TOP: 0px }
		</style>

Open in new window

JChrisMcNeilAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
Julian HansenConnect With a Mentor Commented:
The problem is you need to position your images absolutely in the trans div However your use of tables for this page is not ideal.

Using tables for layout is a bad idea - and for your website not at all necessary.

Changing at this point though I suspect is not on your todo list - but you may need to change the markup of the cells that contain the image

Remove the <td> elements around the cell with the images.

Make the <td> parent for the table vertical align top (use style="vertical-align: top" rather than the deprecated attribute valiagn). You will need to give #trans a width and a height and the row containing trans a height of 410px as well as a vertical-align top.

I managed to get this to work making modifications in firebug code attached if you can use it.

In future don't use ImageReady to slice your page - rather code it yourself properly - will save many hours of frustration trying to get layout issues sorted out.

#trans {
  -moz-box-orient: vertical;
  border-color: #7777FF;
  border-style: solid;
  border-width: 0;
  display: inline;
  height: 410px;
  margin-left: 10px;
  position: relative;
  vertical-align: top;
  width: 791px;
}

Open in new window

charleston-partial.html
0
 
Julian HansenCommented:
do you have a URL we can look at to replicate problem.
0
 
Jagadishwor DulalBraces MediaCommented:
As I was checking in FF it seems same as your IE: Now add the style in top after #itop style:

#ibom{display:none}

Open in new window

Means your style will look like

<style>#trans { BORDER-TOP: #77f 0px solid; BORDER-RIGHT: #77f 0px solid; VERTICAL-ALIGN: top; BORDER-BOTTOM: #77f 0px solid; POSITION: relative; ZOOM: 1; BORDER-LEFT: #77f 0px solid; DISPLAY: inline; -moz-box-orient: vertical }
#itop { CURSOR: pointer; POSITION: absolute; LEFT: 0px; Z-INDEX: 2; TOP: 0px }
#ibom{display:none}
		</style>

Open in new window

0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Now
 
JChrisMcNeilAuthor Commented:
jagadishdulal, adding the 

#ibom{display:none}

Open in new window


got rid of the duplicate slideshow, but changed the placement to the middle of the page instead of in the table where it belongs.

julianH, I set up a test page at


slideshow test page
0
 
JChrisMcNeilAuthor Commented:
julianH,


Unfortunately, it did not work, still getting doubling of images in IE but, with that changes, now also getting them in Chrome, in which it worked before

Thanks for the attempt
0
 
JChrisMcNeilAuthor Commented:
julianH,
 Got it working with some tweaks, thanks
C
0
 
JChrisMcNeilAuthor Commented:
Well, I spoke to soon. . . works in IE, Chrome, and Safari but still getting doubling of images in Firefox.

Any ideas on how to eliminate this?
0
 
Julian HansenCommented:
I don't think you followed my instructions though

First change your #trans style
#trans {
  border-color: #7777FF;
  border-style: solid;
  border-width: 0;
  height: 410px;
  margin-left: 10px;
  position: relative;
  vertical-align: top;
  width: 791px;
}

Open in new window

Next remove the <td>'s on either side of your images so it looks like this
<td colspan="3">
  <div id="trans">
    <img id="ibom" src="../Images/Gallery/Section-Home-Top-Pic_02.jpg" height="410" width="791" />
	<img style="opacity: 1;" onclick="gotoshow();" id="itop" src="http://pensarctest1.com/Images/Gallery/Homepage_Pic4.jpg" height="410" width="791" />
  </div>
  <script>/* <![CDATA[ */
  /* ]]> */</script>
</td>

Open in new window

And finally add the vertical align top style here
<table width="1080" cellspacing="0" cellpadding="0" border="0">
  <tbody><tr>
    <td style="vertical-align:top">  <!-- ADD STYLE HERE -->

Open in new window

0
 
Julian HansenCommented:
And keep in mind that a large part of your problem here is you are using tables for your layout.
0
 
JChrisMcNeilAuthor Commented:
OK, thanks, the "<td colspan="3">" was the trigger that got it to work in Firefox. I appreciate the persistence.
0
 
Julian HansenCommented:
You are welcome - thanks for the points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.