The page loads, listen for a click on the 'emailus' link and pass the
two variables col2 and col3 to the function getContentAlt. Here is the
code
Event.observe(window, 'load', function() {
var col2 = '/includes/content/contact-col-2.php';
var col3 = '/includes/content/contact-col-3.php';
Event.observe('emailus', 'click', getContentAlt(col2, col3));
});
Now here is getContentAlt. You can see that the first the function
checks for is if the link has a class name of 'current'. So I am
unclear of how I pass 'this' to the function so it knows what link the
user clicked on?
function getContentAlt(col2, col3) {
if ($(this).hasClassName('current')) {
return false;
}
else {
if($('slideshow')){
$('slideshow').remove();
}
new Effect.Opacity('footer', { duration: .5, to: 0 });
new Effect.Opacity('content', { duration: .5, to: 0,
afterFinish:
function() {
new Ajax.Updater('content', col3, {
method:'get',
evalScripts: true,
onComplete:function(){
getColHeight();
new Effect.Opacity('content', { duration: .5, to: 1 });
if($('contact')){
loadAction();
}
}
});
}});
new Effect.Opacity('container', { duration: .5, to: 0,
afterFinish: function() {
new Ajax.Updater('container', col2, {
method:'get',
onComplete:function(){
getColHeight();
new Effect.Opacity('container', { duration: .5, to: 1 });
new Effect.Opacity('footer', { duration: .5, to: 1 });
}
});
}});
removeClassCurrent();
$(this).toggleClassName('current');
return false;
};
}
on 2008-04-18 05:34
on 2008-04-18 06:10
> Event.observe(window, 'load', function() { It might be better to listen to 'dom:loaded' event on a document (since it fires as soon as DOM is ready) > Event.observe('emailus', 'click', getContentAlt(col2, col3)); Event.observe needs a function reference as a third argument. You probably meant to do: Event.observe('emailus', 'click', function(){ getContentAlt(col2, col3) }); // or $('emailus').observe('click', function() { getContentAlt(col2, col3) }); > function getContentAlt(col2, col3) { > > if ($(this).hasClassName('current')) { > > return false; > > } return false; wouldn't work in Event.observe. You need to use Event.stop(event). Best, kangax
on 2008-04-18 06:22
To add to kangax's reply, it is possible to pass in additional
parameters to the bindAsEventListener call and they will be passed
down to your observing function via additional parameters. Keep in
mind though that the first argument will always be the fired event
object. Here is a small example with a few extra ideas to play with:
var Sample = {
initialize: function(){
$('some_id').observe('click',
this.clicked.bindAsEventListener(this, 'Hello'));
},
clicked: function(event, something){
// at this point, 'this' will refer to the instance of the Sample
object
event.stop(); // if you want to
alert(something); // will be "Hello"
this.somethingElse();
},
somethingElse: function(){
alert('Hey there');
}
};
-justin
on 2008-04-18 18:23
Maybe I am confused as to where to put Event.stop(event) because the link still gets followed.
on 2008-04-19 00:07
Thanks for the added reply Justin, although I am just confused now. I
think I need some newbie hand holding.
Maybe I should explain the ultimate goal. The function getContentAlt
set up to be reusable. I pass variables col2 and col3 depending on
which link is clicked. I would set up multiple Event.observe's for
this.That function needs to know what 'this' is because the first if
statement tests to see if the class name is 'current' or not. if it
is, it does not follow through with the function and does not follow
the link.
Right now the function does not know what 'this' is I presume, because
I get this error....
$(this).hasClassName is not a function
getContentAlt("/includes/content/contact-col-2.php", "/includes/
content/contact-col-3.php")functions.js (line 369)
(no name)()
wrapper(click clientX=0, clientY=0)
if ($(this).hasClassName('current')) {
on 2008-04-19 00:45
On Fri, Apr 18, 2008 at 12:04 AM, anathema <spamfreeuniverse@gmail.com> wrote: > > Thanks for the added reply Justin, although I am just confused now. Sorry about that. > $(this).hasClassName is not a function Unless you're talking about instances of objects, which you clearly are not talking about, 'this' is nothing you need to dabble with, nor is it used like you are trying to do in this case. When you say $(this), what are you expecting that object to be? Why are you even using it? -justin
on 2008-04-19 03:06
I am expecting it to be the link clicked. The function tests to see what the class name of the link is. I actually have all of this working with behaviour.js (not sure if you are familiar). I was just trying to remove the dependency for that script and do it all with event listeners instead.
on 2008-06-29 09:07
Hi anathema, sorry if my post is too late :-) , i hope you have already
found the answer.
Here is the source code (except prototype.js of course) to get your
"this"
<html>
<head>
<script type="text/javascript"
src="prototype/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
function getContentAlt(event, col2, col3){
alert(event); // your event
alert(Event.element(event)); // your "this", the element clicked
alert(Event.element(event).id); // element's id makes sure you get
the right element
Event.stop(event); // stop event
// do what you want to do
}
Event.observe(document, 'dom:loaded', function(){
var col2 = '/includes/content/contact-col-2.php';
var col3 = '/includes/content/contact-col-3.php';
Event.observe('link1', 'click',
getContentAlt.bindAsEventListener(false, col2, col3));
Event.observe('link2', 'click',
getContentAlt.bindAsEventListener(false, col2, col3));
Event.observe('link3', 'click',
getContentAlt.bindAsEventListener(false, col2, col3));
Event.observe('link4', 'click',
getContentAlt.bindAsEventListener(false, col2, col3));
});
</script>
</head>
<body>
<a id="link1" href="somefile1.html">Link 1</a><br />
<a id="link2" href="somefile2.html">Link 2</a>
<div id="link3">Link 3</div>
<span id="link4">Link 4</span>
</body>
</html>
Enable email notification
Enable multi-page view