PDA

View Full Version : Gallery Script will not validate



Nevyn
02-04-2006, 06:15 PM
Hi:

I would like to use the Gallery Script (http://search.freefind.com/find.html?id=6299074&pageid=r&mode=ALL&n=0&query=Gallery+script) but it will not validate (http://www.htmlhelp.com/tools/validator/direct.html.en). I used the validator by WD3.

The Errors I get are:

Document Checked

* Character encoding: ISO-8859-1
* Level of HTML: HTML 4.01 Transitional

Errors and Warnings

* Line 28, character 24:

document.write('</style>\n')
^

Error: end tag for element STYLE which is not open; try removing the end tag or check for improper nesting of elements
* Line 114, character 37:

... ass="gallerycontent" subject="What is JavaScript?">
^

Error: there is no attribute SUBJECT for this element (in this HTML version)
* Line 133, character 28:

<form name="gallerycontrol">
^

Error: required attribute ACTION not specified

When I use <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Doc type with Nvu I get the following problems in validating.



1. Error Line 30 column 23: end tag for element "STYLE" which is not open.

document.write('</style>\n')

2. Error Line 121 column 36: there is no attribute "SUBJECT".

<div class="gallerycontent" subject="What is JavaScript?">JavaScript is

3. Error Line 141 column 27: required attribute "ACTION" not specified.

<form name="gallerycontrol">


Any suggestions on how to get this script validated?

jscheuer1
02-04-2006, 09:25 PM
For this:


document.write('<\/style>\n')

escape the close tag hash as shown above in red.

For 'no such attribute subject', you can try changing all of those to name= and changing in the script where it references an element's subject to reference its name instead. This may cause problems in some browsers that may not like spaces in the name attribute, to correct for that (if it happens) you can try %20 or &nbsp; instead of space.

For, form requires action, try:


<form action="javascript:void(0);"

Nevyn
02-04-2006, 10:34 PM
Thanks John, both worked ....have any ideas for the last biggy?



The last error is Error Line 122 column 36: there is no attribute "SUBJECT".

This is a claim against:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

"<div class="gallerycontent" subject="What is JavaScript?">JavaScript

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute."



Any suggestions?

Nevyn
02-04-2006, 11:02 PM
Changing to name does not work...on the other two errors the only way it will work is:


if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent{display:none;}\n')
document.write('</style>\n')
}


Delete to

if (document.getElementById){
document.write('<style type="text/css">\n')
}


It works but I have no idea what that does to the system...

jscheuer1
02-04-2006, 11:50 PM
Here is a validated version of the demo script and markup:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.gallerycontroller{
width: 250px
}

.gallerycontent{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display: block;
}

</style>

<script type="text/javascript">

/***********************************************
* Advanced Gallery 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 tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent{display:none;}\n')
document.write('<\/style>\n')
}

var selectedDiv=0
var totalDivs=0

function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
if (document.gallerycontrol)
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone()",tickspeed)
}

function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<totalDivs;i++){
var thesubject=partscollect[i].getAttribute("title")
partscollect[i].setAttribute("title", "")
thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
temp.options[i]=new Option(thesubject,"")
}
temp.options[0].selected=true
}

function manualcontrol(menuobj){
if (displaymode=="manual"){
selectedDiv=menuobj
expandone()
}
}

function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
if (themode=="auto"){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout("expandone()",tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}


function startgallery(){
if (document.getElementById("controldiv")) //if it exists
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent")
totalDivs=partscollect.length
if (document.gallerycontrol){
populatemenu()
if (document.gallerycontrol.mode){
for (i=0; i<document.gallerycontrol.mode.length; i++){
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}
}
}
if (displaymode=="auto" && document.gallerycontrol)
document.gallerycontrol.menu.disabled=true
expandone()
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</script>
</head>
<body>
<div class="gallerycontent" title="What is JavaScript?">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<div class="gallerycontent" title="Java & JavaScript Differences">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages.
</div>

<div class="gallerycontent" title="What is DHTML?">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

<!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->

<div id="controldiv" style="display:none" class="gallerycontroller">
<form action="javascript:void(0);" name="gallerycontrol">

<select class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
<option>Blank form</option>
</select><br>

Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">

</form>
</div>
</body>
</html>

Nevyn
02-04-2006, 11:56 PM
I tried it and it worked and was validated! Thank you so much for your help in this!

Nevyn

Nevyn
02-05-2006, 01:33 PM
Hi John:

I just finished the web site this morning. And I wanted to tell you how much I appreciated your help. Somehow the code you wrote should really get to dyanmic drive to replace their old version, but I don't have a clue as to how to do that..maybe you do.

If you want to see the result of your help it is at http://www.whataworldradio.com/

The entire site is made up of code from dynamic drive and I referenced them on the index page. Code Courtesy Of Dynamic Drive (http://www.dynamicdrive.com/)

Thanks Again :D
Nevyn
Talk Show Host What A World Radio

Twey
02-05-2006, 04:03 PM
Nice to see someone actually trying to validate for once... I was talking to someone the other day who liked to remove "unnecessary HTML" and who "didn't want people who couldn't be bothered to install IE" on her site. :eek:

By the way, I recommend the W3 validator (http://validator.w3.org/) over the WDG one - it's much more verbose and easy to understand.

jscheuer1
02-05-2006, 08:18 PM
I probably should have mentioned this sooner but, that script (the original and the validated one I wrote) is buggy in Mozilla. Depending upon your layout, and yours is one of those that is prone to this, when you change the content blocks, browsers like FF will not return the added space from the previous block. As a result, you get scrollbars and content that is unintuitive to navigate through. I wrote a fix or two for this, just not sure where any of them are off hand.

In my defense, this is the first you gave a link to your page.

Nevyn
02-05-2006, 08:45 PM
Hi John:

It works fine now in IE and Firefox. I did drop off the auto and manual..just did not need them. For my needs the Gallery is about the best idea for presenting names of show guests and giving some info on who they are. I have very little knowledge of java script so for me it is copy and paste...and this works for me. If you ever get around to playing with that script again I would sure want to hear about it.

Also, just on the side: I searched wide and far for a menu and except for the chrome menu from dynamic drive, just about everything was either difficult to use, or would not work well with the IFrames. I love that menu...simple, easy and works with the Iframes. And if I can make it work, anyone can!

Nevyn

jscheuer1
02-05-2006, 08:45 PM
Ah, I found one, probably the simplest one. Just put another division around the content blocks with style="overflow:hidden;" (additions top and bottom of the below block in red):


<div style="overflow:hidden;">
<div class="gallerycontent" title="What is JavaScript?">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<div class="gallerycontent" title="Java & JavaScript Differences">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages.
</div>

<div class="gallerycontent" title="What is DHTML?">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
</div>

Nevyn
02-05-2006, 09:04 PM
Ooops...i did a direct reply on the email so this may get here twice...


Thanks..I put them in and all seems well. If you come across anymore please
do let me know.

Nevyn