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