Question

I am tring to make a hover function, which on hover, unbinds a previous binded function.

But I don’t think I understand what the jquery website is trying to explain.

Please see my attempt in this jsfiddle. http://jsfiddle.net/motocomdigital/S9uVh/

This is my binded function which runs fine…

$("h1.trunc").bind().shorten({
    width: 300,
    tail: '...',
    tooltip: false 
});

But I am then trying to .unbind() it when my element is hovered, but the re-bind it on my second hover alternation…

$('#element').hover(
    function () {

        $(this).find("h1.trunc").unbind();

        $(this).animate({
            height : '100px'    
        }, 200 );       

    }, 
    function () {

        $(this).find("h1.trunc").bind().shorten({
            width: 300,
            tail: '...',
            tooltip: false
        });

        $(this).animate({
            height : '20px'    
        }, 200 );

    }
);​

Can someone help me fix this please. Also is there a way of not having to re-write the entire “h1.trunc” function again inside my hover function.

Please see working jsfiddle here. Thanks in advance.

http://jsfiddle.net/motocomdigital/S9uVh/

Answer 1

If you look at what shorten is actually doing, it is removing the text and there is no reverse of this method e.g. unshorten.

If I understand correctly, you are wanting to display the text when hovering, then truncating it again on hoveroff.

I would get rid of the shorten plugin, and just use css. Check out this little fiddle: http://jsfiddle.net/S9uVh/22/

Basically I am just removing a class, then adding it again. The <h1> tag is shorted using;

text-overflow: ellipsis;
overflow: hidden;    
white-space: nowrap;