HTML Forum

**ForrestCroce** · 06-02-2007, 02:17 PM

I've been "fooling around" with other browsers and cheating on my beloved FireFox. There's a right-click menu item in Opera that sends the page you're looking at to validator.w3.org/check ... I've always tried to write good code, at least to the best of my knowledge, but never made an effort to validate my pages. Suddenly, it takes a lot less effort.

I was hoping people could help me understand the proper way to attach javascript code to events? I found this site struggling with png files and IE 6, and wound up sticking around ... people and the great advice they share here have convinced me to purge my site of tables, understand how to create a good navigation structure, really it's amazing how much I've learned here. And it's not for lack of trying elsewhere; people are really good ( and kind ) about figuring out the parts I don't understand and explaining those. I've learned a lot from tutorials as well, but being able to come back and ask questions sets this place apart.

So on that note, I was hoping people could help me understand how to fix the two validation errors on this page?

http://forrestcroce.com/Photos/Daddys-Little-Girl.html

Line 1 is okay: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Error 1: <body onLoad="ShowPortraits()"> there is no attribute "onLoad".
Error 2: <a ="..." onMouseOver="ShowPhotoGalleries()"> there is no attribute "onMouseOver".

So how do I attach code to different browser events? I've seen more C# like coding, where you call out to an external javascript file in the head section, that has some code like document.body.load = "xxx()", and I'm wondering if that's the way to go? This page is a portrait, so it shows that slice of my navigation, but landscape photos and galleries call a different function when they load. And if I'm forced to use that style of coding, how do I deal with my nav links ( which don't have IDs )?

Sorry for the basic question, but any light people can shed will be very much appreciated.

**tripy** · 07:57 PM

You must use the dom method

Code:

addEventListener('event','catching function','bubbling phase');

in a js block in your file.
http://developer.mozilla.org/en/docs...dEventListener

This method have a big advantage: you can stack multiple events on the same element.
Adding a new one doesn't replace the previously declared ones.

Xhtml have deprecated the inline events, as the target attributes on the href.
Either use the addEventListener function, or revert to html 4.01, which allow them.

**ForrestCroce** · 06-03-2007, 01:18 AM

Okay, this makes sense to me; it's not that different from manually attaching event handlers in C#. And I can see the advantage to bubbling, or having a click event occur for a whole region rather than a particular div or link ... that could simplify some things with my nav system as I expand it.

But I have a couple of questions. Instead of being able to set a different function for each page's body.onLoad event, depending on where that page fits in the hierarchy, it seems like I need to send every page's load event through one central function? I'm comfortable with js because it's like c, but I really don't know the specifics of the language. Would I use a long if or select cast block based on the URL ( and how do I grab that? ) to decide which function to call, create a hidden field with the category, or...?

It seems like I need to improve my nav structure in general, but if you look at any of my pages ( the one above that almost validates - and thanks for pointing me to what I need to fix the problems - or Big Basin ), I don't give some of the elements I need to attach event handlers to don't have IDs. I can go through and give them each one, but is there another approach?

Example:

<div id="navPhotoGalleries">
...<a href="../Galleries/Landscapes.html" onMouseOver="ShowLandscapes()">Landscapes</a> |
...<a href="../Galleries/Landscapes.html" onMouseOver="ShowCityscapes()">Cityscapes</a> |
...<a href="../Galleries/Portraits.html" onMouseOver="ShowPortraits()">Portraits</a> |
...<a href="../Galleries/Emotions.html">Emotive</a>
</div>

**ADAM Web Design** · 06-03-2007, 01:23 AM

That's not your problem, forrest. The problem is that XHTML event handlers have to be in lower case.

e.g. onmouseover, not onMouseOver.

Hope that gets you to where you need to be.

**ForrestCroce** · 06-03-2007, 01:44 AM

That did it, Adam - thanks! No camel case, it seems. I got a page to validate, without having to assign IDs to a bunch of links ( the nav is by far the hugest part of my pages ), so I'm in good shape.

I also figured out how to replace the info beneath photo with dl/dt/dd tags instead of divs and spans, so I don't have to specifically assign them a class anymore ... makes the code a lot simpler.

**Learning Newbie** · 06-03-2007, 05:02 PM

I recommend the DOM method, and the link Trippy the Geek provided is a great explanation.

Even for other reasons - completely unrelated ones - shouldn't your important navigation elements all get IDs? I understand why you're doing it to save bandwidth, but since you're not working with a template stamping CMS like Blogger, and have the control, I think leaving all your most important links ambiguous like that is going to limit you down the line. If you want to change your site at some point in the future, that is.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!