Scroll overflow text into view

Question

I need to scroll some overflowed text into view.

I have trying to animate its text-indent, but I need to animate the correct amount of pixels. How do I calculate that?

See: http://jsfiddle.net/wqRcK/5/

I need to only scroll the text into view, not the "total width" like I tried.

As a side question, how do I make the span.title respect the 10 pixels padding?

200px - span width should give you that amount, or have I misunderstood it? — slash197
– slash197, Commented Mar 27, 2012 at 13:49
This is an interesting effect that could greatly be used for usability reasons. +1 for that. — Robert Koritnik
– Robert Koritnik, Commented Mar 27, 2012 at 15:03

Joseph Silber · Accepted Answer · 2012-03-27 13:48:32Z

5

Set you span to inline-block,
and animate it to "-" + ( $(this).width() - $(this).parent().width() ) + "px":

div.box span.title { white-space: nowrap; display: inline-block; }

$(document).ready(function() {
    var boxwidth = $("div.box").width();
    $("span.title").hover(
      function () {
        $(this).stop().animate({
            textIndent: "-" + ( $(this).width() - $(this).parent().width() ) + "px"  
        }, 1000);  
      }, 
      function () {
        $(this).stop().animate({
            textIndent: "0"           
        }, 1000);  
      }
    );
});

Here it is in your fiddle: http://jsfiddle.net/wqRcK/20/

P.S. Remember to always cache your selectors.

answered Mar 27, 2012 at 13:48

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

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

Comments

Aymeric · Accepted Answer · 2012-03-27 14:02:47Z

1

To complete Joseph answer, I added the padding for your side question make the title symetric => http://jsfiddle.net/wqRcK/45/

Aymeric.

answered Mar 27, 2012 at 14:02

Aymeric

1,2058 silver badges10 bronze badges

Collectives™ on Stack Overflow

Scroll overflow text into view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related