Javascript: can't detect onresize event?

Greetings, I've tried a variety of different things, but neither IE nor Firefox seem to trigger an onresize event when the window is, well, resized. Test code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml">  <body onresize = "regenerate( )" > <script type = "text/javascript"> /* ...nor this... */ window.onresize = "regenerate( )"; function regenerate( ) { alert( "regenerate( )" ); } </script> </body> </html>

Any ideas?

I got nothing until I removed the quotes:

Code:

window.onresize = regenerate( );

This causes the alert to fire on page load, but still not on resize in Safari.

Here you go:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml">  <head> <script type="text/javascript"> function regenerate(parm ) { alert( parm ); return true ; } </script> </head> <body onresize="regenerate('onresize');" onload="regenerate('onload');"> <script type = "text/javascript"> regenerate('body' ); </script> </body> </html>

It was the spaces between "onresize = "regenerate()". Go figure.

Got it! Removing the quotes was a step in the right direction - then you just need to assign it to the function (without invoking it).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <body> <script type = "text/javascript"> /* Works like a charm! */ window.onresize = regenerate; function regenerate( ) { alert( "regenerate( )" ); } </script> </body> </html>

Thanks for the important clue, Dino. :)

Quote:

Originally Posted by Dino

Here you go:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml">  <head> <script type="text/javascript"> function regenerate(parm ) { alert( parm ); return true ; } </script> </head> <body onresize="regenerate('onresize');" onload="regenerate('onload');"> <script type = "text/javascript"> regenerate('body' ); </script> </body> </html>

It was the spaces between "onresize = "regenerate()". Go figure.

Ahhh - the spaces! Your right, it works great. Thanks again.

you should check out jQuery to do your event binding, makes it a lot more uniform and you can seperate the implementation away from the page itself.

Seconded on jQuery.

Quote:

Originally Posted by Dino

I got nothing until I removed the quotes:

Code:

window.onresize = regenerate( );

This causes the alert to fire on page load, but still not on resize in Safari.

It fires there cause you just invoked it right at load time.

The problem wasn't the whitespace - that makes no sense. The problem was the declaration. You should declare all of your JS in the <head>'er. JS in <head> is parsed onready, JS in <body> is parsed onload. It's weird, but in certain cases you can't use something before it's declared when in <body>. It's best to keep head JS and body JS independent of eachother, or use onready/load correctly. In this case, <body onresize=""> wouldn't work because regenerate was declared in the body. Move it up into the head, and it works. Setting window.onresize to the eval string doesn't seem to work period.

You're doing it the correct way now, but all you had to do was move the script tag, it would have worked, however incorrect, see:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml">  <script type = "text/javascript"> /* ...nor this... */ window.onresize = "regenerate( )"; function regenerate( ) { alert( "regenerate( )" ); } </script> <body onresize = "regenerate( )" > </body> </html>

Quote:

Originally Posted by Dae

The problem wasn't the whitespace - that makes no sense. The problem was the declaration. You should declare all of your JS in the <head>'er. JS in <head> is parsed onready, JS in <body> is parsed onload. It's weird, but in certain cases you can't use something before it's declared when in <body>.

Yo, js is not whitespace sensitive :p

As Dae points out, you are doing the equivalent of calling a function before you define it. You don't have to declare everything in the head, but you should declare as much as possible there.

A problem may arise if you refer to elements which don't exist yet. What I usually do is reference an external script in the head, and then call an initialization function at the bottom of the page (or with onload).

BTW, if you install the "firebug" plug-in for firefox (it takes about 5 seconds) you can get a lot of debugging info viewing the page, eg, in this case it would say "regenerate( ) is not defined" which would give you a big clue.

Okay, well thanks for the tips, guys. Cheers!