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 <[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
-~----------~----~----~----~------~----~------~--~---
