.unbind() and .bind() function in hover function

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/

Minor error in css overflow: visable; to overflow: visible; — coolguy
– coolguy, Commented Jul 9, 2012 at 14:54

Tim B James · Accepted Answer · 2012-07-09 15:01:55Z

2

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;

answered Jul 9, 2012 at 15:01

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joshc Over a year ago

For something reason I thought text-overflow css was limited to browser support??? But just checked this and yes it seems to work in all browsers. Thank you!

Tim B James Over a year ago

Yeah it is one of these styles which you would assume wouldn't work in IE6/7 but actually does!

freakish · Accepted Answer · 2012-07-09 15:00:40Z

Well, you seem to misunderstand some things. First of all .bind() left alone (i.e. without arguments) does nothing. Second of all: this .shorten plugin seems to alter the inner HTML, there is no binding with it. And it does not allow returning to previous state. So what I advice you should do this:

HTML

<h1 class="trunc" data-text="This is a truncated title to untruncate when hovered using unbind tricks"></h1>

Note, that I put all of the text in data-text attribute. Now inside your handler you do this:

JavaScript

var text = $("h1.trunc").attr("data-text");

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

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

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

    }, 
    function () {

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

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

Checkout this jsFiddle. Note however that this .shorten plugin seems to set nowrap css, which makes it look bad. You may alter all the necessary styles, but it might be easier to write your own .shorten function. :]

Dave Haigh · Accepted Answer · 2012-07-09 15:10:39Z

1

Working Demo: http://jsfiddle.net/S9uVh/30/

I have stored the original text for each title and also stored the shortened text for each title. On hover of #element the nearest h1's text is replaced with the original. On hover off its text is set back to the shortened version.

answered Jul 9, 2012 at 15:10

Dave Haigh

4,5675 gold badges38 silver badges56 bronze badges

Comments

worenga · Accepted Answer · 2012-07-09 15:00:49Z

0

You're doing something/it wrong.

Usage is

.bind( eventType [, eventData], handler(eventObject) )

and

.unbind( [eventType] [, handler(eventObject)] )

Also *bind () is deprecated and you've should use on() and off()

answered Jul 9, 2012 at 15:00

worenga

5,8663 gold badges33 silver badges51 bronze badges

1 Comment

Joshc Over a year ago

Thanks for the nots on depreciation. I thought bind was fairly new.

Collectives™ on Stack Overflow

.unbind() and .bind() function in hover function

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related