Temporarily animate input type text when hovering

Question

I want to show contents of an input type text if the text is wider than the current input width.

When I hover the field, I want the text to scroll to the left or something similar, in order to view the hidden text.

Thank you.

Note: tell me if I have to add/change the question's tags, please.

Question is fine and clearly stated, but have you tried anything yourself? It would be nice to see some research or code effort. — Yuriy Galanter, Oct 06 '13 at 15:59

score 2 · Accepted Answer · edited Oct 07 '13 at 18:21

2

I thought about how I would do this and this is what I came up with.

On input hover I'm going to take the input value and put it in a div (or any other element). Then get the width of that div and compare it with the width of the input. If the div is wider than the input then I'm going to animate the inputs text-indent by the difference of the widths.

$('input').hover(function(){
    var temp = $('div').html($(this).val()).width();
    if($(this).width() < temp){
        $(this).animate({
            textIndent: $(this).width()-temp
        }, 100);
    }
});

You can see the full solution here: http://jsfiddle.net/taneleero/tB5C5/2/

Should be enough to get you going.

edited Oct 07 '13 at 18:21

Brad Koch

19,267
19
110
137

answered Oct 06 '13 at 16:12

Tanel Eero

642
3
8

1

The other solution won't work in firefox because of the very different ways browsers handle inputs. I have updated my fiddle to include the reset when the mouse leaves and also a check for when the input gets focus so it would stop animating and also reset. http://jsfiddle.net/taneleero/tB5C5/1/ – Tanel Eero Oct 06 '13 at 18:42
It works in the link you provided, but I'm using other div elements so can you change it so it would target only one element? If this works I'll accept your reply as answer. Thank you. – Wajih Aziza Oct 06 '13 at 18:59
It works by itself but when I put it in my project, all it does is show the div with the text in it. It doesn't make an animation. – Wajih Aziza Oct 07 '13 at 13:27
Hard to comment without seeing your project. – Tanel Eero Oct 07 '13 at 14:24
That's true, the problem lies in the project so it's a detail I'll have to check personally. But as far as my question goes, you have given me a proper answer. Thank you. – Wajih Aziza Oct 07 '13 at 18:16

score 2 · Answer 2 · edited May 23 '17 at 12:05

Eh, even though I did make that comment. couldn't resist this one myself. Using jQuery:

<input type="text" id="txt" value="A very long text goes here very long text goes here very long text goes here very long text goes here very long text goes here indeed."></input>

$('#txt').hover(

    function() {
        $(this).animate({"scrollLeft": this.scrollWidth}, this.value.length*50)
    },

    function() {
        $(this).stop();
        this.scrollLeft = 0;
    }
)

here jQuery .animate() is used to animate .scrollLeft position of text within input field. Animation duration is tied to text length, so the speed should be the same for all kinds of texts. When mouse leaves input control - scroll position is reset to original.

Demo: http://jsfiddle.net/uPGmC/

If you googled a bit for "input text scroll left", you would find answers like this, combining it with jQuery docs on hover and animate you would piece the solution together yourself.

Yup just noticed that this works in WebKit based browsers only (Chrome, Safari, Opera). Will have to figure out why — Yuriy Galanter, Oct 06 '13 at 19:55

Temporarily animate input type text when hovering

2 Answers2