Thanks Karl. That was actually stupidity of my part, that single
replace() call must be slower than most of the script. Number also
seems to be slower than parseInt on all modern browsers (despite being
6x faster on IE6) - I like the looks of Number(...) though :]
- ricardo
On 25 out, 20:54, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> that looks great, Ricardo. I'm interested to hear why you chose to
> write this:
>
> var normal =
> Number(this.find('a:first').css('paddingLeft').replace('px',''));
>
> instead of this:
>
> var normal = parseInt(this.find('a:first').css('paddingLeft'),10);
>
> Is there an advantage to your line? I wouldn't have thought to write
> it that way.
>
> --Karl
>
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Oct 25, 2008, at 4:25 PM, ricardobeat wrote:
>
>
>
> > It's working again:http://jsbin.com/evodi/
>
> > On Oct 25, 4:18 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> >> In case Remy Sharp is reading this:
>
> >> jsbin is not working here.. when I try to save to a new URL, it goes
> >> tohttp://edit/
> >> Also, pressing backspace results in lag, using delete doesn't.
>
> >> I turned your code into a plugin, and made some changes. Now you pass
> >> an object with parameters and only need to specify an 'offset' in
> >> padding, the values are calculated from the element's current
> >> padding.
> >> I tried hard to keep the overall width constant but it seems
> >> impossible. Here's the code I ended up with (same html/css):
>
> >> (function($) {
>
> >> $.fn.shrinkHover = function(options){
>
> >> var normal =
> >> Number(this.find('a:first').css('paddingLeft').replace('px',''));
> >> var length = this.find('li a').length;
>
> >> var opt = { size: 12, speed: 350, easing: "easeOutExpo"};
> >> jQuery.extend(opt,options);
>
> >> var large = normal+opt.size;
> >> var small = normal-(opt.size/length), small = (small<0) ? 0 :
> >> small;
> >> var extra = Math.round( (small%1)*length ), small =
> >> Math.floor(small);
> >> large += extra;
>
> >> this.find('li').hover(function(){
>
> >> //Mouse over
> >> $(this).children('a').animate({
> >> paddingLeft: large,
> >> paddingRight: large
> >> },opt.speed,opt.easing).dequeue();
>
> >> $(this).siblings('li').children('a').animate({
> >> paddingLeft: small,
> >> paddingRight: small
> >> },opt.speed,opt.easing).dequeue();
>
> >> }, function() {
>
> >> // Mouse out
> >> $(this).siblings().andSelf().children('a').animate({
> >> paddingLeft: normal,
> >> paddingRight: normal
> >> },opt.speed,opt.easing).dequeue();
>
> >> });
> >> };
>
> >> })(jQuery);
>
> >> $(document).ready(function(){
>
> >> $('#subNavigation').shrinkHover();
>
> >> });
>
> >> cheers,
> >> - ricardo
>
> >> On Oct 25, 2:28 am, "c.barr" <[EMAIL PROTECTED]> wrote:
>
> >>> Cool, I've never seen that site before. I made a small demo using
> >>> my
> >>> code above:http://jsbin.com/abuxe
>
> >>> Strangely enough it's not working properly, and that's a direct copy
> >>> of what I wrote that works. Basically they are all shrinking, and
> >>> the
> >>> on your mouse is over does not get larger. Not sure what I've done
> >>> wrong here.
>
> >>> Anyway, there's a 90% working demo...
>
> >>> On Oct 24, 9:58 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> >>>> Maybe you could post a working sample to jsbin.com, that would make
> >>>> things a lot easier.
>
> >>>> On Oct 24, 4:00 pm, "c.barr" <[EMAIL PROTECTED]> wrote:
>
> >>>>> Hate to bump this, but it might get lost otherwise!
