Dreamweaver - javascript: best way to handle unobtrusive 'onload' events?

Author

javascript: best way to handle unobtrusive 'onload' events?

Darrel

2006-04-18, 10:28 pm

My javascript is far from being well written, but I manage to hack my way
through it.

One bad habit is that I still rely on the ONLOAD even handler in the BODY
tag way too much. I want to start using a proper unobtrusive function to
handle this instead.

There seems to be a couple of ways to do this. Here's one example:

http://www.onlinetools.org/articles...t/chapter4.html

However, I'm finding variations on that as well.

Is there a commonly accepted function that everyone uses these days?

-Darrel

Thierry | www.TJKDesign.com

2006-04-18, 10:28 pm

Darrel wrote:
> My javascript is far from being well written, but I manage to hack my
> way through it.
>
> One bad habit is that I still rely on the ONLOAD even handler in the
> BODY tag way too much. I want to start using a proper unobtrusive
> function to handle this instead.
>
> There seems to be a couple of ways to do this. Here's one example:
> http://www.onlinetools.org/articles...t/chapter4.html
>
> However, I'm finding variations on that as well.
>
> Is there a commonly accepted function that everyone uses these days?

Hi Darrel,
FWIW, this is the one I'm using:
http://simon.incutio.com/archive/20...26/addLoadEvent

HTH,
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....

Raizel

2006-04-18, 10:28 pm

In article <e1uoid$487$1@forums.macromedia.com>,
"Thierry | www.TJKDesign.com" <thierry@212utah.invalid> wrote:

> Darrel wrote:
>
> Hi Darrel,
> FWIW, this is the one I'm using:
> http://simon.incutio.com/archive/20...26/addLoadEvent
>
> HTH,

Ouch.
<QUOTE>PPK is talking about inline event attributes such as the infamous
onclick="" and onmouseover="" which have infested our HTML ever since
Netscape introduced JavaScript back in version 2.0 of their
browser.</QUOTE>

My entire menu structure is based on onmouseover! There again, it's from
DW4 days too just updated for DW8. Fascinating read!

Darrel

2006-04-18, 10:28 pm

> Hi Darrel,
> FWIW, this is the one I'm using:
> http://simon.incutio.com/archive/20...26/addLoadEvent

Hmm...looks great. BUT...I'm doing something wrong.

Here's my function:

function toggleFileUploads(imageSize){
if (document.getElementById(imageSize + '_upload1').checked == true) {
document.getElementById(imageSize +
'fileUploadWrapper').style.display = "block"
} else {
document.getElementById(imageSize +
'fileUploadWrapper').style.display = "none"
}
return;
}

This works fine if I call it from an onClick event:

onClick="toggleFileUploads('XL');"

However, if I call it form the onload function:

addLoadEvent(toggleFileUploads('XL'));

I get this error:

Error: document.getElementById(imageSize + "_upload1") has no properties

However, my variable 'XL' is being passed through the addLoadEvent function
to the one I wrote (as I can grab it in an alert). I'm stumped as to why it
won't execute via that function call, though.

-Darrel

Darrel

2006-04-18, 10:28 pm

> However, my variable 'XL' is being passed through the addLoadEvent
> function to the one I wrote (as I can grab it in an alert). I'm stumped as
> to why it won't execute via that function call, though.

Hmm...seems like I can not pass a VAR through the onload event function. I
was able to fix it by rewriting my source function, though that's a bit
clumsy.

-Darrel

Thierry | www.TJKDesign.com

2006-04-18, 10:28 pm

Raizel wrote:
> Ouch.
> <QUOTE>PPK is talking about inline event attributes such as the
> infamous onclick="" and onmouseover="" which have infested our HTML
> ever since Netscape introduced JavaScript back in version 2.0 of their
> browser.</QUOTE>
>
> My entire menu structure is based on onmouseover! There again, it's
> from DW4 days too just updated for DW8. Fascinating read!

I have something cooking, I call it "the *perfect* photo gallery".
It shows what the DOM can do for you :-)

--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....

Thierry | www.TJKDesign.com

2006-04-18, 10:28 pm

Darrel wrote:
>
> Hmm...looks great. BUT...I'm doing something wrong.
>
> Here's my function:
>
> function toggleFileUploads(imageSize){
> if (document.getElementById(imageSize + '_upload1').checked ==
> true) { document.getElementById(imageSize +
> 'fileUploadWrapper').style.display = "block"
> } else {
> document.getElementById(imageSize +
> 'fileUploadWrapper').style.display = "none"
> }
> return;
> }
>
> This works fine if I call it from an onClick event:
>
> onClick="toggleFileUploads('XL');"
>
> However, if I call it form the onload function:
>
> addLoadEvent(toggleFileUploads('XL'));
>
> I get this error:
>
> Error: document.getElementById(imageSize + "_upload1") has no
> properties
>
> However, my variable 'XL' is being passed through the addLoadEvent
> function to the one I wrote (as I can grab it in an alert). I'm
> stumped as to why it won't execute via that function call, though.

