Hi folks,
This code used to work in IE but now with the latest version of IE nothing happens.
It works well in Chrome, Firefox etc. Just IE I am having the problem with.
Here is my code:
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 19;
var firstdisplay = true;
// Specify the image files
var slidePic = new Array();
var slideTitle = new Array();
// to add more images, just continue the pattern, adding to the array below
slidePic[0] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic1.jpg';
slidePic[1] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic2.jpg';
// to add more images, just continue the pattern, adding to the array below
slideTitle[0] = 'Fish markets from Golden Horn';
slideTitle[1] = 'North Breakwater';
// do not edit anything below this line
var t;
var j = 0;
var k = j+1;
var l = j+2;
var m = j+3;
var n = j+4;
var o = j+5;
var p = slidePic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = slidePic[i];
}
function runHomeSlideShow() {
if (document.all) {
document.images.slideshow.style.filter="blendTrans(duration=2)";
document.images.slideshow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.slideshow.filters.blendTrans.Apply();
}
// get random number
varNum1 = Math.round(Math.random()* (p-1));
document.images.slideshow.src = preLoad[varNum1].src;
document.images.slideshow.title = slideTitle[varNum1];
if (document.all) {
document.images.slideshow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runHomeSlideShow()', slideShowSpeed);
}
Any ideas ???
Thanks,
John
Hi there,
Welcome to the forums 
Could you post the HTML that goes with that JS, or better still, can you provide a link to a page where I can see this not working in IE 10?
Hi there, the website is www.fraserburgh-harbour.co.uk
I have partly resolved the issue by commenting out some of the code from the javascript. Although now there is no fading in and out of the images. If someone could explain what was wrong with the code before that would be great as ideally I would like to have the fading back in.
New code -
if (document.all) {
// document.images.slideshow.style.filter="blendTrans(duration=2)";
// document.images.slideshow.style.filter="blendTrans(duration=crossFadeDuration)";
// document.images.slideshow.filters.blendTrans.Apply();
}
// get random number
varNum1 = Math.round(Math.random()* (p-1));
document.images.slideshow.src = preLoad[varNum1].src;
document.images.slideshow.title = slideTitle[varNum1];
if (document.all) {
// document.images.slideshow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runshipliftSlideShow()', slideShowSpeed);
Hi,
It seems that the reason that your slideshow has stopped working is that visual filters and transitions have been removed from IE10.
http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx
I uncommented the lines that you had commented out and although the slideshow then works (in everything but IE10) I don’t see any image fading.
I notice however, that you are including jQuery in your code anyway.
There are literally hundreds of easy to use, great-looking image gallery for jQuery.
How would you feel about using one of those instead?
I could help you implement it if you desire.
Or are you set on fixing this?
Hi Pullo,
I would be grateful of any assistance in using jquery for the slideshow.
Where do I start ?
J
Hi there,
On reflection, it occurred to me that you could just use jQuery to patch the missing functionality in your original slideshow.
Here you go:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.fraserburgh-harbour.co.uk/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fraserburgh Harbour Commissioners</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--<SCRIPT SRC="js/homeimages.js" type="text/javascript"></SCRIPT>-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 8000;
// Duration of crossfade (seconds)
var crossFadeDuration = 19;
var firstdisplay = true;
// Specify the image files
var slidePic = new Array();
var slideTitle = new Array();
// to add more images, just continue the pattern, adding to the array below
slidePic[0] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic1.jpg';
slidePic[1] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic2.jpg';
slidePic[2] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic3.jpg';
slidePic[3] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic6.jpg';
slidePic[4] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic8.jpg';
slidePic[5] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic15.jpg';
slidePic[6] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic18.jpg';
slidePic[7] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic24.jpg';
slidePic[8] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic25.jpg';
slidePic[9] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic32.jpg';
slidePic[10] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic36.jpg';
slidePic[11] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic48.jpg';
slidePic[12] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic49.jpg';
slidePic[13] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic50.jpg';
slidePic[14] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic51.jpg';
slidePic[15] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic52.jpg';
slidePic[16] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic53.jpg';
slidePic[17] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic54.jpg';
slidePic[18] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic55.jpg';
slidePic[19] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic56.jpg';
slidePic[20] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic58.jpg';
slidePic[21] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic59.jpg';
slidePic[22] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic60.jpg';
slidePic[23] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic61.jpg';
slidePic[24] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic62.jpg';
slidePic[25] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic67.jpg';
slidePic[26] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic68.jpg';
slidePic[27] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic69.jpg';
slidePic[28] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic70.jpg';
slidePic[29] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic7.jpg';
slidePic[30] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic9.jpg';
slidePic[31] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic10.jpg';
slidePic[32] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic11.jpg';
slidePic[33] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic12.jpg';
slidePic[34] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic17.jpg';
slidePic[35] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic19.jpg';
slidePic[36] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic20.jpg';
slidePic[37] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic21.jpg';
slidePic[38] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic22.jpg';
slidePic[39] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic23.jpg';
slidePic[40] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic26.jpg';
slidePic[41] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic27.jpg';
slidePic[42] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic28.jpg';
slidePic[43] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic29.jpg';
slidePic[44] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic30.jpg';
slidePic[45] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic31.jpg';
slidePic[46] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic32.jpg';
slidePic[47] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic33.jpg';
slidePic[48] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic34.jpg';
slidePic[49] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic71.jpg';
slidePic[50] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic72.jpg';
slidePic[51] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic73.jpg';
slidePic[52] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic74.jpg';
slidePic[53] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic75.jpg';
slidePic[54] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic76.jpg';
slidePic[55] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic77.jpg';
slidePic[56] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic78.jpg';
slidePic[57] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic79.jpg';
slidePic[58] = 'http://www.fraserburgh-harbour.co.uk/new/images/pic80.jpg';
// to add more images, just continue the pattern, adding to the array below
slideTitle[0] = 'Fish markets from Golden Horn';
slideTitle[1] = 'North Breakwater';
slideTitle[2] = 'Golde Horn';
slideTitle[3] = 'Pilot boat on the slip';
slideTitle[4] = 'Examination of wire ropes (Sept 2007)';
slideTitle[5] = 'Lifeboat on the slip';
slideTitle[6] = 'Oil Supply vessel Dea Patrol';
slideTitle[7] = 'Oil Supply vessel Dea Ranger being painted';
slideTitle[8] = 'Shetland Isles ferry heading to drydock';
slideTitle[9] = 'Westgard loading (2006)';
slideTitle[10] = 'Safe berthing on shiplift';
slideTitle[11] = 'Purser with fish';
slideTitle[12] = 'Busy at the market';
slideTitle[13] = 'Willing Lad';
slideTitle[14] = 'On a winters day';
slideTitle[15] = 'Scot Ranger fell of cargo';
slideTitle[16] = '6 pursers lined up';
slideTitle[17] = 'Harbour dredging';
slideTitle[18] = 'Reaper FR958';
slideTitle[19] = 'Choppy seas';
slideTitle[20] = 'Crag keepers on pier';
slideTitle[21] = 'Ashlon, Provider and Staronia looking good';
slideTitle[22] = 'Ocean Quest';
slideTitle[23] = 'Yawls with ice factory in distance';
slideTitle[24] = 'Prawn vessels berthed under a winter sky';
slideTitle[25] = 'Jenna Maree';
slideTitle[26] = 'Broch sunrise';
slideTitle[27] = 'Sunrise';
slideTitle[28] = 'First Light';
slideTitle[29] = 'hiplift patiently waiting next customer';
slideTitle[30] = 'Construction in 2000';
slideTitle[31] = 'Traverser on rails';
slideTitle[32] = 'Different View (Nov. 2006)';
slideTitle[33] = 'Examination of wire ropes (Sept 2007)';
slideTitle[34] = 'Painting in progress (2009)';
slideTitle[35] = 'Barge Repair (May 2009)';
slideTitle[36] = 'Work on the Dea Challenger';
slideTitle[37] = 'Fila just docked (July 2009)';
slideTitle[38] = 'Different view showing locking position';
slideTitle[39] = 'Construction in 2000';
slideTitle[40] = '3000 Tonnes to load (2006)';
slideTitle[41] = 'Arrival and Departure';
slideTitle[42] = 'Bay Service MV Aberdeen (2009)';
slideTitle[43] = 'Loading in progress';
slideTitle[44] = 'Returning from Bay Service';
slideTitle[45] = 'Scot Ranger embarking for Sweden';
slideTitle[46] = 'Westgard loading (2006)';
slideTitle[47] = 'Ice Star departing';
slideTitle[48] = 'In discussions';
slideTitle[49] = 'Crabs from Chloe May for dispatch';
slideTitle[50] = 'Fish being auctioned';
slideTitle[51] = 'Fish for auction';
slideTitle[52] = 'Fish in market for sale';
slideTitle[53] = 'Fish for sale';
slideTitle[54] = 'Fish landings';
slideTitle[55] = 'Fish being landed to market';
slideTitle[56] = 'Northern Solan workboat berthed';
slideTitle[57] = 'Grampian Protector entering dry dock (September 2010)';
slideTitle[58] = 'Ocean Venture steaming home';
// do not edit anything below this line
var t;
var j = 0;
var k = j+1;
var l = j+2;
var m = j+3;
var n = j+4;
var o = j+5;
var p = slidePic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = slidePic[i];
}
function runHomeSlideShow(time) {
varNum1 = Math.round(Math.random()* (p-1));
if (time == "first"){
document.images.slideshow.src = preLoad[varNum1].src;
document.images.slideshow.title = slideTitle[varNum1];
} else {
$("#slideshow").fadeOut(1500, function(){
document.images.slideshow.src = preLoad[varNum1].src;
document.images.slideshow.title = slideTitle[varNum1];
$("#slideshow").fadeIn(1500);
});
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runHomeSlideShow()', slideShowSpeed);
}
</script>
<link rel="stylesheet" type="text/css" href="css/default.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="oldIE.css" />
<![endif]-->
<!-- dd menu -->
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id) {
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose() {
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime(){
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime(){
if(closetimer){
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->
</script>
</head>
<body onLoad="runHomeSlideShow('first')">
<div id="wrapper">
<div id="header">
<div id = "tides">Friday 07 June<br>Next High Tide 12:34</div>
<img style = "float:left;" src="images/whitelogo.gif" />
<div style="clear:both"></div>
<ul id="sddm">
<li><a href="index.php" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a></li>
<li>
<a href="whereweare.php" onmouseover="mopen('m2')" onmouseout="mclosetime()">About Us</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="whereweare.php">Where We Are</a>
<a href="convenor.php">Convenor</a>
<a href="keypersonnel.php">Key Personnel</a>
<a href="annualreport.php">Annual Report</a>
</div>
</li>
<li><a href="news.php" onmouseover="mopen('m3')" onmouseout="mclosetime()">News</a></li>
<li>
<a href="dailyLandings.php" onmouseover="mopen('m4')" onmouseout="mclosetime()">Fishing</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="dailyLandings.php">Daily Landings</a>
<a href="markets.php">The Market</a>
<a href="fishingrates.php">Rates and Charges</a>
</div>
</li>
<li>
<a href="shiplift.php" onmouseover="mopen('m5')" onmouseout="mclosetime()">Shiplift</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="shiplift.php">Overview</a>
<a href="shipliftrates.php">Rates and Charges</a>
</div>
</li>
<li>
<a href="drydock.php" onmouseover="mopen('m6')" onmouseout="mclosetime()">Drydock</a>
<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="drydock.php">Overview</a>
<a href="drydockrates.php">Rates and Charges</a>
</div>
</li>
<li>
<a href="commercial.php" onmouseover="mopen('m7')" onmouseout="mclosetime()">Commercial Cargo</a>
<div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#../commercial.php">Overview</a>
<a href="pilotage.php">Pilotage Directions</a>
<a href="commercialrates.php">Rates and Charges</a>
</div>
</li>
<li>
<a href="hands.php" onmouseover="mopen('m8')" onmouseout="mclosetime()">Health and Safety</a>
<div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="handspolicy.php">Policy Statement</a>
<a href="envpolicy.php">Environmental Policy</a>
<a href="handsconditions.php">Conditions of Use</a>
</div>
</li>
<li>
<a href="history.php" onmouseover="mopen('m9')" onmouseout="mclosetime()">History</a>
<div id="m9" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="history.php">Overview</a>
<a href="picturegallery.php">Picture Gallery</a>
</div>
</li>
<li><a href="contactus.php" onmouseover="mopen('m10')" onmouseout="mclosetime()">Contact Us</a></li>
</ul>
<div style="clear:both"></div>
<br clear="all" />
<!-- end #menu -->
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div style="margin-bottom: 10px;"><img src="images/base.png" alt = "slideshow" name='slideshow' border = "0px" id="slideshow" /></div>
<div class="post">
<h1 class="title">Home </h1>
<div class="entry">
<p><strong>What can Fraserburgh Harbour do for your business....</strong></p>
<ul>
<li>Safe Berthing with 24 Hour service</li>
<li>Fishing, Cargo, Oil Related and Ship Repair Facilities - they are all at Fraserburgh</li>
<li>Fuel, water, electricity, Stevedores available as required</li>
<li>Haulage - UK and Worldwide</li>
<li>You are guaranteed a warm welcome from a forward thinking organisation operating in an ultra-modern port</li>
<li>Remember - your business is our business</li>
</ul>
<p><strong>Fraserburgh Harbour - Your key location in the North</strong></p>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="sidebar-content">
<div id="sidebar-bgbtm">
<ul>
<li>
<h2>Relevant Pages</h2>
<ul>
<li><a href="#">Where We Are</a></li>
<li><a href="convenor.php">Convenor</a></li>
</ul>
</li>
<li>
<h2>Quick Links</h2>
<ul>
<li><a href="dailylandings.php">Daily Landings</a></li>
<li><a href="picturegallery.php">Picture Gallery</a></li>
<li><a href="annualreport.php">Annual Report</a></li>
<li><a href="tidetimetable.php">Tide Timetables</a></li>
<li><a href="jobs.php">Job Opportunities </a></li>
<li><a href="http://www.metoffice.gov.uk/weather/uk/uk_forecast_weather.html">Weather Forecast</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- end #sidebar -->
<div style="clear:both; margin:0;"></div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<p>© 2010. All Rights Reserved. Frasrburgh Harbour Commissioners</p>
</div>
<!-- end #footer -->
</body>
</html>
Demo.
If you have any questions, just let me know.
Wow!
Thanks a lot. Much appreciated.
J
No problem.
If I ever come to Fraserburgh I want a free fish