Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How to make textbox in Javascript slide left and right once the button is pressed?

How to make textbox in Javascript slide left and right once the button is pressed?

EMarie1571
Tourist
17 0 1

Hi,

 

I have a textbox which toggle between "visible" and "hidden" in javascript.This is the code:

 <a class="searchbar_header">
      <form class="search" action="/search">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="myTextBox" class="box" type="text" name="q" value="{{ search.terms | escape }}"  />
    <input type="button" " id="btnImg"  class="buttonImage" width="20" height="20" onclick="myFunctionClick()" />
</form>
      </a>
     <script>
       function myFunctionClick() {
   var x = document.getElementById("myTextBox");
    if (x.style.visibility === "hidden") {
    x.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
  }
}

 with the visibility in .css initially to "hidden".Once the input type=button is pressed,I would like the textbox to slide to the left and back again to the right every time the button is pressed.I have tried to do it with JQuery but without any luck,or it was sliding left,but after I press the button again it was disappearing as it normally should without any effect.This is what I have tried in JQuery:

<script>
                                
                                 $(".buttonImage").click(function() {
                                           
$(".box").animate({width:"toogle"});
});
                                 </script>

/* and also */
$("#btnImg").click(function() {
  $("#myTextBox").animate({
    'right': '0px',
    'opacity': '1'
  });
});
/*this one works but only once when I initially click the button.If I click again it will not work.I have also tried with the condition that if it is visible, to slide left and if it is hidden to slide right".*/

 Can anyone please help me make it so that when I click on the button,it will slide left and when i press again,where the case will be "hidden",it will slide right and do that continuously?

Reply 1 (1)

Avleen
Shopify Staff (Retired)
3 0 0

Hi EMarie1571,

 

Animating with CSS is the simplest way to get something moving on screen and for simpler transitions, like toggling UI element states.

 

There are three key advantages to CSS animations over traditional script-driven animation techniques:

  • They're easy to use for simple animations; you can create them without even having to know JavaScript.
  • The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
  • Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

Source: MDN Web Docs-Using CSS animations

 

Example

 

1 - We can use Javascript for toggling the class for “myTextBox” when button is clicked

 

example Javascript&colon; 

 

function myFunctionClick() {
  var x = document.getElementById("myTextBox");
  x.classList.toggle("slide"); // add a new class and then define the class styling in CSS
}

 

 

2. We can then define the class styling in CSS (e.g. CSS  translateX() to reposition an element horizontally on the 2D plane. Please find more information on using CSS transitions here)

 

example CSS

.slide {
  transform: translateX(-100%);
  transition: transform 1s;
}



For other advanced theme customizations, you can also reach out to Shopify experts who are experienced industry professionals that have extensive knowledge about creating, updating, and perfecting Shopify themes.

 

To hire a designer or developer to customize your theme, please visit the Shopify Experts Marketplace.

 

To learn more visit the Shopify Help Center or the Community Blog.