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