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