homepage Welcome to WebmasterWorld Guest from 54.234.2.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
"Open New Window" script does not validate
palmpal




msg:1488331
 12:28 am on Apr 19, 2003 (gmt 0)

Hello,

Well my validation check didn't turn out very well. The ordered list wasn't the problem but rather a script I added to open a new window about 400 pixels x 400 pixels. The window works fine and has a close button. In addition it doesn't list the entire path of the image but a title instead - but it doesn't validate to HTML 4.01 Transitional. The validation problem came when it encountered the <title>, <center> and <form> ending tags. I know nothing about scripts - this was a free, copy/paste version. Does anyone know of a good resource for something like this?

Thanks!

 

tedster




msg:1488332
 12:48 am on Apr 19, 2003 (gmt 0)

Well, a script isn't HTML, so the validator shouldn't be giving you grief about any script content. Have you tried defining the window opening function in an external .js file?

palmpal




msg:1488333
 2:41 pm on Apr 19, 2003 (gmt 0)

Hello,

External File? Well that sounds really interesting. I went off searching for how to do that and have a few questions. I took out everything between the two <SCRIPT> tags and kept that part in my HTML page. (Should it go in the header?) Then I cut and past the middle section into notepad and saved as a .js file to the same directory. I identified the .js file name in the Script tags. Needless to say it didn't work. So, is there something additional needed for the .js file? Also, where does the <FORM> section (located at the bottom of the script and AFTER the ending script tag) go? In the HTML document or the .js document? I need the "View Detail" button to be at a certain location on my HTML page.

One of my errors is the script language and I do know how to correct that! You can see the Title, Form and Center tags that are causing the validation error.

Thanks for any pointers. Here is the script I am working with.

<SCRIPT language=JavaScript>

var width,height
var image,ext
var cond1,cond2
function transferview(image,width,height) {
if (width==0) cond1=" "
else cond1="width="+(width+20)+"";
if (height==0) {cond2=" "};
else {cond2="height="+(height+70)+""};

var s1 ="<TITLE>Image</TITLE>"
var s15=""
var s2 ="<CENTER><IMG SRC='"+image+"' BORDER=0>"
var s3 ="<FORM><INPUT TYPE='BUTTON' VALUE='Close Window'"+" onClick='self.close()'>"
var s4 ="</FORM></CENTER>"

ImageWindow=window.open("", "newwin"+width,"toolbar=no,scrollbars="+scroll+",menubar=no,"+cond1+","+cond2);
ImageWindow.document.write(s1+s15+s2+s3+s4)
ImageWindow.document.close()
}
</SCRIPT><FORM><INPUT onclick="javascript:transferview('http://www.mysite.com/images/xxx.jpg',400,400)" type=button value="View Detail">
</FORM>

martinibuster




msg:1488334
 5:02 pm on Apr 19, 2003 (gmt 0)

Your JavaScript would ordinarily be in the head section. But you link out to it from the head section, it should look like this: <script language="javascript" type="text/javascript" src="mycode.js"></script>

The validation problem came when it encountered the <title>,

Make sure that the title tags are in the head section as well, and make sure you close them: <title></title>

The center issue, is that with your TD Vertical Alignment? The validator may be looking for you to use "middle" instead of "center", as in valign="middle."

When I just tried adding a javascript call to a form button, dreamweaver put this code in my head section:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>

Then, the "call" for externally linked JS file would look like this:
<input name="Submit" type="submit" onClick="MM_callJS('/stuff.js')" value="Submit">

This part: '/stuff.js' is the location of your script. You'll have to alter that accordingly.

And I bet that someone around here has an even better way of doing the above!

Incidentally, for every error the validator finds, it gives you a link to where you can find an explanation of the error, and what the proper formatting should look like. You can save yourself hours of grief by following those links and reading the explanations. Then you'll have more time for "doing what you want to do, going where you want to go." (I love that jingle!)

[edited by: martinibuster at 5:18 pm (utc) on April 19, 2003]

pageoneresults




msg:1488335
 5:12 pm on Apr 19, 2003 (gmt 0)

<SCRIPT language=JavaScript>

I believe the error might be happening because you do not have the attribute "quoted". The above should look like this...

<script type="text/javascript">

martinibuster, the script language attribute has been deprecated in favor of the shortened version I just posted above. We've got another topic going that discusses this same issue...

The Language and Type Attributes on Script Tags [webmasterworld.com]

martinibuster




msg:1488336
 5:14 pm on Apr 19, 2003 (gmt 0)

Thanks pageoneresults (still validates, though, under doctype 4.01 transitional). I'll check that out.

[edited by: martinibuster at 5:24 pm (utc) on April 19, 2003]

pageoneresults




