Slideshow only running offline not online

**WWWIM** · 09-24-2012, 03:11 PM

Hello,who can help me out.
I'm new to building websites and initially I wanted to build a site using Joomla.
But that took some study so I build a site with an old sitebuildingprogram : dejongevrm.nl
As you notice the slideshow is not running, though it does on my computer.

So I thought, because I used tables instead of div, I rebuild it.
The next problem I experienced was the first row displaying the cells underneath eachother.
This is that part of the source :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="direction: ltr;">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Change</title>
  <meta content="W. de Jonge" name="author">
  <meta
 content="Title"
 name="description">
<!--BEGIN META TAGS-->
  <meta name="keywords"
 content="VRM">
  <meta name="description"
 content="VRM">
  <meta name="rating" content="General">
  <meta name="ROBOTS" content="ALL">
<!--END META TAGS-->
  <meta http-equiv="Content-Type"
 content="text/html; charset=windows-1252">
</head>
<body
 style="height: 20px; color: rgb(250, 183, 67); background-color: rgb(0, 0, 153); width: 1024px;"
 alink="#3366ff" link="#33ccff" vlink="#cc33cc">
<br>
<div style="text-align: center; width: 1024px;">
<big><big>Rendabel
Investeren met het Vermogens-Rendement-Motor
Timinginstrument</big></big>
<div>
<div
 style="height: 370px; vertical-align: top; background-color: rgb(0, 0, 153); width: 17%;">
<hr style="height: 2px; width: 100%;"><img
 style="width: 100%; height: 108px;"
 alt="DeJonge Vermogens Rendement Motor" src="Images/Logo.JPG"><br>
<hr style="width: 100%; height: 2px;"><span
 style="font-family: Verdana; font-weight: bold; color: rgb(255, 255, 255);">
Ken de Toekomst en investeer met vertrouwen voor</span><br>
<hr style="width: 100%; height: 2px;"><small
 style="color: rgb(255, 255, 255);"><span
 style="font-family: Verdana; color: rgb(255, 255, 255);"><big><span
 style="font-weight: bold;"></span></big></span></small><small
 style="font-weight: bold;"><small
 style="color: rgb(255, 255, 255);"><big
 style="color: rgb(255, 0, 0);"><span
 style="font-family: Verdana;"></span></big></small></small><small
 style="font-weight: bold; background-color: rgb(255, 255, 255);"><small
 style="color: rgb(255, 255, 255);"><big
 style="color: rgb(255, 0, 0);"><span
 style="font-family: Verdana;">HOOG RENDEMENT</span></big></small></small><small
 style="color: rgb(255, 255, 255);"><span
 style="font-family: Verdana; color: rgb(255, 255, 255);"><big><span
 style="font-weight: bold;"></span></big></span></small>
<hr style="width: 100%; height: 2px;"><small
 style="color: rgb(255, 255, 255);"><span
 style="font-family: Verdana; color: rgb(255, 255, 255);"><big><span
 style="font-weight: bold;"></span></big> </span></small><small
 style="color: rgb(255, 255, 255);"><big
 style="color: rgb(255, 0, 0);"><span
 style="font-family: Verdana;"></span></big></small></div>
<div
 style="height: 370px; vertical-align: top; background-color: rgb(0, 0, 153); width: 66%;">
<script language="JavaScript1.2">/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var variableslide=new Array()
//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=['images/beleggen.jpg', '', 'Beleggers Wijzen U de Weg naar een Zekere Toekomst']
variableslide[1]=['images/rendement.png', '', 'Laag Kopen & Hoog Verkopen door Excellente Timing']
variableslide[2]=['images/analysemodel.png', '', 'Het V.R.M. Model kent de Toekomst']
variableslide[3]=['images/vermogensbestanddelen.jpg', '', 'Het V.R.M. Model is Multi Inzetbaar']
variableslide[4]=['images/nieuwsbrief.jpg', '', 'Ontvang Belangrijke Updates en Aanbiedingen']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='577px' //set to width of LARGEST image in your slideshow
var slideheight='368px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#000099'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=7000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script><ilayer id="slidensmain" width="&amp;{slidewidth};"
 height="&amp;{slideheight};" bgcolor="&amp;{slidebgcolor};"
 visibility="hide"><layer id="slidenssub"
 width="&amp;{slidewidth};" left="0" top="0"></layer></ilayer>
<p style="height: 6px;" align="right"><font
 face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
</div>
<div
 style="text-align: center; vertical-align: top; height: 26px; background-color: rgb(51, 102, 255); width: 17%;">
<hr style="width: 100%; height: 2px;"><img
 style="width: 100%; height: 199px;"
 alt="Kwantitatief Analist Wim de Jonge" src="Images/Wim.JPG"><br>
<hr style="width: 100%; height: 2px;"> <small
 style="font-weight: bold;"><small><span
 style="font-family: Verdana;">W. de Jonge</span></small></small><big
 style="font-weight: bold;"><big><big> <br>
