Change the position of the search bar when clicked

Question

My idea is to change the position of the search bar, which is located in the center of the page in the upper right corner, when the user clicks or places the cursor in the search bar, thereby making an area in the center to show the search result.

Also, the cursor should remain in the search bar during the transition.

this is my html and css for search string

.search-container{
    position: absolute;
    width: 630px;
    height: 100px;
    z-index: 15;
    top: 50%;
    left: 37%;
    margin: -100px 0 0 -140px;
}
.search-wrapper{
    position: relative;
    background-color: #b2dfdb;
    width: auto;
    height: 15em;
    text-align: center;
    border: 1px solid #fff;
    box-shadow: 1px 1px rgba(0,0,0,0.35);
}
.searchbar-wrapper{
    vertical-align: middle;
    width: auto;
    margin: 20px;
    margin-top: 70px;
}
.search-bar{
    float: left;
    width: 400px;
    line-height: 30px;

}

<div class="search-container" id="mainpage-search">
        <div class="search-wrapper">
            <div class="searchbar-wrapper">
                <div class="row">
                    <div class="search">
                        <form class="form">
                            <div class="col-lg-8 col-md-8"><input class="search-bar" type="text" placeholder="Search for Songs"/></div>
                            <div class="col-lg-4 col-md-4"><span class="btn btn-blue btn-lg"><input type="submit" id="submit-query" value="Submit"></span></div>
                            <div class="clearfix"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Run codeHide result

How can I make the transition?

Answer 1

This is the way to do it using jQuery (JavaScript library) if that is what you had in mind by moving it up.

$(document).ready(function(){ //when the document is fully loaded

  $('.search-bar').click(function(){ //select your searchbar by class and onclick create a new function
    var my_searchbar = $(this); //my_searchbar is how you can access your searchbar
    var my_btn = $('.btn'); //get your btn
    
    my_btn.css('display','none'); //set the css property of the submit button to "none"
    
    //create animation -60px top and 200px left
    //time is set to 1sec(1000ms)
    //after the animation is finishied create new function
    //in that functin make the submit button visible and animate it 500px to the left
    my_searchbar.animate({ marginTop: '-60px', marginLeft: '200px'}, 1000, function() {
    my_btn.css('display','block');
    $('.btn').animate({marginLeft: '500px'}, 1000);
    });
  });
  
  
});

.search-container{
    position: absolute;
    width: 630px;
    height: 100px;
    z-index: 15;
    top: 50%;
    left: 37%;
    margin: -100px 0 0 -140px;
}
.search-wrapper{
    position: relative;
    background-color: #b2dfdb;
    width: auto;
    height: 15em;
    text-align: center;
    border: 1px solid #fff;
    box-shadow: 1px 1px rgba(0,0,0,0.35);
}
.searchbar-wrapper{
    vertical-align: middle;
    width: auto;
    margin: 20px;
    margin-top: 70px;
}
.search-bar{
    float: left;
    width: 400px;
    line-height: 30px;

}

<!-- add the jQuery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-container" id="mainpage-search">
        <div class="search-wrapper">
            <div class="searchbar-wrapper">
                <div class="row">
                    <div class="search">
                        <form class="form">
                            <div class="col-lg-8 col-md-8"><input class="search-bar" type="text" placeholder="Search for Songs"/></div>
                            <div class="col-lg-4 col-md-4"><span class="btn btn-blue btn-lg"><input type="submit" id="submit-query" value="Submit"></span></div>
                            <div class="clearfix"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Run codeHide result