javascript vs xhtml

@jhaber31Jan 03.2004

Since I implemented some popup photo credits, my pages no longer validate in xhtml. Two problems.

One is caused by onClick as an attribute for the a tag. Any loss of functionality in any browser if I swticth to onclick all in lowercase, as I gather (from surfing) will solve it?

The other is caused by my sometimes including in attribute values, hoping this will deal with the display of some long lines in the popup. But that puts an angle bracket inside a value. Can you suggest a workaround? Thanks! John ([email protected])

to post a comment

JavaScript

11 Comments(s) _↴

@Khalid_AliJan 03.2004 — #all new browsers like lower case attributes as well lower case element name, all attribute values must be in quotes.

if you use CSS for you rlaye out you may not need to use a tonne of tag to set your pages lay out

@fredmvJan 03.2004 — #Some threads you may find helpful:[list]

[*] http://forums.webdeveloper.com/showthread.php?s=&threadid=24485

[*] http://forums.webdeveloper.com/showthread.php?s=&threadid=24331

[/list]

@jhaber31authorJan 03.2004 — #Thanks for both. Now, I do understand that tag names and attributes should be lc; I'd been adopting that uniformly. I also use CSS rather than for layout where possible, and I always use instead of where necessary. My pages had passed validation as xhtml transitional since I upgraded the side in 2003 . . . until I added this JavaScript feature last weekend. (I chose transitional and not strict because I insist on a couple of deprecated elements that, frankly, browsers aren't uniformly replicating in css: the image attributes align and border. But that's another thread, so ignore me <g>.)

I'd made the exception for onClick because I didn't think onclick was also a JavaScript event handler, but I'll take it from the replies that it's equivalent. For the second, I don't think my question wasn't clear. I'd a script for popup captions above a close button. They're of the form

El Greco: Portrait of Me

(Museo del JavaScript, 1587)

I passed values for artist, title, and credit (source and year of the work) in the function call. The script itself actually allows a window large enough for a third line, in case of long titles or long source credits. Then I might pass as part of one or the other. Thus a title might be given as ' portrait of long person's name' or a source might be '(Museo del JavaScript, photo by Artists Rights Society, 1587)'. The problem is that xhtml doesn't like < or > in an attribute value. I could make all windows four lines long, with the in the script, but that'd leave some very odd looking blank lines, I bet. Any thoughts? Thanks!

@jhaber31authorJan 03.2004 — #Oops: I meant to type I don't think my question was clear, not the double negative that sounds condescending to you as readers. Apologies!

@fredmvJan 03.2004 — #Try writing the function like this instead:

&lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 function popCap(title, artist, source)
 {
 var source = source.replace(/|/g, '&lt;br /&gt;'), title = title.replace(/|/g, '&lt;br /&gt;');
 var win = window.open('', 'cap', 'width=300,height=115,left=330,top=250');
 var code 	 = '&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"';
 code 	+= '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;';
 code	+= '&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"';
 code 	+= '&lt;head&gt;&lt;title&gt;' + artist + '&lt;/title&gt;&lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /&gt;&lt;/head&gt;';
 code 	+= '&lt;body&gt;&lt;p align="center"&gt;&lt;strong&gt;' + artist + ': &lt;cite&gt;' + title + '&lt;/cite&gt;&lt;br /&gt;&lt;small&gt;' + source + '&lt;/strong&gt;&lt;/small&gt;&lt;/p&gt;';
 code	+= '&lt;div align="right"&gt;&lt;form action="#"&gt;&lt;input type="button" value="close" onclick="self.close();" /&gt;';
 code	+= '&lt;/form&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;';
 
 <i>	</i>	if(typeof win != 'undefined' &amp;&amp; !win.closed)
 <i>	</i>	{
 <i>	</i>		with(win.document)
 <i>	</i>		{
 <i>	</i>			write(code);
 <i>	</i>			close();
 <i>	</i>		}
 <i>	</i>		win.focus();
 <i>	</i>	}
 <i>	</i>}
 //]]&gt;
 &lt;/script&gt;

Then to make newlines (breaks) in your title or source, use a "|" character. For example:

&lt;a href="#" onclick="popCap('new|line|test', 'foo', 'new|line|test');return false;"&gt;Open a sample window.&lt;/a&gt;

@jhaber31authorJan 03.2004 — #Thanks for such a quick reply. The replace method and the syntax of regular expressions here were new to me and very helpful. (If I follow now, / / always encloses the expression, | means to take | literally instead of as "or," and g means global.) Can I refine my understanding with a couple of other things, though?

First, since var win = appeared before, why do we need to verify that win isn't undefined or closed? Second, in my old code, I have document.open, document.write, and document.close instead of write and close. Is there an easy way to understand why now I don't have to refer to "document"? Thanks again!

@fredmvJan 03.2004 — #[i]Originally posted by jhaber31 [/i]

[B]Thanks for such a quick reply. The replace method and the syntax of regular expressions here were new to me and very helpful. (If I follow now, / / always encloses the expression, | means to take | literally instead of as "or," and g means global.)[/B][/QUOTE]Completely correct. ?[i]Originally posted by jhaber31 [/i]

[B]First, since var win = appeared before, why do we need to verify that win isn't undefined or closed?[/B][/QUOTE]Basically just good practice; however, consider the user closes the window before it gets written to (unlikely, but still possible). It first checks to see if it exists and hasn't yet been closed to avoid errors. You could also use a [font=courier]try/catch[/font] block to handle things like this as well.[i]Originally posted by jhaber31 [/i]

[B]Second, in my old code, I have document.open, document.write, and document.close instead of write and close. Is there an easy way to understand why now I don't have to refer to "document"? [/B][/QUOTE]Good observation. Notice there is a [font=courier]with[/font] statement being used; I defined in the with statement [font=courier]win.document[/font]. This makes it so that all lines inside of this statement are assumed to have this before it (think of it as just a way to save more typing).[i]Originally posted by jhaber31 [/i]

[B]Thanks again![/B][/QUOTE]You're quite welcome. ?

@jhaber31authorJan 03.2004 — #Ah, got it. Thanks. In effect the with renders open(); before write(code); superfluous. Very helpful.

@jhaber31authorJan 03.2004 — #BTW, not sure you want to know this, but anyhow... First, I did revise the script to store complete code as a variable before writing it. Oddly, on my local machine, it enlarged slightly the spacing between in lines in Mozilla 1.2.1 but not in IE 5.5 or Netscape 4.7, and yet online things look the same as before. Go figure.

Second, I did a global replace of onClick, but I'll need proofing, of course, and lots of manual replaces for the line breaks before I can upload. However, in the W3C online validator, a typical page now ALREADY passes as transitional despite the angle brackets in an attribute value. That is, once I changed the case of onClick, the second error message ceased of its own accord. I guess I now have to decide if it's cleanest still to go through with the remaining changes.

@AdamGundryJan 03.2004 — #I'm guessing that since you corrected the invalid attribute onclick, the validator can now parse the attribute, and will ignore the angle brackets (since onclick is defined as type CDATA, i.e. character data, which can contain markup symbols without them being parsed.)

Adam

@jhaber31authorJan 03.2004 — #Ah, that explains it. Thanks. (And ouch, I just replaced all the line break tags within the onclicks anyhow, and just finished proofing but not uploading. Cross our fingers all will still be well!)

Also in #JavaScript _↴

Totals of table not getting updated when next page is clicked Problem in my Javascript code for Tab Panel- Help Please!Newbie question?

Success!

Help @jhaber31 spread the word by sharing this article on Twitter...

Tweet This

javascript vs xhtml

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

javascript vs xhtml

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