PDA

View Full Version : Fade Slideshow Internet Explorer issue



RichardN
10-28-2010, 01:35 PM
1) Script Title: fadeslideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:

Slideshow works fine with Safari and Firefox.
But on Internet Explorer the slideshow is moved to below my navigation pane for some reason.
Any ideas as to why?

You can see it at http://www.hypnotherapy-wimbledon.co.uk/live/hypnotherapy_natural_health_centre_wandsworth_wimbledon.php

Thanks
Richard

jscheuer1
10-28-2010, 05:01 PM
In the source code from the hypnotherapy-wimbledon.co.uk/live/hypnotherapy_natural_health_centre_wandsworth_wimbledon.php page, it starts out:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.hypnotherapy-wimbledon.co.uk/live/fadeslideshow/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: "fadeshow1",
dimensions: [450,337.5],
imagearray: [
["images/slide1.jpg", "", "", ""],
["images/slide2.jpg", "", "", ""],
["images/slide3.jpg", "", "", ""],
["images/slide4.jpg", "", "", ""],
["images/slide6.jpg", "", "", ""]
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false, randomize:true},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})

</script> <!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>

It should be:


<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.hypnotherapy-wimbledon.co.uk/live/fadeslideshow/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: "fadeshow1",
dimensions: [450,337.5],
imagearray: [
["images/slide1.jpg", "", "", ""],
["images/slide2.jpg", "", "", ""],
["images/slide3.jpg", "", "", ""],
["images/slide4.jpg", "", "", ""],
["images/slide6.jpg", "", "", ""]
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false, randomize:true},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})

</script>

The way it is now IE is thrown into quirks mode, all browsers really. It's just that the meaning of quirks mode in IE is a bit more extreme in IE than in those others. Restoring the proper order will make all browsers render in standards compliance mode. This shouldn't be a problem in those others, and will restore the expected layout to the page in IE.

Notes: Ideally all scripts appearing in the head should follow the stylesheet links, which in this case are in the right spot now, following the title, except that the meta tags should come after the title and before the stylesheet links. But simply doing as suggested above is all that's required to get it working in IE.

RichardN
10-29-2010, 07:50 AM
Thanks John
That's brilliant.
I'm having problems with Rapidweaver displaying stuff between the HEAD tags and didn't realise the significance.
Thanks again

Richard