1

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?

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

2 Answers 2

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.

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

Comments

1

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

Aymeric.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.