msg:1488337
 5:19 pm on Apr 19, 2003 (gmt 0)

One thing to keep in mind with the validator; when you fix one error, it may fix quite a few. Once something is in err, it affects everything below it. I've found that the best way to work with the errors is to methodically go through the list from top to bottom and correct them one at a time.

I've had some pages come my way that had over a hundred errors. After correcting 6-10 of those errors, the rest were cleared.

I keep this code at the bottom of almost every page I develop...

HTML - [validator.w3.org...]
CSS - [jigsaw.w3.org...]

I of course connect those links to the W3C HTML and CSS validation buttons. This has been an important part for my entire development team. My asp programmer even writes valid html now! ;)

g1smd




msg:1488338
 6:17 pm on Apr 19, 2003 (gmt 0)

I keep these two bookmarks in my Personal Toolbar Folder along the top of the screen in Mozilla:

Val HTML:
javascript:void(window.open('http://validator.w3.org/check?uri='+window.location+'&doctype=HTML+4.01+Transitional&ss='))

Val CSS:
javascript:void(window.open('http://jigsaw.w3.org/css-validator/validator?uri='+window.location+'&warning=1&profile=css2'))

Makes it a one click operation to validate a page.

martinibuster




msg:1488339
 6:25 pm on Apr 19, 2003 (gmt 0)

Love those Favelets. I was going to mention them, but didn't want to get off topic.

You can get them here:
[validator.w3.org ]

Right click on the favelet that you want, choose Add to Favorites, and now you can validate any page you are visiting. Love it.

pageoneresults




msg:1488340
 6:37 pm on Apr 19, 2003 (gmt 0)

We like keeping the code and buttons on the page just to brag a little about the W3C validation. I think it also shows those visitors who might be somewhat savvy that you care about standards. We promote standards whenever and wherever we can.

The Favelets are cool! I saw them when the W3C redesigned their site not long ago.

palmpal




msg:1488341
 7:39 pm on Apr 19, 2003 (gmt 0)

So this goes in my header:

<SCRIPT type="text/JavaScript" src="http://www.mysite.com/xxx.js"></SCRIPT>

This goes further down on my web page:

><FORM><INPUT onclick="javascript:transferview('http://www.mysite.com/images/xxx.jpg',400,400)" type=button value="View Detail">
</FORM>

And this goes in my external file:

var width,height
var image,ext
var cond1,cond2
function transferview(image,width,height) {
if (width==0) cond1=" "
else cond1="width="+(width+20)+"";
if (height==0) {cond2=" "};
else {cond2="height="+(height+70)+""};

var s1 ="<TITLE>Image</TITLE>"
var s15=""
var s2 ="<CENTER><IMG SRC='"+image+"' BORDER=0>"
var s3 ="<FORM><INPUT TYPE='BUTTON' VALUE='Close Window'"+" onClick='self.close()'>"
var s4 ="</FORM></CENTER>"

ImageWindow=window.open("", "newwin"+width,"toolbar=no,scrollbars="+scroll+",menubar=no,"+cond1+","+cond2);
ImageWindow.document.write(s1+s15+s2+s3+s4)
ImageWindow.document.close()
}

Is this correct? Is there anything additional needed for the external file? Does the external.js file have a header section?

Thanks!

g1smd




msg:1488342
 7:54 pm on Apr 19, 2003 (gmt 0)

Not quite.

The <title> info must be placed inside the <head> ... </head> tags of the final HTML page, whether it is actually located there or whether it gets written by a javascript routine. It must never be placed in the <body> section.

The rest of that generated code is correctly targeted to the <body> section though.

Looks like you need two separate functions to achieve this, but you are on the right lines so far.

palmpal




msg:1488343
 7:59 pm on Apr 19, 2003 (gmt 0)

Hello,

I did a test page and everything works! But . . . it still doesn't validate. I have the following error:

required attribute "ACTION" not specified

This is referring to the HTML body section where I have <Form><Input . . .

I'm not sure how to fix this. Can I just repeat the input data as the form action?

Also, the title in the JS is referring to the title of the new window. I have this in the external.js. My HTML doc already has a title. Is this OK?

Oh, and the reason this didn't work (as far as the new window opening) before? The ending bracket was missing in the external.js! Details, details . . .

You guys/gals must be getting a good chuckle with all my questions! Thanks for the help.

palmpal




msg:1488344
 9:51 pm on Apr 19, 2003 (gmt 0)

This works and my page validates!

<FORM action="http://www.mysite.com/images/XXX.jpg">
<INPUT type="button" value="View Detail" onclick="javascript:transferview('http://www.mysite.com/images/XXX.jpg',400,400)">
</FORM>

In my readings today I got the impression that Netscape may have some issues with Javascript. That will have to be next weekends project!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved