On Tuesday 16 January 2007 23:47, Daniel Haller wrote:
Hi Dave,
thanks for your help - from the Author of "Ajax in Action" in person.
Your book is on my Amazon Wishlist for weeks, really...
I'm really impressed :-)
shucks, you'll make me blush...
But your example brings me to a quite pragmatic question...:
How can I access variables from the inline-function?
Here's what I got now:
/* ----------------- */
Event.observe($('notice'),'mousemove', function() {
posX = $('notice').offsetLeft;
posY = $('notice').offsetTop;
$('notice_content').innerHTML = posX+"/"+posY; }
)
/* ----------------- */
posX and posY are now storing the correct position of my element, I can
check this by printing them out via innerHTML.
But if I try to use posX/posY OUTSIDE of the Event.observe (f.e. with a
simple alert(posX)), JS throws an error "posX not defined".
Is there a good way to handle this? I'm pretty new to JS/DOM Scripting,
so please excuse if this is a newbie question... :-/
The simple solution is to declare posX and posY as global variables, i.e.
<html>
<head>
<script type='text/javascript' src='prototype/prototype.js'></script>
<script type='text/javascript' src='scriptaculous/scriptaculous.js'></script>
</head>
<body>
<div id='el1'>I'm element 1</div>
<div id='el2'>I'm element 2</div>
<script type='text/javascript'>
var posX=null; // HERE'S THE GLOBAL VARS
var posY=null;
var el=$("el1");
el.style.border='solid red 2px';
new Draggable(el);
var el2=$("el2");
el2.style.backgroundColor='gray';
Event.observe(
el,'mousemove',
function(){
posX=el.offsetLeft; //SET THEM HERE
posY=el.offsetTop;
el2.innerHTML=posX+" x "+posY;
}
);
function alertCoords(){
alert("coordinates are ["+posX+","+posY+"]");
}
</script>
<a href='javascript:alertCoords()'>get Coords</a>
</body>
</html>
In the anonymous mousemove function, I set the values of these globals. I've
then added a second function called alertCoords(), which will make use of
them (I imagine you'll want to do something more sophisticated than alert(),
but you get the idea...). I've then added a hyperlink to let you call that
alertCoord() function, just to check that it all works correctly.
Scoping rules for JavaScript are fairly unremarkable on the whole (apart from
closures, which I won't go into now). So if you want to access your variables
outside a given scope, declare them outside it. Same approach as a lot of
languages I've come across (PHP is the odd one out here, with the global
keyword, which is always tripping me up.)
Using global variables in this way is a punishable offence from a design
perspective, of course (and, yes, el and el2 are globals too). As your code
grows, you don't want to have hundreds of globals littering up your script,
so roll your code up into objects, or at least define the globals as
higher-level structures, e.g.
var dragPosition={ x: null, y:null };
and then in the event handler
dragPosition.x=el.offsetLeft;
and so on. Overkill in a little example like this, maybe, but a goosd habit to
get into for when your code is big enough to fit into several .js files, or
might be reused across multiple projects. Again, that's a general principle,
rather than a Javascript-specific issue.
HTH
Dave
----------------------
Author
Ajax in Action http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous Quickly http://manning.com/crane3
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby on
Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
