Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
COURSE of the MONTH
9 days, 10 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Javascript slideshow shows twice in Internet Exporer
Posted on 2013-05-26
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:
in the body, where the slideshow goes:
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>
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>
<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>
[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
As I was checking in FF it seems same as your IE: Now add the style in top after #itop style:
#ibom{display:none}
<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>
jagadishdulal, adding the
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
#ibom{display:none}
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
Active today
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.
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;
}
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
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
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?
Any ideas on how to eliminate this?
Active today
I don't think you followed my instructions though
First change your #trans style
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;
}
<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>
<table width="1080" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td style="vertical-align:top"> <!-- ADD STYLE HERE -->
Active today
And keep in mind that a large part of your problem here is you are using tables for your layout.
OK, thanks, the "<td colspan="3">" was the trigger that got it to work in Firefox. I appreciate the persistence.
Featured Post
Ready to get started with anonymous questions today? It's easy! Learn more.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant.
Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
- Superb Internet
- Encryption
- E-Commerce
- SSL / HTTPS
- Cybersecurity
- Web Browsers
This article discusses how to create an extensible mechanism for linked drop downs.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site.
Launch the Search Engine Menu: In chrome, via you…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site.
Launch your Bookmark Menu: Press 'Ctrl +…
Suggested Courses
Course of the Month9 days, 10 hours left to enroll
762 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.