Java Script Help Needed

[DBenson]

Hi
I am having problems with a Javascript that I hope someone could help me with - it is a script taken from website Dynamic Drive.

The script is basically a slideshow and the viewer should be able to click on any of the slideshow images and go to the relevant product page.

The slideshow is working great, but the links wont work and I can't figure out why!

I have the following in a fragment (there is some other just standard text in the fragement too)


!!<<script language="JavaScript" type="text/javascript" src="scroller.js"></script>>!!


I then have the following in an uploaded scroller.js file.

Incidentally.........I have entered absolute links in the following script to the pages I want to link to for the images i.e. http://www.mysite.co.uk/acatalogue/therightpage.html" and everything works when in a standard uploaded .html page but not in Actinic ??


scroller.js file as follows :


var slideshow_width='100px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='100px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="image1.gif"
dropimages[1]="image2.gif"
dropimages[2]="image3.gif"

var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.yahoo.com"
droplinks[1]=""
droplinks[2]="http://www.google.com"


////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)




Any help at all would be greatly appreciated

[DBenson]

Hi

Yes , the slideshow is on the index homepage which is..

http://www.allforyourgarden.co.uk

For extra info...I don't use /acatalogue....I have /products

Many thanks

[DBenson]

For extra reference if it's any hlep, in relation to the above link, the following is the actual code being used in the .js file....

var slideshow_width='536px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='300px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=10000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="http://www.allforyourgarden.co.uk/products/chestnut_pan_538x300.jpg"
dropimages[1]="http://www.allforyourgarden.co.uk/products/brazier_538x300.jpg"
dropimages[2]="http://www.allforyourgarden.co.uk/products/chiminea_538x300.jpg"

var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.allforyourgarden.co.uk/products/Chimenea_Accessories.html"
droplinks[1]="http://www.allforyourgarden.co.uk/products/Brazier.html"
droplinks[2]="http://www.allforyourgarden.co.uk/products/Chimenea.html"


////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

[DBenson]

Hi

That's the problem - they appear to be clickable and are doing something, but they just keep going to the home page, but on the script they are set to go to the relevant pages (new script posted above showing the actual links entered - unless I have missed something glaringly obvious in setting it up!).

I am also uploading it exertnally using Filezilla - I have even been deleting the old copy on the server and uploading a new one as opposed to just overwriting it.

But to no avail :-(

[NormanRouxel]

The code on scroller.js on your home page doesn't have the links you mention in your post above:

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="http://www.allforyourgarden.co.uk/products/chiminea_538x300.jpg"
dropimages[1]="http://www.allforyourgarden.co.uk/products/brazier_538x300.jpg"
dropimages[2]="http://www.allforyourgarden.co.uk/products/chestnut_pan_538x300.jpg"

var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.allforyourgarden.co.uk"
droplinks[1]="http://www.allforyourgarden.co.uk"
droplinks[2]="http://www.allforyourgarden.co.uk"

[DBenson]

That's very, very weird !

The copy I am uploading has got the full link!

Would the script have the ability to chop the link down to a site link as oppsed to a full page link ?

In the example shown by Dynamic Drive it only uses a link to a site and not a full url to a page within a site. .....I just presumed I could have a link to a specific page.

Just a thought which I will try out now - do you think it will have anything to do with using capital letters in the link url's ? - I don't like them myself but of course Actinic automatically creates the page using a capital letter at the beginning ?????

[DBenson]

Sorted !

I presume it was the script did not like the upper case letters on the url links !

Changed the actinic page name to all lower case and changed the links in the script to all lower case and voila it now all works

Is there possibly a setting somewhere in Actinic that I don't know about that I can choose to always user lower case when page name links are created by Actinic ??

[peblaco]

I do not think it was the upper case links that was the issue. I tested a scroller in version 10 with upper case links and it worked correctly. It was probably just that you changed the Javascript file and the Actinic suddenly recognised the file was changed where it was not correctly picking it up before and then it did a proper refresh of the file onto the server.

[DBenson]

I do not think it was the upper case links that was the issue. I tested a scroller in version 10 with upper case links and it worked correctly. It was probably just that you changed the Javascript file and the Actinic suddenly recognised the file was changed where it was not correctly picking it up before and then it did a proper refresh of the file onto the server.

I think you are probably right ....especially as a small change to the order of the images has also seemingly become effective, after not working.

Any ideas why this would be ? - I had physically deleted and uploaded the script file several times since yesterday evening, via Filezilla, but to no avail and then suddenly it is working ?

[DBenson]

Either way though - I don't like the upper case letters Actinic uses at the start of the page names.

But it is a headache to remember to change them each time a page is added - does anyone know if you can set Actinic to NOT use uppercase at all ?