Ultimate Fade-in slideshow (v2.1) - issues with IE, settimeout and query.min.js

[Leslie]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

Test pages:

http://www.echristianpr.com/testslideshow.php (without settimeout delay--works in all browsers)

http://www.echristianpr.com/testshowit.php (with settimeout delay--doesn't work in Internet Explorer)

My goal was to have a fade in slide show that 1) draws its image info from a mysql db and 2) begins N seconds after the page loads.

What I've done (described below) works fine in Firefox, Chrome, Safari, and Opera, but generates the following error in IE 6, 7, & 8:

Line: 13
Char: 12949
Error: Invalid Argument
Code: 0

IE 8 points to the issue being in http://ajax.googleapis.com/ajax/libs.../jquery.min.js

This same issue is described in
http://www.dynamicdrive.com/forums/s...d.php?p=208081
but the fix suggested (updating the version of fadeslideshow.js) does not remedy the problem

There seems to be a conflict between the short settimeout script I'm using to delay the start of the slideshow and query.min.js, but I'm not clever enough to find it.

My mods:

I've used Ultimate Fade-in slideshow (v2.1) <http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm> as my base, edited that to draw from a db by replacing the stock imagearray with the following:

imagearray: [
		<?php
$text = '';
$sql = "SELECT * FROM slideshow_images WHERE home_page = '1'";
$result = mysql_query($sql);
if (mysql_num_rows($result) > 0) {
   while ($row = mysql_fetch_object($result)) {
      $text .= '["images/slideshow/' . $row->image . '", "' . $row->link . '", "' . $row->caption . '", "' . $row->alt . '"],';
   }
}
$text = rtrim($text, ',');
echo $text;
?> 
	],

That step works fine in all browsers.

In the body of the public page on which the slideshow is to be displayed (http://www.echristianpr.com/testshowit.php), I've set up a div (homepage_holder) with a background (the static image I want to show before the slideshow starts). Within that is a div (homepageshow) that calls the slideshow. That div has style "display:none;" when the page is loaded, to hide it until it is called to appear.

<div id="homepage_holder" name="homepage_holder"> <!--static bg-->
		<div id="homepageshow"  style="display:none;"><!--homepageshow id calls the slideshow-->
				</div>
</div>

I've included a js function -- showit() -- on that public page that changes the style to "display:block" after N seconds, theoretically, allowing the slideshow to appear.

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
function showit(){
  var objdiv = document.getElementById('homepageshow');
  objdiv.style.display = 'block';
  }
  
window.onload = function(){
  setTimeout('showit()',5300);
}
;
//-->
</SCRIPT>

I've confirmed that showit() works and properly changes the style of the referenced div, that is, except in IE when showit refers to the div that calls the slideshow (homepageshow).

In this testing example, what you should see is a skyline photo static for a few seconds, then an abrupt change to a lobby photo (that change shows when the slideshow actually appears), followed by the slideshow of the skyline again and more lobby photos: http://www.echristianpr.com/testshowit.php

Works beautifully in Firefox, Chrome, Opera, and Safari. IE 6, 7, 8 scream about invalid arguments and then get hung on loading.gif

- The slideshow with display:block hard coded works in IE, so I know that the slideshow works and that labelling it with a display:block style works. http://www.echristianpr.com/testslideshow.php (without settimeout delay--works in all browsers)

- The javascript that changes the style works on any referenced div except the one that calls the slideshow, so I know that the script that switches the style from hidden to block works. http://www.echristianpr.com/testnoslideshow.php -- no slideshow, but red test text will appear when the style is switched to block

Something about the script changing the style and the slideshow script don't work together in IE.

Any insight on what to fix? Or is there a better way to delay the start of the slideshow for a set number of seconds?

Thanks in advance!

[jscheuer1]

Apparently it isn't the setTimeout that's the problem, rather the display:none; for the slide show division. IE cannot for some reason deal with the slide show initialization with the target division's display set to none. This mock-up of your test page worked OK here in IE and FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<link href="eca-style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

jQuery(function($){
	setTimeout(function(){$('#homepageshow').css({visibility: '', position: 'relative', top: '', left: ''});}, 5300);
});
</script> 


</head>

<body>




<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "homepageshow", //ID of blank DIV on page to house Slideshow
	dimensions: [275, 206], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/slideshow/001-lobby2009.jpg", "", "", "ECPR lobby"],["images/slideshow/002-lobby2009.jpg", "", "", "ECPR lobby"],["images/slideshow/003-conf2009.jpg", "", "", "ECPR Conference Room"] 
	],
	displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})


</script>
<div align="center">
	<div id="homepage_holder" name="homepage_holder"> <!-- static bg -->
		<div id="homepageshow" style="visibility:hidden;position:absolute;top:-3000px;left:-3000px;"><!-- homepageshow id calls the slideshow -->
			<span style="font-size:400%; color:#CC0000; font-weight:bold;">TEST SPAN</span><!-- test -->
		</div>
	</div>
</div>
</body>
</html>

But I played around with this a bit more and decided I liked this effect better:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<link href="eca-style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

jQuery(function($){
	$('#homepageshow').css('opacity', 0);
});
</script> 
<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "homepageshow", //ID of blank DIV on page to house Slideshow
	dimensions: [275, 206], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/slideshow/001-lobby2009.jpg", "", "", "ECPR lobby"],["images/slideshow/002-lobby2009.jpg", "", "", "ECPR lobby"],["images/slideshow/003-conf2009.jpg", "", "", "ECPR Conference Room"] 
	],
	displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		setTimeout(function(){
				jQuery('#homepageshow')
				.css({visibility: '', position: 'relative', top: '', left: ''})
				.animate({'opacity': 1}, 500);
			}, 5300);
		}
})

</script>
</head>
<body>
<div align="center">
	<div id="homepage_holder" name="homepage_holder" style="background-position:center;"> <!-- static bg -->
		<div id="homepageshow" style="visibility:hidden;position:absolute;top:-3000px;left:-3000px;"><!-- homepageshow id calls the slideshow -->
			<span style="font-size:400%; color:#CC0000; font-weight:bold;">TEST SPAN</span><!-- test -->
		</div>
	</div>
</div>
</body>
</html>

[Leslie]

John, you rock beyond words. Donations to your suggested charities are on their way! :-)