PDA

View Full Version : DHTML Slide Show (manual)



danAYC
03-04-2010, 10:35 AM
1) Script Title: DHTML Slide Show (manual)

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

3) Describe problem: Basically I'm trying to validate the code on the w3 validator and cant figure out how to do it. I've only got one piece of code left to fix any help would be greatly appreciated.

the line of code im stuck on is below;


document.write('<a href="javascript:transport()">')


I get the following response from the validator



document type does not allow element "a" here


document.write('<a href="javascript:transport()">')



The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

jscheuer1
03-04-2010, 11:51 AM
The recommended method for validating a page with scripts on it is to make the scripts external*. Scripts are not HTML code, so will not necessarily validate as such.

Also, I just put up a demo of the script locally and although it had 9 errors in validation, the one you mention wasn't one of them.

That said, you can probably just escape the string so that it doesn't look like a tag to the validator (untested, as I couldn't duplicate your error):


document.write('\<\a href="javascript:transport()"\>')

The problem may be though that you are validating to strict and have placed that part of the code outside of a block level element. If that's the problem, use a container div tag for the entire body section.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

* Notes on external scripts:


Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:


<script src="some.js" type="text/javascript"></script>

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:


<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
<script>
<!--and
//-->
</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:


http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex (see usage terms (http://www.dynamicdrive.com/notice.htm) for more info on this, especially item 4 from the terms):


<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters, without which the script won't function.

There is also info here:

http://www.javascriptkit.com/javatutors/external.shtml

danAYC
03-04-2010, 12:19 PM
Hi jscheuer1, thanks for taking a look and taking the time to help out. Here's a few things i've looked at since reading your post.

The javascript (which i dont know a lot about) code which is meant to be in the <head> is in its own .js file which is linked in. I did this to tidy up the code. It's called webslide.js

The code inside a div tag is


<script type="text/javascript">
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" alt="images"/>')
if (linkornot==1)
document.write('</a>')
</script>

and the code in the webslide.js is




/***********************************************
* DHTML slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="img/portfolioscreenshots/websites/amdega.jpg"
photos[1]="img/portfolioscreenshots/websites/bctq.jpg"
photos[2]="img/portfolioscreenshots/websites/portland.jpg"
photos[3]="img/portfolioscreenshots/websites/pronta.jpg"
photos[4]="img/portfolioscreenshots/websites/ro.jpg"
photos[5]="img/portfolioscreenshots/websites/sa.jpg"
photos[6]="img/portfolioscreenshots/websites/th.jpg"
photos[7]="img/portfolioscreenshots/websites/t2s.jpg"

//Specify whether images should be linked or not (1=linked)
var linkornot=1

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]="mylink"
photoslink[1]="mylink""
photoslink[2]="mylink""
photoslink[3]="mylink""
photoslink[4]="mylink""
photoslink[5]="mylink""
photoslink[6]="mylink""
photoslink[7]="mylink""

//do NOT edit pass this line

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


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.open(photoslink[which])
}


the only error i get from w3 is to do with having the <a href> inside thwe document.write

heres what it says again

document type does not allow element "a" here

document.write('<a href="javascript:transport()">')

The website isn't online as of yet so I cant post the entire pages code in the forum.

Hope this helps with solving the problem

Dan

jscheuer1
03-04-2010, 12:48 PM
This part:


<script type="text/javascript">
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" alt="images"/>')
if (linkornot==1)
document.write('</a>')
</script>

could also be made external, as a separate external file:


if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" alt="images"/>')
if (linkornot==1)
document.write('</a>')

Call it webslide_2.js and replace it in the page's code with:


<script type="text/javascript" src="webslide_2.js"></script>

Just make sure the script's credit notice still appears in the source code of your page, example:


<script type="text/javascript" src="webslide_2.js">

/***********************************************
* DHTML slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

This need only be done once per page per Dynamic Drive script, so if you already have the credit notice with the external script tag in the head, you need not use it with this one, which of course goes in the body where this new external script's code would have been.

danAYC
03-04-2010, 01:20 PM
Thanks John, I'll make it external to webslide2 and rearrange it. I wont forget to add the credits into the sites code.

just one more question, does this code (below)


<script type="text/javascript" src="webslide_2.js"></script>

go inside the div tag? because if its in the head it wont know where to load it to will it?

Thanks again

Dan

jscheuer1
03-04-2010, 02:06 PM
It must replace:


<script type="text/javascript">
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" alt="images"/>')
if (linkornot==1)
document.write('</a>')
</script>

That's rule #3:


3 ) . . . The external call must be inserted at the same place on the page where the script was/would have been.

danAYC
03-17-2010, 01:35 PM
Hi John,

I managed to get the slideshow sorted and validated thanks.

One more quick question if I may. Is there a way of making the images play through rather than clicking next and previous?

Thanks again

Dan