When I started using this technique I ran into the same problem; but soon
after you develop a different logic and find out that it's not really an
issue.

--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....

Darrel

2006-04-18, 10:28 pm

> I have something cooking, I call it "the *perfect* photo gallery".
> It shows what the DOM can do for you :-)

Hmm....sounds interesting.

I'm actually working on a photogallery myself, though this tool handles most
of the back-end stuff (uploading, siziing, labeling, sorting, etc.) and then
the front end will be customizable, including 'hooking' into a variety of
javascript and flash galleries.

Looking forward to see what you come up with, thierry...I'm always impressed
with your work.

-Darrel

Raizel

2006-04-18, 10:28 pm

In article <e1v1hm$doh$1@forums.macromedia.com>,
"Thierry | www.TJKDesign.com" <thierry@212utah.invalid> wrote:

> Raizel wrote:
>
> I have something cooking, I call it "the *perfect* photo gallery".
> It shows what the DOM can do for you :-)

I use a great photo gallery offered by my web host (3rd party). With a
couple clicks, it creates the mysql database, sets up the structure and
I upload the images. Now, if I could remember the name, I'd tell you
<LAUGH, IT"S LATE>

Thierry | www.TJKDesign.com

2006-04-18, 10:28 pm

Darrel wrote:
> Hmm....sounds interesting.

> I'm actually working on a photogallery myself, though this tool
> handles most of the back-end stuff (uploading, siziing, labeling,
> sorting, etc.) and then the front end will be customizable, including
> 'hooking' into a variety of javascript and flash galleries.

Seems to be the complete package ;)

> Looking forward to see what you come up with, thierry...I'm always
> impressed with your work.

Thank you.
I have it working already, but I'm sure it's gonna take me at least a week
to write something half decent to present this solution.
But it's pretty cool ;)

--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....

Mick White

2006-04-18, 10:29 pm

Darrel wrote:
> My javascript is far from being well written, but I manage to hack my way
> through it.
>
> One bad habit is that I still rely on the ONLOAD even handler in the BODY
> tag way too much. I want to start using a proper unobtrusive function to
> handle this instead.
>
> There seems to be a couple of ways to do this. Here's one example:
>
> http://www.onlinetools.org/articles...t/chapter4.html
>
> However, I'm finding variations on that as well.
>
> Is there a commonly accepted function that everyone uses these days?
>
> -Darrel
>
>
onload= function(){
var ELEMENT=document.getElementById("foo");
ELEMENT.onmouseover=function(){
//do something with ELEMENT (Referred to as "this")
this.style.backgroundColor="red"
}
ELEMENT.onmouseout=function(){
this.style.backgroundColor="green"
}
myFunction()// invoke a function
}

This can be in xternal file.
Caveat: Will not co-exist with inline body event handler
[<body onload="MyFunction()" ]
Mick

Gary White

2006-04-18, 10:29 pm

On Mon, 17 Apr 2006 01:31:05 -0400, Raizel <raizel@idonotuse.com> wrote:

>I use a great photo gallery offered by my web host (3rd party). With a
>couple clicks, it creates the mysql database, sets up the structure and
>I upload the images. Now, if I could remember the name, I'd tell you
><LAUGH, IT"S LATE>

Here's the one my host has: http://gallery.menalto.com/

Gary

Raizel

2006-04-18, 10:29 pm

In article <913742h8td9n596kjbkq560bi5u3dth8g2@4ax.com>,
Gary White <reply@newsgroup.please> wrote:

> On Mon, 17 Apr 2006 01:31:05 -0400, Raizel <raizel@idonotuse.com> wrote:
>
>
>
> Here's the one my host has: http://gallery.menalto.com/
>
> Gary

THAT"S IT!! Does your host do all the work? Mine does. I just answer a
few questions like what do I want to call it, where to put it and it
does all the dirty work. I've read through their instructions> YIKES I'd
not do it myself :) Problem is, I start these projects and never quite
finish. My photos sit as I uploaded them, partially labelled :( and not
ready for primetime.

Gary White

2006-04-18, 10:29 pm

On Mon, 17 Apr 2006 20:33:31 -0400, Raizel <raizel@idonotuse.com> wrote:

>THAT"S IT!! Does your host do all the work?

Yep. I use Dreamhost and the gallery is on of what they call "one-click
installs" even though you have to answer a few simple questions before
the click.

Gary