views:

88

answers:

1

Hi, the recent update to jquery 1.4.3 has introduced a small behavior bug into one of my scripts, and i just cant see what the problem is.

The way i use the scripts means i have to use the latest jquery.

I think it must be in the onClick function. The odd behavior introduced can be seen here: And a test page with console log here when the read more links are clicked for the first time they display instantly, when clicked a second time they reveal in slow animation as they should.

The vars i am using equate to:

            length: %id=truncate%, // 200
            minTrail: 0,  
            moreText: "%id=open%",  // read more
            lessText: "%id=close%",  // close
            ellipsisText: "%id=starttrunk%",  // ...
            moreAni: "%id=openspeed%",  // slow
            lessAni: "%id=closespeed%" // slow

Here is the script:

(function($){
    $.fn.jTruncate = function(options) {


        return this.each(function() {
            obj = $(this);
            var body = obj.html();

            if(body.length > options.length + options.minTrail) {
                var splitLocation = body.indexOf(' ', options.length);
                if(splitLocation != -1) {
                    // truncate tip
                    var splitLocation = body.indexOf(' ', options.length);
                    var str1 = body.substring(0, splitLocation);
                    var str2 = body.substring(splitLocation, body.length - 1);
                    obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText + 
                        '</span>' + '<span class="truncate_more">' + str2 + '</span>');
                    obj.find('.truncate_more').css("display", "none");

                    // insert more link
                    obj.append(
                        '<div class="clearboth">' +
                            '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
                        '</div>'
                    );

                    // set onclick event for more/less link
                    var moreLink = $('.truncate_more_link', obj);
                    var moreContent = $('.truncate_more', obj);
                    var ellipsis = $('.truncate_ellipsis', obj);
                    moreLink.click(function() {
                        if(moreLink.text() == options.moreText) {
                            moreContent.show(options.moreAni);
                            moreLink.text(options.lessText);
                            ellipsis.css("display", "none");
                        } else {
                            moreContent.hide(options.lessAni);
                            moreLink.text(options.moreText);
                            ellipsis.css("display", "inline");
                        }
                        return false;
                    });
                }
            } // end if

        });
    };
})(jQuery);


                    $().ready(function() {  
                    $('#%id% .trunky').jTruncate({  
                    length: %id=truncate%,  
                    minTrail: 0,  
                    moreText: "%id=open%",  
                    lessText: "%id=close%",  
                    ellipsisText: "%id=starttrunk%",  
                    moreAni: "%id=openspeed%",  
                    lessAni: "%id=closespeed%"  
                    });  
                    }); 
+3  A: 

try changing the 'extend' line to

var effectiveOptions={};
$.extend(effectiveOptions,defaults,options);

Then use effectiveOptions in place of options therafter

since otherwise you'll clobber your defaults every call ($.extend destructively modifies its first argument) and the var options was unnecessary since its already local due to being in the argument list.

tobyodavies
Thanks.. This is a good point, script amended. However, this does not solve the bug. The bug is still visible. I must point out, this worked fine until the release of jquery 1.4.3 the other day. The script has to use the latest Jquery version the way it is set up.
Doobox
In fact i have now just removed the defaults altogether as well as the var = options; Above amended to reflect this. Still see bug.
Doobox
mm, i Can't have a look cause the version you linked to earlier hasn't had this change yet... can i see an updated version?
tobyodavies
It is not seeing the "slow" in the click event, until after the click event has been evoked at least once..?
Doobox
could you `console.log(options)` in the click handler?
tobyodavies
Where would i place this..? just after: moreLink.click(function() {// here
Doobox
yes... then we can see what is actually in the options object just before the first click, and whats different just before the second
tobyodavies
I placed it in the position i mentioned above, and uploaded to: http://www.doobox.co.uk/test/test.html
Doobox
the slow option does not seem to be making it there..!
Doobox
I've checked that the slow option gets passed in, making the same call with an explicit string 'slow' produces the same behaviour, it must be a jQuery bug... i'd submit a bug report http://bugs.jquery.com/newticket?redirectedfrom=
tobyodavies
Thanks for taking the time with this, much appreciated.
Doobox
How could we explain the reasoning for it working correctly the second time it is invoked, yet still no sign of the slow option in the console log..?
Doobox