CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gsiradze
gsiradze

Reputation: 4733

toggle input from right to left

I have this working example: JSFIDDLE

$('#btn-search').on('click', function(e) {
    e.preventDefault();
    $('#search').animate({width: 'toggle'}).focus();
});

How can I do that on click it toogle to left instead of right? I want that on click this input grow to left side.

Upvotes: 2

Views: 604

Answers (2)

kt miller
kt miller

Reputation: 13

If I understand you right you want the input to animate so that it grows like so:

             |[button]
         |<--|[button]
       |<----|[button]
    |<-------|[button]

instead of shifting the button like this:

             |[button]
             |-->|[button]
             |---->|[button]

If so then you are doing 2 things here. You are changing the left positioning (starting position in a relative x/y axis of the dom) of the input and its width. The animate function is only changing the width of the input with the assumption that you don't want to also shift the element's starting position and then pushing the button, which is next in the dom structure, out of the way to accommodate the wider input.

In order to fix this you need to change the left positioning as well. The only catch to this is that you'll also need to adjust the positioning of the button as well. Here's how I changed the code you wrote to get the desired behavior:

        $('#btn-search').on('click', function(e) {
          e.preventDefault();
          $('#search').animate({
              width: 'toggle', 
              left: "-=177", // The width of the input element 
          }).focus();
          $('#btn-search').animate({left: "-=177"});
        });

There are more issues you'll have to work out if you go down that path. Here is a great article on how to manage the button and input element with a different flavor of JS and css: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

Upvotes: 1

W&#233;dney Yuri
W&#233;dney Yuri

Reputation: 1277

Working example: http://jsfiddle.net/7tq9146a/1/

Using float:right instead of float:left and changed the li order.

Upvotes: 2

Related Questions