Issues with slideshow & drop down menu
Hi
I've recently got myself the web space and the domain name for a web site Im building for a friend. Im really pleased with the progress so far, even though theres loads of work to do, as this is the first website I've ever built. However, now that the site is actually running I cant seem to view arguably the most important page. All the other pages work fine, but with this page I get a blank white square within the iFrame in which its meant to appear. Some people can view the page fine, but from my computer and others its bust. This only happens when viewing the actual webpage, not viewing it from local files.
The problem sounds like its some sort of security/browser/javascript issue. More specifically, I think its the slideshow and the drop down menu thats causing the problem, as when I remove them (both, removing just one doesnt change anything) I can view the page fine. If anyone could point to what exactly might is causing the problem and how i could resolve it, that would be great.
The sites URL is vintageneedles.co.uk , and the page in question is 'The Girls'. Below is the code for the page. Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../bulktext.css" rel="stylesheet" type="text/css">
<script>
var slideShowSpeed = 4000
var crossFadeDuration = 10
var Pic = new Array()
Pic[0] = 'slide1.png'
Pic[1] = 'slide2.png'
Pic[2] = 'slide3.png'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
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()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
<STYLE>
<!--
body {
SCROLLBAR-ARROW-COLOR: #E4287C;
SCROLLBAR-FACE-COLOR: #382D2C;
SCROLLBAR-SHADOW-COLOR: #B38481;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #B38481;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
</STYLE>
</head><body onload="runSlideShow()" class="BulkText"><form name="jump" font color="#B38481"
size="2" face="Garamond"></form>
<table width="30%" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td><div align="center"><font face="Bookman Old Style"><img src="thegirls.gif" width="155" height="39"></font></div></td>
</tr>
<tr>
<td><div align="center"><img src="slide1.png" name='SlideShow' width=328 height=264 border="3"></div></td>
</tr>
<tr>
<td><div align="center" cellpadding="10">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO" style="BACKGROUND: #342826; BORDER-BOTTOM: outset; BORDER-LEFT:
outset; BORDER-RIGHT: outset; BORDER-TOP: outset; COLOR: #B38481; FONT-FAMILY:
Garamond; FONT-SIZE: 16px" align="absmiddle">
<option value="girls.htm">Select a model</option>
<option value="phoebe/Phoebe.htm">Phoebe</option>
<option value="cloud/Cloud.htm">Cloud</option>
</select>
</div></td>
</tr>
<tr>
<td><div align="center">Welcome to Vintage Needles </div></td>
</tr>
</table>
<tr>
<td colspan="2"><p> </p></td>
</tr>
</body>
</html>
Jack Michaelson posted this at 21:43 — 9th August 2006.
He has: 1,733 posts
Joined: Dec 1999
You have browser-specific javascript code, that only runs in Internet Explorer and not in other browsers like Firefox, Opera etc. I assume the people that see a blank box, run any of those browsers.
.
Not only the way you call the slideshow object, but the function that makes the images blend itself as well, are both IE-specific and won't run on (any?) other browsers.
I'd say, visit dynamicdrive.com (or similar) and find yourself a cross browser slideshow script
Shakespeare: onclick || !(onclick)
Dutchy posted this at 14:16 — 10th August 2006.
They have: 10 posts
Joined: Jul 2006
Hey
Thanks for the reply
However, I run Internet Explorer 6 and am getting the problem, so don't think its that.
Jack Michaelson posted this at 15:33 — 10th August 2006.
He has: 1,733 posts
Joined: Dec 1999
Maybe it's not the problem you are referring to, but in fact it is a problem, considering the still growing numbers of non IE users. Firefox went through 15% in the US in july 2006, in Europe the number seems to be even higher. And Firefox is not the only other browser...
The javascript in your code looks a bit ehm... crappy, no offense (as for the html, but that's not the actual point here). I'm missing several semicolons and as said, the syntax is not cross-browser proof. It might run ok in you copy of IE6, but that doesn't mean it runs in other IE6's or previous versions of IE. Not to speak of IE7 that is to be released any moment now, and promises to deal with javascript a lot stricter than IE6 does.
Not trying to be rude, just trying to point you into the right direction
Shakespeare: onclick || !(onclick)
Dutchy posted this at 11:37 — 11th August 2006.
They have: 10 posts
Joined: Jul 2006
No offence taken
Like I said earlier, this is the very first website I've ever done (no experience in Javascript or CSS beforehand, only a little in HTML) I'm not gonna be too dissapointed if the HTML/Javascript isn't perfect first attempt. How can I clean up the code ive got now? Or is it simply best to find totally new scripts for them?
Jack Michaelson posted this at 14:04 — 11th August 2006.
He has: 1,733 posts
Joined: Dec 1999
You can clean up the html-code by diving into CSS, but I understand if you don't want to touch that in this stage (since this is your very first website). I don't know why, but CSS frightens a lot of people in the beginning, while the adventages far outnumber the disadvantages. Take it to consideration
Second, with the javascript-code you have it's not really possible to clean things up. Making this particular script work in more browsers, simply means more code. So indeed, the best you can do IMHO, is find a new script. For instance this [url=http://dynamicdrive.com/dynamicindex14/fadeinslideshow.htm ]outstanding slide show[/url]. I've used this one myself as well
Shakespeare: onclick || !(onclick)
Dutchy posted this at 14:34 — 11th August 2006.
They have: 10 posts
Joined: Jul 2006
I'm quite happy to use CSS, I used it a fair bit on the index page on my site. Check out the source code for it, its pretty complicated (at least to me
). If I get time I'll definatly clear up the site CSS. And thanks for the slideshow link, I'll incorporate it and see if that fixes the probelm.
Cheers
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.