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 <[EMAIL PROTECTED]> 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 [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
-~----------~----~----~----~------~----~------~--~---
