Prakash Prakash - 4 months ago 12
CSS Question

Changing the position of a search bar when it is clicked

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

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

this is my html, and css for the search bar



.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>





How can I achieve the transition?

Answer

This is the way to do it with jQuery(a JavaScript library), if that is what you meant by moving it to the top.

$(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
    
    my_searchbar.css({ //edit the css of your searchbar. You can add any css in here.
      'margin-top' : '-60px',
      'margin-left': '200px'
    });
    
    $('.btn').css({ //select the submit button and move it as well.
      'margin-left': '500px'
    });
  });
});
.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>