Ionut Cioflan
2006-Nov-28 15:09 UTC
Extending Element with getTop, getWidth, getLeft problem
Hi,
I need to extend the Element object with getTop, getWidth, getLeft .
I wrote something like this in an js file and loaded it after the
prototype.js .
----------------------------------------------------
Object.extend(Element, {
getWidth: function(element) {
element = $(element);
return element.offsetWidth;
},
getTop: function(element) {
element = $(element);
var curtop = 0;
if (element.offsetParent) {
while (element.offsetParent) {
curtop += element.offsetTop
element = element.offsetParent;
}
}
else if (element.y)
curtop += element.y;
return curtop;
},
getLeft: function(element) {
element = $(element);
var curleft = 0;
if (element.offsetParent) {
while (element.offsetParent) {
curleft += element.offsetLeft
element = element.offsetParent;
}
}
else if (element.x)
curleft += element.x;
return curleft;
}
});
----------------------------------------------------
I''ve done this thinking that I could use this function like this :
$(this).getTop();
But the only way to access the function was like this
Element.getTop($(this))
----------------------------------------------------
Questions:
1. Have I done something wrong or the extend function doesn''t working
properly ?
2. Why aren''t these functions added by default to Element (only
getHeight() exists) ?
Thank you.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2006-Nov-28 17:57 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
Hey there, Well, your problem is kinda tricky. First, you need to extend Element.Methods, not Element (assuming you use a recent version of Prototype). Second, there is a timing issue. You see, on browsers supporting prototype extension for DOM objects (what Prototype refers to as "_nativeExtensions"), the prototype of HTMLElement is extended at script loading time. Which is, necessarily, *before* any further script file you might use to customize this. So, on such browsers (e.g. Firefox), your extensions come in too late. Basically, if you need this, you have to hack in the actual prototype.js file, by adding your methods (with proper commented delimiters, maybe) straight into the Element.Methods definition. This out of my hat, but that should be it. -- Christophe Porteneuve aka TDD tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Marius Feraru
2006-Nov-29 01:33 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 Ionut Cioflan wrote:> Object.extend(Element, { > getWidth: function(element) { > [...] > }); > Questions: > 1. Have I done something wrong or the extend function doesn''t working > properly ? > 2. Why aren''t these functions added by default to Element (only > getHeight() exists) ?This is the proper way to add your own methods: Element.addMethods({ [your methods here] }); Object.extend(Element, Element.Methods); Element.addMethods(); cheers - -- Marius Feraru -----BEGIN PGP SIGNATURE----- iD8DBQFFbOOAtZHp/AYZiNkRAqYJAKCqsuakBO3vVZOB7KUSWRxACsuLyACfaz+H oSz4NKvkaHgTgvfBqzLq7rs=LkzL -----END PGP SIGNATURE----- --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
On Nov 28, 4:09 pm, "Ionut Cioflan" <ionut.ciof...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> 2. Why aren''t these functions added by default to Element (only > getHeight() exists) ?Probably in favor of getStyle() --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Eric Harrison
2006-Nov-29 10:30 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
I''m fairly certain that in Prototype 1.5.0_rc0 and up, you just have
to call Element.addMethods(). The
Object.extend(Element,Element.Methods); is redundant. Every time
Element.addMethods() is called, all elements accessed via $() (or any
other prototype specific element selector (like Event.element(event),
etc) all will have their own methods applied as well as any methods
you''ve provided via Element.addMethods()
My example:
Element.addMethods({
visible: function(element) {
return $(element).getStyle(''display'') ==
''none'' ? false : true;
}
});
That''s all it takes in our scripts to have the visible() method of an
element be overwritten to actually use the getStyle() method instead
of the manual .style.display attribute.
-E
On 11/28/06, Marius Feraru <altblue-9gptZ63fvgw@public.gmane.org>
wrote:>
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> Ionut Cioflan wrote:
> > Object.extend(Element, {
> > getWidth: function(element) {
> > [...]
> > });
> > Questions:
> > 1. Have I done something wrong or the extend function doesn''t
working
> > properly ?
> > 2. Why aren''t these functions added by default to Element
(only
> > getHeight() exists) ?
>
> This is the proper way to add your own methods:
>
> Element.addMethods({
> [your methods here]
> });
> Object.extend(Element, Element.Methods);
> Element.addMethods();
>
> cheers
> - --
> Marius Feraru
> -----BEGIN PGP SIGNATURE-----
>
> iD8DBQFFbOOAtZHp/AYZiNkRAqYJAKCqsuakBO3vVZOB7KUSWRxACsuLyACfaz+H
> oSz4NKvkaHgTgvfBqzLq7rs> =LkzL
> -----END PGP SIGNATURE-----
>
> >
>
--
Eric Ryan Harrison, Developer
model13 Designs
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Eric Harrison wrote:> I''m fairly certain that in Prototype 1.5.0_rc0 and up, you just have > to call Element.addMethods(). The > Object.extend(Element,Element.Methods); is redundant. Every time > Element.addMethods() is called, all elements accessed via $() (or any > other prototype specific element selector (like Event.element(event), > etc) all will have their own methods applied as well as any methods > you''ve provided via Element.addMethods() > > My example: > > Element.addMethods({ > visible: function(element) { > return $(element).getStyle(''display'') == ''none'' ? false : true; > } > }); > > That''s all it takes in our scripts to have the visible() method of an > element be overwritten to actually use the getStyle() method instead > of the manual .style.display attribute.Prototype 1.5.0_rc1 already has that method: Element.Methods = { visible: function(element) { return $(element).style.display != ''none''; }, ... Surely a method that returns the value of the element''s CSS display property should be called "display"? Or ''elementDisplayNone''? The name is misleading, not only does it not test the visibility property, it doesn''t actually test if the element is visible or not. -- Fred --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Marius Feraru
2006-Nov-29 14:19 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 Eric Harrison wrote:> I''m fairly certain that in Prototype 1.5.0_rc0 and up, you just have > to call Element.addMethods(). The > Object.extend(Element,Element.Methods); is redundant.Not really, as you wont be able to use Element.foobar(''element'', ...) without it, only $(''element'').foobar(...) will be available. Not a bad thing though, but it would keep many folks happy ;-) - -- Marius Feraru -----BEGIN PGP SIGNATURE----- iD8DBQFFbZb6tZHp/AYZiNkRAm74AJ4lCLv87T/8YU4koiDaOeb1N1nQswCg+OnW ZiFx+h97mBGqCr24YG3P/zk=mzU9 -----END PGP SIGNATURE----- --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Eric Harrison
2006-Dec-01 12:13 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
No, that''s not true. By using Element.addMethods(), it will be
automatically extended with $().
And the reason I am using my version of visible instead of the default
visible that comes with prototype is that I''m using the prototype
native getStyle() method so that the computation occurs on the
rendered style of the element instead of just on what is set
explicitly inside .style.display. If I set display: none; in a CSS
class declaration for an element, .visible() will return the wrong
value as the .style.display attribute is NOT set by a CSS class
attribute.
Make sense?
As proof that the Object.extend is not needed for Element.addMethods,
here is the relevant code:
1454 Element.addMethods = function(methods) {
1455 Object.extend(Element.Methods, methods || {});
1456
1457 function copy(methods, destination, onlyIfAbsent) {
1458 onlyIfAbsent = onlyIfAbsent || false;
1459 var cache = Element.extend.cache;
1460 for (var property in methods) {
1461 var value = methods[property];
1462 if (!onlyIfAbsent || !(property in destination))
1463 destination[property] = cache.findOrStore(value);
1464 }
1465 }
1466
1467 if (typeof HTMLElement != ''undefined'') {
1468 copy(Element.Methods, HTMLElement.prototype);
1469 copy(Element.Methods.Simulated, HTMLElement.prototype, true);
1470 copy(Form.Methods, HTMLFormElement.prototype);
1471 [HTMLInputElement, HTMLTextAreaElement,
HTMLSelectElement].each(function(klass) {
1472 copy(Form.Element.Methods, klass.prototype);
1473 });
1474 _nativeExtensions = true;
1475 }
1476 }
The first thing Element.addMethods() does (on line 1455) is extend
Element.Methods with whatever methods you pass. Now all of the element
extenders built into the element getter function calls $(), $$(), etc,
all work automatically. Extending an object (Element.Methods) twice is
a lot of unnecessary overhead for JS.
-E
On 11/29/06, Marius Feraru <altblue-9gptZ63fvgw@public.gmane.org>
wrote:>
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> Eric Harrison wrote:
> > I''m fairly certain that in Prototype 1.5.0_rc0 and up, you
just have
> > to call Element.addMethods(). The
> > Object.extend(Element,Element.Methods); is redundant.
>
> Not really, as you wont be able to use
> Element.foobar(''element'', ...)
> without it, only
> $(''element'').foobar(...)
> will be available.
>
> Not a bad thing though, but it would keep many folks happy ;-)
>
> - --
> Marius Feraru
> -----BEGIN PGP SIGNATURE-----
>
> iD8DBQFFbZb6tZHp/AYZiNkRAm74AJ4lCLv87T/8YU4koiDaOeb1N1nQswCg+OnW
> ZiFx+h97mBGqCr24YG3P/zk> =mzU9
> -----END PGP SIGNATURE-----
>
> >
>
--
Eric Ryan Harrison, Developer
model13 Designs
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Eric Harrison wrote: [...]> And the reason I am using my version of visible instead of the default > visible that comes with prototype is that I''m using the prototype > native getStyle() method so that the computation occurs on the > rendered style of the element instead of just on what is set > explicitly inside .style.display. If I set display: none; in a CSS > class declaration for an element, .visible() will return the wrong > value as the .style.display attribute is NOT set by a CSS class > attribute. > > Make sense?No. Because that still doesn''t tell you whether the element is visible or not, or what the value of its visibility property is set to (either computed or set). -- Fred --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Marius Feraru
2006-Dec-02 05:37 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 Eric Harrison wrote:> No, that''s not true.What''s not true? :)> 1454 Element.addMethods = function(methods) { > 1455 Object.extend(Element.Methods, methods || {}); > > The first thing Element.addMethods() does (on line 1455) is extend > Element.Methods with whatever methods you pass.C''mon, we were talking about a different animal. :) You are talking about extending "Element.Methods", while your assessment was about the redundancy of extending "Element".> On 11/29/06, Marius Feraru <altblue-9gptZ63fvgw@public.gmane.org> wrote: > Eric Harrison wrote: >>>> I''m fairly certain that in Prototype 1.5.0_rc0 and up, >>>> you just have to call Element.addMethods(). The >>>> Object.extend(Element,Element.Methods); is redundant.^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^> Not really, as you wont be able to use > Element.foobar(''element'', ...) > without it, only > $(''element'').foobar(...) > will be available.> Extending an object (Element.Methods) twice is a lot of unnecessary > overhead for JS.Check the last line of prototype.js ;-) cheers - -- Marius Feraru -----BEGIN PGP SIGNATURE----- iD8DBQFFcRECtZHp/AYZiNkRAo7XAKCWrInXrlenhd1tmAs4C4D+RbBWxACZATck nk3UTXjeqYvvD7WomIcY5i4=2b86 -----END PGP SIGNATURE----- --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Ionut Cioflan
2006-Dec-05 14:39 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
It works ! Thx, for this tip ( Element.addMethods() ) ! IOn. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Eric Harrison
2006-Dec-05 21:17 UTC
Re: Extending Element with getTop, getWidth, getLeft problem
You''re welcome. -E On 12/5/06, Ionut Cioflan <ionut.cioflan-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > It works ! > > Thx, for this tip ( Element.addMethods() ) ! > > IOn. > > > > >-- Eric Ryan Harrison, Developer model13 Designs --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---