PDA

View Full Version : Ultimate Fade-in slideshow works on IE but not on Chrome or Firefox



raydona
10-06-2010, 02:24 PM
1) Script Title: Ultimate Fade-in slide show v2.4

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

3) Describe problem: Hi,
I wish to make use of this slide show on my web site. But before deploying I wanted to test it. The following is exactly the code I typed out on a text editor.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="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", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
</script>
</head>

<body>
<div id="fadeshow1"></div>

<br />

<div id="fadeshow2"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>
</body>
</html>

When I opened the text file with IE it worked fine. But it did not work with Google Chrome or Firefox. All that was shown were the custom buttons that allowed the user to navigate between slides. I wonder if any part of the code needs to be altered or some setting on the browsers need to be changed to allow the contents to be properly shown.
Note: I don't know if this point has any bearing on the problem, I doubt it. I'm using a 64 bit machine but the operating system, Windows XP, accepts all 32 bit programs.
I would be grateful for all help.

ddadmin
10-07-2010, 07:17 AM
The code above works for me as is in FF3.5 and Chrome. Do you have a URL to the problem page we can check out?

raydona
10-07-2010, 05:00 PM
Hi,
Many thanks for your reply. I've uploaded the page (http://www.onlineshoppingdirectory4u.com) to my website so that the problem page is available for view.

jscheuer1
10-07-2010, 05:47 PM
Is your site in Chinese or some other Asian language?

The reason I ask is that your demo page is being served in UTF-16, an encoding only commonly used for those sorts of languages, Hebrew and Arabic, perhaps a few others as well. Generally though, UTF-8 may be used for all of those and would not cause this problem.

What happens is that since the page is served in UTF-16, its script is viewed in that encoding as well, at least in those browsers where it's not working.

Since the page itself has no meta tag for the encoding on it, this must be coming from the server. There are various ways this can happen.

Before I get into that, are you aware of the page's encoding and how and why it got like that?

We need to know this in order to figure out the best way of fixing it. Otherwise it would be a sort of guessing game. One thing I would try though is putting the proper encoding on the script tag, change:


<script type="text/javascript" src="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>

to:


<script type="text/javascript" src="fadeslideshow.js" charset="utf-8">

/***********************************************
* 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>

raydona
10-11-2010, 02:54 PM
Many thanks. I tried your suggestion about changing the script tag and it works.