Good thing he said "performant" then init !! :P
Alex Mcauley http://www.thevacancymarket.com ----- Original Message ----- From: "Diodeus" <diod...@gmail.com> To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com> Sent: Tuesday, July 21, 2009 10:00 PM Subject: [Proto-Scripty] Re: Need help for performantly creating tooltips "Performantly" isn't a word. On Jul 21, 10:31 am, Chris <c...@clicksports.de> wrote: > Hi all, > > one of our clients has a very javascript heavy application for local > intranets. On many pages of this application, there are tooltips that > get loaded (usually up to 60 or 70), which make the application behave > very slowly at some time or another (at least in good ole IE6, which > we need to support). Currently we are using Prototip2 from nick > stackenburg, but it seems that this seems overkill and isnt so > performant at all. > > So, I want to start to build my own tooltip-functionality, which > should be lightweight and does not need thousands of listeners, which > also seems to make pages very slow. > > My question is: What is the best approach for this task? I am > currently experimenting with event-bubbeling to only use one listener > on this page, so I can create as many tooltips as i want without > raising memory too much. > > This is what I have come up with in the last 20 minutes or so: > > /** > * Creat tooltips for an array of objects > * @param {Object} classes Classname of elements where the tooltips > should be shown on > * @param {Object} content_attribute The dom attribute of the element > we should get the content from > */ > var tt = Class.create({ > > initialize: function(classes, content_attribute) { > > this.classes = classes; > this.content_attribute = content_attribute; > > this.initListeners(); > }, > > /** > * Initialize the global listener > */ > initListeners: function() { > > document.observe('mouseover', this.moverListener.bindAsEventListener > (this)); > document.observe('mouseout', this.moutListener.bindAsEventListener > (this)); > }, > > moverListener: function(e) { > > elm = Event.findElement(e, '.' + this.classes); > > if(elm !== undefined) { > > this.showToolTip(elm) > } else return; > }, > > moutListener: function(e) { > > elm = Event.findElement(e, '.' + this.classes); > if(elm !== undefined) { > > this.hideTooltip(elm); > } > }, > > showToolTip: function(elm) { > > console.log(elm + ' is shown') > }, > > hideTooltip: function(elm) { > > console.log(elm + ' is hidden') > } > > }; > > As I am quite experienced in prototype.js (well, at least I think I > am...), but not in such things like performance tuning javascript and > such stuff, I really would love to hear some feedback from you. Are > there any other performance problems that this type of listener would > force me in (dont know how fast findElement() is compared to a direct > binding to the source element of a listener). do you think that this > is maybe the wrong approach at all? > > The tooltips should go without great graphical stuff, the only thing I > want to add are pointers in pure css, like those seen > onhttp://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_us..., > to save some more bandswidth. > > Thanks in advance, > Chris --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
