Hi all first time im posting here, hope what i''ve written is clear. I''m trying to make a popup work using event.observe for all anchor tags with the CSS selector ''popup''. in the HTML i have this: < a href="somelink.php" class="popup">Click to go someplace </a> in my javascript I have a: Event.observe(window, ''load'', function (){ }); wrapper with code inside the event.observe code inside 1. heres the 1st method I tried: $$(''a.popout'').each( function(thePopout) { Event.observe( thePopout, ''click'', popout); } ); function popout() { window.open(this.href, this.innerHTML, ''width=500,height=500''); return false; } ----------------------- In IE i get a popup window with a 404 error. Seems like the ''this'' reference isnt having the right effect In Firefox I get the correct popup window however the original page also changes to the href location. Seems like return false; isnt having the desired effect. ------------------- 2. the second method I tried $$(''a.popout'').each( function(thePopout) { Event.observe( thePopout, ''click'', popout); } ); function popout(event) { var element = Event.element(event); window.open(element.href, element.innerHTML, ''toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=yes,copyhistory=no,width=500,height=500''); return false; } ------------------------------------ In IE everything works great!! In Firefox I still get the same problem as before, it appears as if the return false; at the end of the function is not working to tell firefox not to follow the link ----------------------------------- I have also tried using an anomyomous function within Event.observe and just to ease my brain, i tried this: $$(''a.popout'').each( function(s) { Event.observe( s, ''click'', popout.bindAsEventListener(s) ) } ); which shouldnt be any different to a standard event.observe, and isn''t! thanks for reading, any insights would be much appreciated. The reason im doing it this way and not in the html : < a href="somelink.php" class="popup" onclick="popup(); return false;">Click to go someplace </a> is to keep the html and javascript separate and to make changing normal links to popups really easy in the future (and to style the popups differently to normal links) --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Walter Lee Davis
2007-Aug-16 03:10 UTC
Re: prototype: Event.observe ''click'' for $$(''a.popout'')
On Aug 15, 2007, at 10:15 PM, wal5hy wrote:> ------------------------------------ > In IE everything works great!! > In Firefox I still get the same problem as before, it appears as if > the return false; at the end of the function is not working to tell > firefox not to follow the link > -----------------------------------This part I can help you with. Use Event.stop() instead of return false. That''s the cross-browser way to stop the event from bubbling up. Walter --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Christian Schaefer
2007-Aug-16 06:36 UTC
Re: prototype: Event.observe ''click'' for $$(''a.popout'')
hi wal5hy, three thought on this: 1. events you observe do not act like events you assign a single callback to. while element.onclick = function(){return false;} has the desired effect, it won''t have it when using Event.observe() because observed events are not finished when the callback is through. this way you can have more than one callback observing the same event. walter is right Event.stop() will help you. 2. you have a scope problem. when popup() is called your ''this'' will not necessarily point to the anchor. it will more likely loose its scope and point to window instead. you want to look up bindAsEventListener()[1] it will help you. 3. instead of this $$(''a.popout'').each(function(thePopout){Event.observe(thePopout,''click'',popout);}); you could just use $$(''a.popout'').invoke(''observe'', ''click'', popout); which does the same here but imho is more elegant. no error though. cheers /christian [1] http://prototypejs.org/api/function/bindAsEventListener --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Or you could just switch over to using the new prototype 1.6_rc0 that has been released which takes care of correcting the ''this'' scope and also extends the event object so you can just use e.stop(). So the following should work (note: not actually tried - just off the top of my head) $$(''a.popout'').invoke(''observe'', ''click'', popout); function popout(e) { window.open(this.href, this.innerHTML, ''width=500,height=500''); e.stop(); } On Aug 15, 11:36 pm, Christian Schaefer <cae...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> hi wal5hy, > > three thought on this: > > 1. events you observe do not act like events you assign a single > callback to. while element.onclick = function(){return false;} has the > desired effect, it won''t have it when using Event.observe() because > observed events are not finished when the callback is through. this way > you can have more than one callback observing the same event. > walter is right Event.stop() will help you. > > 2. you have a scope problem. when popup() is called your ''this'' will not > necessarily point to the anchor. it will more likely loose its scope and > point to window instead. you want to look up bindAsEventListener()[1] > it will help you. > > 3. instead of this > $$(''a.popout'').each(function(thePopout){Event.observe(thePopout,''click'',popout);}); > you could just use > $$(''a.popout'').invoke(''observe'', ''click'', popout); > which does the same here but imho is more elegant. no error though. > > cheers > /christian > > [1]http://prototypejs.org/api/function/bindAsEventListener--~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks for all these great and quick replies, I''ll give them all a try now and let you know what I find. --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---