Solved

Javascript slideshow shows twice in Internet Exporer

Posted on 2013-05-26
11
294 Views
Last Modified: 2013-05-28
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

0
Comment
Question by:JChrisMcNeil
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39198580
do you have a URL we can look at to replicate problem.
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39198883
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
 

Author Comment

by:JChrisMcNeil
ID: 39199219
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39199627
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
 

Author Comment

by:JChrisMcNeil
ID: 39199645
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
 

Author Comment

by:JChrisMcNeil
ID: 39199661
julianH,
 Got it working with some tweaks, thanks
C
0
 

Author Comment

by:JChrisMcNeil
ID: 39199672
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39200453
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39200456
And keep in mind that a large part of your problem here is you are using tables for your layout.
0
 

Author Comment

by:JChrisMcNeil
ID: 39201516
OK, thanks, the "<td colspan="3">" was the trigger that got it to work in Firefox. I appreciate the persistence.
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39202051
You are welcome - thanks for the points
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Script Error 5 24
Given a github repo find email address of all collaborators in that repo 1 35
Link Anchor Not working 9 49
REST call Failing 1 12
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question