</big></big></big><small style="font-weight: bold;"><small><span
 style="font-family: Verdana;">Kwantitatief
Analist</span></small></small>
<hr style="width: 100%; height: 2px;"></div>
</div>
</div>
</body>
</html>

**jscheuer1** · 09-24-2012, 03:26 PM

In the future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.

The problem is that upper and lower case matter on the server. The images are in the Images folder. There is no images folder. And looking in that folder I see that some or all of the image names contain capital letters:

Index of /Images

Parent Directory
Actiefoto.JPG
Analysemodel.PNG
Logo.JPG
Rendement.PNG
Teamfoto.JPG
Thumbs.db
VRM Jaarprojectie.PNG
VRM Weekprojectie.PNG
Vermogensbestanddelen.JPG
Wim.JPG
abon.PNG
abon1.PNG
beleggen.JPG
contact.PNG
contact1.PNG
favicon.ico
home.PNG
home1.PNG
komt.PNG
komt1.PNG
mijzelf.PNG
mijzelf1.PNG
nieuwsbrief.JPG
uitleg.PNG
uitleg1.PNG
voordelen.PNG
voordelen1.PNG

Apache Server at dejongevrm.nl Port 80

The code in your slideshow must agree with the case of the actual path and filenames of the images. So change your code to agree with what's really on the server.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**WWWIM** · 09-24-2012, 09:32 PM

Thanks John,
I wished there were that simple answers to all my questions, this solved my first problem.
By the way the slideshow I was referring to is flexislide.

Concerning my second part of the question, what would you suggest me to do.
What are the exact benefits using div instead of tables?
What about all the plain text in the pages, is it not simpeler to use articles/textfiles to refer to or so?

**jscheuer1** · 09-24-2012, 10:12 PM

Oh, I thought you were only concerned about tables versus divisions if it was the problem.

Generally tables are for tabular data only. Like a restaurant menu, price list, enumerating the characteristics of a list of similar items, that sort of thing.

They can be used for layout in general but that's frowned upon these days. The problem is that unless really well thought out, they can slow the loading of the page and can make it jumpier while loading than it needs to be. In my opinion divisions aren't that much better. To be effective they also need to be pretty well thought out. The advantages are that poorly thought out divisions usually will not slow the load of the page and are less likely to result in the page jumping around as it's loading.

Tables are also fixed in width, while divisions can be more fluid. If your layout is fluid, you want that.

But I'm not much of a designer. There are templates on DD:

http://www.dynamicdrive.com/style/layouts/

and around the web that use divisions. Perhaps you can find one that works for you.

If your question is now primarily about layout, ask in a new thread in the HTML or CSS section.

**WWWIM** · 09-27-2012, 09:41 PM

Hi John,
All is running smouth now, but there is one issue that bothers me.
As I'm new to building websites and so on, I questioned myself how you can come up with a whole list of files in my images folder as you have no access to my cpanel. I trust you, but obviously others could access that folder also and change files right?

**jscheuer1** · 09-27-2012, 10:12 PM

It's not as bad as you think. Unless your server/host account is setup otherwise or you have an index file in the folder, all anyone has to do to view the files in a folder is to navigate to that folder. They can't change anything. The can download and view the files though, but they probably can do that anyway if they are files you display on your site.

If it bothers you that folks can even see them though, all you have to do is put a blank file named index.htm in the folder. Then if they navigate to that folder, they will only see a blank screen. In folders that already have an index page, then that's what they'll see, so no need to worry about those folders. The other thing you can do if your access allows it is to change the setup so that navigating to a folder without an index page will give a 403 Forbidden error. Be careful though, don't set the folder to Forbidden, that's a different thing. If you do that the images won't show up even on your pages.

**Beverleyh** · 09-27-2012, 10:23 PM

We can see them by viewing http://dejongevrm.nl/images/ in any browser.
You're right by wanting to prevent this behaviour as allowing the server to list directory structures this way can make it easy for snoopers to learn the architecture of your site and maybe allow them to find a backdoor in. You can block the server's file listing behaviour with htaccess
A very simple alternative can also be to put an empty index.html file in the folders that don't have a 'home' page so snoopers just see a white screen. The downside of this method is that you'd need to put an index file in ALL folders whereas you can just put one .htaccess file at your website root and the directory listing behaviour would be stopped across the whole site. More info on that .htaccess here: http://www.techiecorner.com/106/how-...he-web-server/

**Beverleyh** · 09-27-2012, 10:24 PM

Ha - again beaten to the post while trying to reply via BlackBerry! (one thumb typing is so slow)

**WWWIM** · 09-27-2012, 11:20 PM

Hey Beverleyh,
Thanks for your help, techiecorner had the most simple way to tackle this problem, very cool.
Let's make live of those snoopers a bit harder.