[jQuery] Re: suggestions for a hover zoom on text...

2008-05-06 Thread gr00vy0ne

Thanks, I changed the code and it is running better especially when
running Firefox and Safari are working very well. IE 6/7 still remains
a problem.

I've narrowed it down to where the layer popup is showing up. For
instance, if I make the "layer pop-up" render above (y-axis not z) the
hover point then it's very fast. If I make the layer pop-up" render
exactly over the hover point then it's very slow.

So, if you hover over something and then pop-up a layer under it (i.e.
where the mouse is), should the performance under IE6/7 be as bad as
I'm seeing?

-v

On May 5, 10:53 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
> In your code, it looks like you use many calls to $(this) and
> $("#times_zoom").  You'll get much better performance if you set variables
> and use those instead, i.e in your mouseover function:
>
> var th = $(this), tz = $("#times_zoom");
>
> Then you would use those references like so:
>
> // change the contents
> tz.html(th.html());
>
> This will improve performance because you are not calling the jQuery
> function as many times.
>
> -- Josh
>
> - Original Message -
> From: "gr00vy0ne" <[EMAIL PROTECTED]>
> To: "jQuery (English)" 
> Sent: Monday, May 05, 2008 6:15 PM
> Subject: [jQuery] suggestions for a hover zoom on text...
>
> > I'm trying to come up with a technique for expanding text when you
> > hover over it. I built a real quick and dirty demo to help explain the
> > affect I'm trying to achieve:
>
> >http://imlocking.com/projects/zoom_text.html
>
> > So, in the list of times, I'd like to make them "pop" when you hover
> > over. Of course, it would be easy to change the style of the element
> > directly but then the list would move which I'm trying to avoid.
>
> > What I'm doing now is creating a hidden positionable container that
> > moves to the correct location and shows a copy of the hovered element
> > (with a different style applied). It works but I've noticed on an
> > actual page with other content, the performance can get horrendous.
> > Safari is blazing fast. Both Firefox and IE can both go up to 100% CPU
> > usage.
>
> > All the code (HTML/CSS/JS) is inline. So, please take a look and let
> > me know if there's a better more efficient way to do this. Any
> > suggestions, tips, comments, etc. are welcome.
>
> > Another alternative we've tried is putting hidden spans in the page
> > that show up on hover (requires little-to-no scripting) but it ends up
> > marking the markup unnecessarily large.
>
> > Many thanks,
> > victor


[jQuery] Re: suggestions for a hover zoom on text...

2008-05-05 Thread Josh Nathanson


In your code, it looks like you use many calls to $(this) and 
$("#times_zoom").  You'll get much better performance if you set variables 
and use those instead, i.e in your mouseover function:


var th = $(this), tz = $("#times_zoom");

Then you would use those references like so:

// change the contents
tz.html(th.html());

This will improve performance because you are not calling the jQuery 
function as many times.


-- Josh

- Original Message - 
From: "gr00vy0ne" <[EMAIL PROTECTED]>

To: "jQuery (English)" 
Sent: Monday, May 05, 2008 6:15 PM
Subject: [jQuery] suggestions for a hover zoom on text...




I'm trying to come up with a technique for expanding text when you
hover over it. I built a real quick and dirty demo to help explain the
affect I'm trying to achieve:

http://imlocking.com/projects/zoom_text.html

So, in the list of times, I'd like to make them "pop" when you hover
over. Of course, it would be easy to change the style of the element
directly but then the list would move which I'm trying to avoid.

What I'm doing now is creating a hidden positionable container that
moves to the correct location and shows a copy of the hovered element
(with a different style applied). It works but I've noticed on an
actual page with other content, the performance can get horrendous.
Safari is blazing fast. Both Firefox and IE can both go up to 100% CPU
usage.

All the code (HTML/CSS/JS) is inline. So, please take a look and let
me know if there's a better more efficient way to do this. Any
suggestions, tips, comments, etc. are welcome.

Another alternative we've tried is putting hidden spans in the page
that show up on hover (requires little-to-no scripting) but it ends up
marking the markup unnecessarily large.

Many thanks,
victor