I''ve created a custom tooltip function to be used on a website.
I''m
trying to code it in such a way that by giving any img tag an
attribute with tooltip="productid" it will attach the correct
onmouseover and onmouseout event.
Here is the code:
loadEvents: function() {
var images = document.getElementsByTagName("img");
var myElement = null;
var myProductID = 0;
for (var i = 0; i < images.length; i++) {
myElement = images[i];
if (myElement.hasAttribute("tooltip")) {
myProductID = myElement.getAttribute("tooltip");
Event.observe(myElement, ''mouseover'', function()
{ productTooltip.show(myProductID,myElement); });
Event.observe(myElement, ''mouseout'', function()
{ productTooltip.hide(); });
}
}
}
What this is doing is looping through all the imgs on the page and
finding any of the ones that have the tooltip attribute, then usinv
Event.observe to attach the onmouseover and onmouseout events. But the
problem is with the onmouseover I need to pass it two arguments, the
product ID which I get from the tooltip attribute and then I need to
pass it a reference to that particular element so my show() function
knows how to position the tooltip.
After this function is run, it correctly attaches an onmouseover and
onmouseout event to all of the neccessary images that have the tooltip
attribute, except it passes the product ID and element reference of
the last tooltip image that was processed. So if I had 3 tooltip
images on the page, all 3 mouseovers will run the show() function
using the third images ID and element reference.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
The first thing I notice is that you''re performing some extra work by
getting all of the images on the page and then looking for the ones that
have the necessary tooltip attribute. Instead, I would do this to get
only those which have the tooltip attribute:
var images = $$("img[tooltip]");
Then, rather than storing a reference to that list of images, I''d the
each() function to iterate through the list and apply your actions:
$$("img[tooltip]").each(function(image) {
/* ... do tooltip stuff ... */
});
It looks to me that the reason your tooltips always show the last one''s
information is because the myProductID gets overwritten by each
iteration of the loop. It might be more appropriate, though I''m sure
someone else will correct me if I''m wrong, to pass only the element
itself to the show method of your tooltip, and then you can use the
readAttribute() function within show() to get at the productID for the
specified element:
$$("img[tooltip]).each(function(image) {
image.observe("mouseover", function() {
productTooltip.show(image) });
image.observe("mouseout", function() { productTooltip.hide })
});
And the last thing I think you should be able to do, then, is bind the
functions to the image rather than pass it around. I don''t know if
you''re familiar with the bind() function of prototype, but this looks
like a good time to learn about it if you don''t. Something like this
will probably be what you''re looking for:
$$("img[tooltip]").each(function(image) {
image.observe("mouseover", productTooltip.show.bind(image));
image.observe("mouseout", productTooltip.hide.bind(image));
}
What the bind() function does is makes sure that the called function is
executed using the scope of the object which is passed to the bind()
function as a parameter, in this case, the image. In other words,
within the show() and hide() functions you can use the "this" keyword
to
refer to the image to which the function was bound rather than having to
actually pass around references to the images
themselves. Thus, your show() function would be able to do this ...
var show = function() {
var myProductID = this.readAttribute("tooltip");
/* ... do other stuff ... */
}
... instead of having to be passed the product ID explicitly.
- Dash -
Cgnost wrote:> I''ve created a custom tooltip function to be used on a website.
I''m
> trying to code it in such a way that by giving any img tag an
> attribute with tooltip="productid" it will attach the correct
> onmouseover and onmouseout event.
>
> Here is the code:
>
> loadEvents: function() {
> var images = document.getElementsByTagName("img");
> var myElement = null;
> var myProductID = 0;
> for (var i = 0; i < images.length; i++) {
> myElement = images[i];
> if (myElement.hasAttribute("tooltip")) {
> myProductID = myElement.getAttribute("tooltip");
> Event.observe(myElement, ''mouseover'', function()
> { productTooltip.show(myProductID,myElement); });
> Event.observe(myElement, ''mouseout'', function()
> { productTooltip.hide(); });
> }
> }
> }
>
> What this is doing is looping through all the imgs on the page and
> finding any of the ones that have the tooltip attribute, then usinv
> Event.observe to attach the onmouseover and onmouseout events. But the
> problem is with the onmouseover I need to pass it two arguments, the
> product ID which I get from the tooltip attribute and then I need to
> pass it a reference to that particular element so my show() function
> knows how to position the tooltip.
>
> After this function is run, it correctly attaches an onmouseover and
> onmouseout event to all of the neccessary images that have the tooltip
> attribute, except it passes the product ID and element reference of
> the last tooltip image that was processed. So if I had 3 tooltip
> images on the page, all 3 mouseovers will run the show() function
> using the third images ID and element reference.
>
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
David, you are a lifesaver. Not only does it work perfectly now but it
also fits into 4 lines of code.
loadEvents: function() {
$$("img[tooltip]").each(function(image) {
image.observe("mouseover", productTooltip.show.bind(image));
image.observe("mouseout", productTooltip.hide.bind(image));
});
}
I figured I needed to learn something about bind or
bindAsEventListener, but it went completely over my head and the
examples in the API didn''t really cover what I needed.
Thanks so much.
On Jun 13, 5:49 pm, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> The first thing I notice is that you''re performing some extra work
by
> getting all of the images on the page and then looking for the ones that
> have the necessary tooltip attribute. Instead, I would do this to get
> only those which have the tooltip attribute:
>
> var images = $$("img[tooltip]");
>
> Then, rather than storing a reference to that list of images, I''d
the
> each() function to iterate through the list and apply your actions:
>
> $$("img[tooltip]").each(function(image) {
> /* ... do tooltip stuff ... */
>
> });
>
> It looks to me that the reason your tooltips always show the last
one''s
> information is because the myProductID gets overwritten by each
> iteration of the loop. It might be more appropriate, though I''m
sure
> someone else will correct me if I''m wrong, to pass only the
element
> itself to the show method of your tooltip, and then you can use the
> readAttribute() function within show() to get at the productID for the
> specified element:
>
> $$("img[tooltip]).each(function(image) {
> image.observe("mouseover", function() {
> productTooltip.show(image) });
> image.observe("mouseout", function() { productTooltip.hide
})
> });
>
> And the last thing I think you should be able to do, then, is bind the
> functions to the image rather than pass it around. I don''t know
if
> you''re familiar with the bind() function of prototype, but this
looks
> like a good time to learn about it if you don''t. Something like
this
> will probably be what you''re looking for:
>
> $$("img[tooltip]").each(function(image) {
> image.observe("mouseover",
productTooltip.show.bind(image));
> image.observe("mouseout",
productTooltip.hide.bind(image));
> }
>
> What the bind() function does is makes sure that the called function is
> executed using the scope of the object which is passed to the bind()
> function as a parameter, in this case, the image. In other words,
> within the show() and hide() functions you can use the "this"
keyword to
> refer to the image to which the function was bound rather than having to
> actually pass around references to the images
> themselves. Thus, your show() function would be able to do this ...
>
> var show = function() {
> var myProductID = this.readAttribute("tooltip");
> /* ... do other stuff ... */
>
> }
>
> ... instead of having to be passed the product ID explicitly.
>
> - Dash -
>
> Cgnost wrote:
> > I''ve created a custom tooltip function to be used on a
website. I''m
> > trying to code it in such a way that by giving any img tag an
> > attribute with tooltip="productid" it will attach the
correct
> > onmouseover and onmouseout event.
>
> > Here is the code:
>
> > loadEvents: function() {
> > var images =
document.getElementsByTagName("img");
> > var myElement = null;
> > var myProductID = 0;
> > for (var i = 0; i < images.length; i++) {
> > myElement = images[i];
> > if (myElement.hasAttribute("tooltip")) {
> > myProductID =
myElement.getAttribute("tooltip");
> > Event.observe(myElement,
''mouseover'', function()
> > { productTooltip.show(myProductID,myElement); });
> > Event.observe(myElement,
''mouseout'', function()
> > { productTooltip.hide(); });
> > }
> > }
> > }
>
> > What this is doing is looping through all the imgs on the page and
> > finding any of the ones that have the tooltip attribute, then usinv
> > Event.observe to attach the onmouseover and onmouseout events. But the
> > problem is with the onmouseover I need to pass it two arguments, the
> > product ID which I get from the tooltip attribute and then I need to
> > pass it a reference to that particular element so my show() function
> > knows how to position the tooltip.
>
> > After this function is run, it correctly attaches an onmouseover and
> > onmouseout event to all of the neccessary images that have the tooltip
> > attribute, except it passes the product ID and element reference of
> > the last tooltip image that was processed. So if I had 3 tooltip
> > images on the page, all 3 mouseovers will run the show() function
> > using the third images ID and element reference.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Do you understand bind/bindAsEventListener now or is it still confusing? - Dash - Charles G. wrote:> David, you are a lifesaver. Not only does it work perfectly now but it > also fits into 4 lines of code. > > loadEvents: function() { > $$("img[tooltip]").each(function(image) { > image.observe("mouseover", productTooltip.show.bind(image)); > image.observe("mouseout", productTooltip.hide.bind(image)); > }); > } > > I figured I needed to learn something about bind or > bindAsEventListener, but it went completely over my head and the > examples in the API didn''t really cover what I needed. > > Thanks so much. > > On Jun 13, 5:49 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > >> The first thing I notice is that you''re performing some extra work by >> getting all of the images on the page and then looking for the ones that >> have the necessary tooltip attribute. Instead, I would do this to get >> only those which have the tooltip attribute: >> >> var images = $$("img[tooltip]"); >> >> Then, rather than storing a reference to that list of images, I''d the >> each() function to iterate through the list and apply your actions: >> >> $$("img[tooltip]").each(function(image) { >> /* ... do tooltip stuff ... */ >> >> }); >> >> It looks to me that the reason your tooltips always show the last one''s >> information is because the myProductID gets overwritten by each >> iteration of the loop. It might be more appropriate, though I''m sure >> someone else will correct me if I''m wrong, to pass only the element >> itself to the show method of your tooltip, and then you can use the >> readAttribute() function within show() to get at the productID for the >> specified element: >> >> $$("img[tooltip]).each(function(image) { >> image.observe("mouseover", function() { >> productTooltip.show(image) }); >> image.observe("mouseout", function() { productTooltip.hide }) >> }); >> >> And the last thing I think you should be able to do, then, is bind the >> functions to the image rather than pass it around. I don''t know if >> you''re familiar with the bind() function of prototype, but this looks >> like a good time to learn about it if you don''t. Something like this >> will probably be what you''re looking for: >> >> $$("img[tooltip]").each(function(image) { >> image.observe("mouseover", productTooltip.show.bind(image)); >> image.observe("mouseout", productTooltip.hide.bind(image)); >> } >> >> What the bind() function does is makes sure that the called function is >> executed using the scope of the object which is passed to the bind() >> function as a parameter, in this case, the image. In other words, >> within the show() and hide() functions you can use the "this" keyword to >> refer to the image to which the function was bound rather than having to >> actually pass around references to the images >> themselves. Thus, your show() function would be able to do this ... >> >> var show = function() { >> var myProductID = this.readAttribute("tooltip"); >> /* ... do other stuff ... */ >> >> } >> >> ... instead of having to be passed the product ID explicitly. >> >> - Dash - >> >> Cgnost wrote: >> >>> I''ve created a custom tooltip function to be used on a website. I''m >>> trying to code it in such a way that by giving any img tag an >>> attribute with tooltip="productid" it will attach the correct >>> onmouseover and onmouseout event. >>> >>> Here is the code: >>> >>> loadEvents: function() { >>> var images = document.getElementsByTagName("img"); >>> var myElement = null; >>> var myProductID = 0; >>> for (var i = 0; i < images.length; i++) { >>> myElement = images[i]; >>> if (myElement.hasAttribute("tooltip")) { >>> myProductID = myElement.getAttribute("tooltip"); >>> Event.observe(myElement, ''mouseover'', function() >>> { productTooltip.show(myProductID,myElement); }); >>> Event.observe(myElement, ''mouseout'', function() >>> { productTooltip.hide(); }); >>> } >>> } >>> } >>> >>> What this is doing is looping through all the imgs on the page and >>> finding any of the ones that have the tooltip attribute, then usinv >>> Event.observe to attach the onmouseover and onmouseout events. But the >>> problem is with the onmouseover I need to pass it two arguments, the >>> product ID which I get from the tooltip attribute and then I need to >>> pass it a reference to that particular element so my show() function >>> knows how to position the tooltip. >>> >>> After this function is run, it correctly attaches an onmouseover and >>> onmouseout event to all of the neccessary images that have the tooltip >>> attribute, except it passes the product ID and element reference of >>> the last tooltip image that was processed. So if I had 3 tooltip >>> images on the page, all 3 mouseovers will run the show() function >>> using the third images ID and element reference. >>> > > > > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
I''m still a bit confused about it, although I do understand somewhat
the reasons for needing to use them. It''s more of an issue with not
knowing exactly when I need to use them and best practice for using
it. I had actually tried using bind() in that piece of code before I
posted here but I wasn''t using it correctly.
Also, this.readAttribute("tooltip") doesn''t seem to work in
the show()
function. I had to use this.getAttribute("tooltip") instead. I read
the documentation on readAttribute and I''m pretty sure I''m
using it
correctly, but it keeps erroring on me if I try to replace
getAttribute() with readAttritbute(). Any suggestions? The code is
pretty much identical to what you suggested...
show: function() {
var productID = this.readAttribute("tooltip"); // does NOT work
var productID = this.getAttribute("tooltip"); // DOES work
/* --additional code-- */
}
On Jun 13, 7:30 pm, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Do you understand bind/bindAsEventListener now or is it still confusing?
>
> - Dash -
>
> Charles G. wrote:
> > David, you are a lifesaver. Not only does it work perfectly now but it
> > also fits into 4 lines of code.
>
> > loadEvents: function() {
> > $$("img[tooltip]").each(function(image) {
> > image.observe("mouseover",
productTooltip.show.bind(image));
> > image.observe("mouseout",
productTooltip.hide.bind(image));
> > });
> > }
>
> > I figured I needed to learn something about bind or
> > bindAsEventListener, but it went completely over my head and the
> > examples in the API didn''t really cover what I needed.
>
> > Thanks so much.
>
> > On Jun 13, 5:49 pm, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >> The first thing I notice is that you''re performing some
extra work by
> >> getting all of the images on the page and then looking for the
ones that
> >> have the necessary tooltip attribute. Instead, I would do this to
get
> >> only those which have the tooltip attribute:
>
> >> var images = $$("img[tooltip]");
>
> >> Then, rather than storing a reference to that list of images,
I''d the
> >> each() function to iterate through the list and apply your
actions:
>
> >> $$("img[tooltip]").each(function(image) {
> >> /* ... do tooltip stuff ... */
>
> >> });
>
> >> It looks to me that the reason your tooltips always show the last
one''s
> >> information is because the myProductID gets overwritten by each
> >> iteration of the loop. It might be more appropriate, though
I''m sure
> >> someone else will correct me if I''m wrong, to pass only
the element
> >> itself to the show method of your tooltip, and then you can use
the
> >> readAttribute() function within show() to get at the productID for
the
> >> specified element:
>
> >> $$("img[tooltip]).each(function(image) {
> >> image.observe("mouseover", function() {
> >> productTooltip.show(image) });
> >> image.observe("mouseout", function() {
productTooltip.hide })
> >> });
>
> >> And the last thing I think you should be able to do, then, is bind
the
> >> functions to the image rather than pass it around. I
don''t know if
> >> you''re familiar with the bind() function of prototype,
but this looks
> >> like a good time to learn about it if you don''t.
Something like this
> >> will probably be what you''re looking for:
>
> >> $$("img[tooltip]").each(function(image) {
> >> image.observe("mouseover",
productTooltip.show.bind(image));
> >> image.observe("mouseout",
productTooltip.hide.bind(image));
> >> }
>
> >> What the bind() function does is makes sure that the called
function is
> >> executed using the scope of the object which is passed to the
bind()
> >> function as a parameter, in this case, the image. In other words,
> >> within the show() and hide() functions you can use the
"this" keyword to
> >> refer to the image to which the function was bound rather than
having to
> >> actually pass around references to the images
> >> themselves. Thus, your show() function would be able to do this
...
>
> >> var show = function() {
> >> var myProductID = this.readAttribute("tooltip");
> >> /* ... do other stuff ... */
>
> >> }
>
> >> ... instead of having to be passed the product ID explicitly.
>
> >> - Dash -
>
> >> Cgnost wrote:
>
> >>> I''ve created a custom tooltip function to be used on
a website. I''m
> >>> trying to code it in such a way that by giving any img tag an
> >>> attribute with tooltip="productid" it will attach
the correct
> >>> onmouseover and onmouseout event.
>
> >>> Here is the code:
>
> >>> loadEvents: function() {
> >>> var images =
document.getElementsByTagName("img");
> >>> var myElement = null;
> >>> var myProductID = 0;
> >>> for (var i = 0; i < images.length; i++) {
> >>> myElement = images[i];
> >>> if
(myElement.hasAttribute("tooltip")) {
> >>> myProductID =
myElement.getAttribute("tooltip");
> >>> Event.observe(myElement,
''mouseover'', function()
> >>> { productTooltip.show(myProductID,myElement); });
> >>> Event.observe(myElement,
''mouseout'', function()
> >>> { productTooltip.hide(); });
> >>> }
> >>> }
> >>> }
>
> >>> What this is doing is looping through all the imgs on the page
and
> >>> finding any of the ones that have the tooltip attribute, then
usinv
> >>> Event.observe to attach the onmouseover and onmouseout events.
But the
> >>> problem is with the onmouseover I need to pass it two
arguments, the
> >>> product ID which I get from the tooltip attribute and then I
need to
> >>> pass it a reference to that particular element so my show()
function
> >>> knows how to position the tooltip.
>
> >>> After this function is run, it correctly attaches an
onmouseover and
> >>> onmouseout event to all of the neccessary images that have the
tooltip
> >>> attribute, except it passes the product ID and element
reference of
> >>> the last tooltip image that was processed. So if I had 3
tooltip
> >>> images on the page, all 3 mouseovers will run the show()
function
> >>> using the third images ID and element reference.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
RE: the lack of readAttribute, if you''re in IE, the image element may
not be extended. you can try ...
$(this).readAttribute("tooltip")
... if you want to.
RE: bind/bindAsEventListener, they just take practice, really. after
you bump into the need for them a few times, you start to get a handle
on things. Also, don''t be afraid to do things in progression like in
my
response earlier in the thread. If you get yourself to a point where
you''re just passing a reference to an object to a function so that you
can access the properties/methods of said object, it might be a good
case for binding rather than passing parameters. To be honest, one of
the other gurus around here would have to speak towards the efficiency
of binding vs. passing objects around; I''m not familiar with the nitty
gritty with respect to that.
- Dash -
Charles G. wrote:> I''m still a bit confused about it, although I do understand
somewhat
> the reasons for needing to use them. It''s more of an issue with
not
> knowing exactly when I need to use them and best practice for using
> it. I had actually tried using bind() in that piece of code before I
> posted here but I wasn''t using it correctly.
>
> Also, this.readAttribute("tooltip") doesn''t seem to work
in the show()
> function. I had to use this.getAttribute("tooltip") instead. I
read
> the documentation on readAttribute and I''m pretty sure
I''m using it
> correctly, but it keeps erroring on me if I try to replace
> getAttribute() with readAttritbute(). Any suggestions? The code is
> pretty much identical to what you suggested...
>
> show: function() {
> var productID = this.readAttribute("tooltip"); // does NOT
work
> var productID = this.getAttribute("tooltip"); // DOES work
> /* --additional code-- */
> }
>
> On Jun 13, 7:30 pm, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>> Do you understand bind/bindAsEventListener now or is it still
confusing?
>>
>> - Dash -
>>
>> Charles G. wrote:
>>
>>> David, you are a lifesaver. Not only does it work perfectly now but
it
>>> also fits into 4 lines of code.
>>>
>>> loadEvents: function() {
>>> $$("img[tooltip]").each(function(image) {
>>> image.observe("mouseover",
productTooltip.show.bind(image));
>>> image.observe("mouseout",
productTooltip.hide.bind(image));
>>> });
>>> }
>>>
>>> I figured I needed to learn something about bind or
>>> bindAsEventListener, but it went completely over my head and the
>>> examples in the API didn''t really cover what I needed.
>>>
>>> Thanks so much.
>>>
>>> On Jun 13, 5:49 pm, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>>>
>>>> The first thing I notice is that you''re performing
some extra work by
>>>> getting all of the images on the page and then looking for the
ones that
>>>> have the necessary tooltip attribute. Instead, I would do this
to get
>>>> only those which have the tooltip attribute:
>>>>
>>>> var images = $$("img[tooltip]");
>>>>
>>>> Then, rather than storing a reference to that list of images,
I''d the
>>>> each() function to iterate through the list and apply your
actions:
>>>>
>>>> $$("img[tooltip]").each(function(image) {
>>>> /* ... do tooltip stuff ... */
>>>>
>>>> });
>>>>
>>>> It looks to me that the reason your tooltips always show the
last one''s
>>>> information is because the myProductID gets overwritten by each
>>>> iteration of the loop. It might be more appropriate, though
I''m sure
>>>> someone else will correct me if I''m wrong, to pass
only the element
>>>> itself to the show method of your tooltip, and then you can use
the
>>>> readAttribute() function within show() to get at the productID
for the
>>>> specified element:
>>>>
>>>> $$("img[tooltip]).each(function(image) {
>>>> image.observe("mouseover", function() {
>>>> productTooltip.show(image) });
>>>> image.observe("mouseout", function() {
productTooltip.hide })
>>>> });
>>>>
>>>> And the last thing I think you should be able to do, then, is
bind the
>>>> functions to the image rather than pass it around. I
don''t know if
>>>> you''re familiar with the bind() function of prototype,
but this looks
>>>> like a good time to learn about it if you don''t.
Something like this
>>>> will probably be what you''re looking for:
>>>>
>>>> $$("img[tooltip]").each(function(image) {
>>>> image.observe("mouseover",
productTooltip.show.bind(image));
>>>> image.observe("mouseout",
productTooltip.hide.bind(image));
>>>> }
>>>>
>>>> What the bind() function does is makes sure that the called
function is
>>>> executed using the scope of the object which is passed to the
bind()
>>>> function as a parameter, in this case, the image. In other
words,
>>>> within the show() and hide() functions you can use the
"this" keyword to
>>>> refer to the image to which the function was bound rather than
having to
>>>> actually pass around references to the images
>>>> themselves. Thus, your show() function would be able to do
this ...
>>>>
>>>> var show = function() {
>>>> var myProductID = this.readAttribute("tooltip");
>>>> /* ... do other stuff ... */
>>>>
>>>> }
>>>>
>>>> ... instead of having to be passed the product ID explicitly.
>>>>
>>>> - Dash -
>>>>
>>>> Cgnost wrote:
>>>>
>>>>> I''ve created a custom tooltip function to be used
on a website. I''m
>>>>> trying to code it in such a way that by giving any img tag
an
>>>>> attribute with tooltip="productid" it will attach
the correct
>>>>> onmouseover and onmouseout event.
>>>>>
>>>>> Here is the code:
>>>>>
>>>>> loadEvents: function() {
>>>>> var images =
document.getElementsByTagName("img");
>>>>> var myElement = null;
>>>>> var myProductID = 0;
>>>>> for (var i = 0; i < images.length; i++) {
>>>>> myElement = images[i];
>>>>> if
(myElement.hasAttribute("tooltip")) {
>>>>> myProductID =
myElement.getAttribute("tooltip");
>>>>> Event.observe(myElement,
''mouseover'', function()
>>>>> { productTooltip.show(myProductID,myElement); });
>>>>> Event.observe(myElement,
''mouseout'', function()
>>>>> { productTooltip.hide(); });
>>>>> }
>>>>> }
>>>>> }
>>>>>
>>>>> What this is doing is looping through all the imgs on the
page and
>>>>> finding any of the ones that have the tooltip attribute,
then usinv
>>>>> Event.observe to attach the onmouseover and onmouseout
events. But the
>>>>> problem is with the onmouseover I need to pass it two
arguments, the
>>>>> product ID which I get from the tooltip attribute and then
I need to
>>>>> pass it a reference to that particular element so my show()
function
>>>>> knows how to position the tooltip.
>>>>>
>>>>> After this function is run, it correctly attaches an
onmouseover and
>>>>> onmouseout event to all of the neccessary images that have
the tooltip
>>>>> attribute, except it passes the product ID and element
reference of
>>>>> the last tooltip image that was processed. So if I had 3
tooltip
>>>>> images on the page, all 3 mouseovers will run the show()
function
>>>>> using the third images ID and element reference.
>>>>>
>
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
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 Jun 14, 7:32 am, Cgnost <cgn...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I''ve created a custom tooltip function to be used on a website. I''m > trying to code it in such a way that by giving any img tag an > attribute with tooltip="productid" it will attach the correct > onmouseover and onmouseout event. > > Here is the code: > > loadEvents: function() { > var images = document.getElementsByTagName("img");It seems David has already given you a solution you are happy with, however it''s worth pointing out that the document already has an images collection ready for you to use: var images = document.images; It''s a live collection, so as you add/remove images, they are automatically added/removed from the collection. Also, the number of lines of code is not any indicator of efficiency or speed. You will often find that looping over a collection is much quicker than using $$, and faster again than .each. If performance is an issue (and maybe it isn''t for you) consider the above.> var myElement = null;There is rarely any point in initialising a variable as null, if you use: var myElement; it is assigned a value of undefined, which is suitable in nearly all cases.> var myProductID = 0;Same here. You are going so assign a value of the tool tip, so there doesn''t seem much point in assigning a value of zero.> for (var i = 0; i < images.length; i++) { > myElement = images[i]; > if (myElement.hasAttribute("tooltip")) { > myProductID = myElement.getAttribute("tooltip"); > Event.observe(myElement, ''mouseover'', function() > { productTooltip.show(myProductID,myElement); });Here is where your issue comes from - both myProductID and myElement form closures back to their respective variables that are associated with the function''s execution object. Their value in all cases will be whatever value was last assigned them before the function finished so all your handlers will have references to the same value. There are alternatives to that proposed by David - but if it suits, use it. -- Rob --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
I never knew document.images was live. I thought it was static to the page''s images at load time. I''ll have to remember that. Thanks, Rob. - Dash - RobG wrote:> > On Jun 14, 7:32 am, Cgnost <cgn...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > >> I''ve created a custom tooltip function to be used on a website. I''m >> trying to code it in such a way that by giving any img tag an >> attribute with tooltip="productid" it will attach the correct >> onmouseover and onmouseout event. >> >> Here is the code: >> >> loadEvents: function() { >> var images = document.getElementsByTagName("img"); >> > > It seems David has already given you a solution you are happy with, > however it''s worth pointing out that the document already has an > images collection ready for you to use: > > var images = document.images; > > It''s a live collection, so as you add/remove images, they are > automatically added/removed from the collection. > > Also, the number of lines of code is not any indicator of efficiency > or speed. You will often find that looping over a collection is much > quicker than using $$, and faster again than .each. If performance is > an issue (and maybe it isn''t for you) consider the above. > > >> var myElement = null; >> > > There is rarely any point in initialising a variable as null, if you > use: > > var myElement; > > it is assigned a value of undefined, which is suitable in nearly all > cases. > > >> var myProductID = 0; >> > > Same here. You are going so assign a value of the tool tip, so there > doesn''t seem much point in assigning a value of zero. > > > >> for (var i = 0; i < images.length; i++) { >> myElement = images[i]; >> if (myElement.hasAttribute("tooltip")) { >> myProductID = myElement.getAttribute("tooltip"); >> Event.observe(myElement, ''mouseover'', function() >> { productTooltip.show(myProductID,myElement); }); >> > > Here is where your issue comes from - both myProductID and myElement > form closures back to their respective variables that are associated > with the function''s execution object. Their value in all cases will > be whatever value was last assigned them before the function finished > so all your handlers will have references to the same value. > > There are alternatives to that proposed by David - but if it suits, > use it. > > > -- > Rob > > > > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Rob, The solution that David provided me indeed fixed my problem, although I''d love to hear any alternative methods if you have any. As far as initializing variables with null or 0, it''s just a bad habit. The original code I had written I did use the images collection, although as I was messing with it I changed to the getElementsByTagName method instead to see if that was the issue. It wasn''t, but I didn''t change it back. Also, by using the $$ method, it only returned to me the images with that particular tooltip, which is quite helpful and eliminated the need to test whether that attribute existed or not. I''m still learning about how to handle scope when calling functions within objects, etc. and I''m still pretty fresh to prototype and any form of OOP-type programming in javascript so if you would care to elaborate on the alternatives you mentioned, I''m interested. On Jun 15, 4:30 am, RobG <r...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:> On Jun 14, 7:32 am, Cgnost <cgn...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > I''ve created a custom tooltip function to be used on a website. I''m > > trying to code it in such a way that by giving any img tag an > > attribute with tooltip="productid" it will attach the correct > > onmouseover and onmouseout event. > > > Here is the code: > > > loadEvents: function() { > > var images = document.getElementsByTagName("img"); > > It seems David has already given you a solution you are happy with, > however it''s worth pointing out that the document already has an > images collection ready for you to use: > > var images = document.images; > > It''s a live collection, so as you add/remove images, they are > automatically added/removed from the collection. > > Also, the number of lines of code is not any indicator of efficiency > or speed. You will often find that looping over a collection is much > quicker than using $$, and faster again than .each. If performance is > an issue (and maybe it isn''t for you) consider the above. > > > var myElement = null; > > There is rarely any point in initialising a variable as null, if you > use: > > var myElement; > > it is assigned a value of undefined, which is suitable in nearly all > cases. > > > var myProductID = 0; > > Same here. You are going so assign a value of the tool tip, so there > doesn''t seem much point in assigning a value of zero. > > > for (var i = 0; i < images.length; i++) { > > myElement = images[i]; > > if (myElement.hasAttribute("tooltip")) { > > myProductID = myElement.getAttribute("tooltip"); > > Event.observe(myElement, ''mouseover'', function() > > { productTooltip.show(myProductID,myElement); }); > > Here is where your issue comes from - both myProductID and myElement > form closures back to their respective variables that are associated > with the function''s execution object. Their value in all cases will > be whatever value was last assigned them before the function finished > so all your handlers will have references to the same value. > > There are alternatives to that proposed by David - but if it suits, > use it. > > -- > Rob--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---