"Taking cues from Instagram's web/desktop design, we have created

When you view someone's instagram page on a desktop or pc, the search bar is designed to float left when clicked, allowing text to be entered for searching. If no text is entered in the search field, the search icon and placeholder return to their original centered position.

I believe this functionality can be achieved using javascript/jquery, but I am not sure about the specific script needed to implement it. Below are my HTML and CSS code snippets, any assistance in achieving this behavior would be greatly appreciated!

HTML

<div class="box">
    <div class="container-1">
    <span class="icon"><i class="fa fa-search"></i></span>
    <input type="search" id="search" placeholder="Search" />
    </div>
    </div>

CSS

.box{
  margin: 3px auto;

  width: 200px;
  height: 20px;
  padding-right: 10px;
}

.container-1{
  width: 200px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;

}

.container-1 input#search{
  width: 200px;
  height: 30px;
  background: #FFFFFF;
  border: 1px solid #C5C4C4;
  font-size: 10pt;
  text-align: center;
  color: #000000;

  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
   border-radius: 25px;


  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
   transition: background .55s ease;
}


.container-1 input#search::-webkit-input-placeholder {
   color: #A8A7A7;
   letter-spacing: 1px;
   font-size: 12px;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #A8A7A7; 
   letter-spacing: 1px;
   font-size: 12px; 
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #A8A7A7;
   letter-spacing: 1px;
   font-size: 12px;  
}


.container-1 input#search:-ms-input-placeholder {  
   color: #A8A7A7; 
   letter-spacing: 1px;
   font-size: 12px; 
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */


.container-1 .icon{
  position: absolute;
  padding-top: 8px;
  padding-left: 50px;
  font-size: 12px;
  z-index: 1;
  color: #A8A7A7;

}



.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
    outline:none;
    background: #ffffff;

  }



  input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none; 
}


  @media all and (max-width : 370px) {


.box{
  margin: 15px auto;

  width: 200px;
  height: 20px;
  padding-right: 10px;
}
  }
jqueryhtmlcss

Answer №1

Here is a simple fiddle I created to show you how it can be achieved. Currently, I am unsure of how to center the placeholder text with fixed padding.

input {
  width: 200px;
  padding-left: 80px;
  box-sizing: border-box;
  
  background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_search_48px-128.png);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 62px 0;
}
input:focus {
  padding-left: 16px;
  background-position: 0;
}
<input type="text" placeholder="Search" />

P.S. You can add an animation effect by including transition property like this:

transition: all 0.05s ease-in-out;

This will create a smooth transition effect when interacting with the input field.

(search icon sourced from www.iconfinder.com)

Answer №2

I created a basic simulation to demonstrate the concept you requested. Hopefully, this will be useful for you. A snippet of code similar to what Instagram uses is shown below:

$("#LabelContainer").click(function() {
  $("#Search-Input").show();
  $("#Search-Input").focus();
  $("#LabelContainer").hide();
});

$('body').click(function(evt){    
  if (evt.target.id === "LabelContainer" ||
     evt.target.id === "Search-Input")
      return;
  var labelText = $("#Search-Input").val() === '' ? 'Search' : $("#Search-Input").val();
  $("#LabelContainer").text(labelText);
  $("#LabelContainer").show();
  $("#Search-Input").hide();
  
});
body{
   width 100%;
   height: 100%;
   min-height: 200px;
}

.MainContainer {        
    margin: 0 auto;
    height: 30px;
    width: 200px
}

#Search-Input {    
    display: none;
    border: solid 1px #dbdbdb;
    border-radius: 3px;
    color: #262626;
    font-size: 14px;
    outline: none;
    padding: 3px 10px 3px 26px;
    z-index: 2;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

#LabelContainer {
    border: solid 1px #dbdbdb;
    border-radius: 3px;
    color: #262626;        
    font-size: 18px;
    font-weight: bold;
    outline: none;
    padding: 3px 0;
    z-index: 2;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    text-align: center;
}

.LabelText {    

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MainContainer"> 
        <input id="Search-Input" type="text" placeholder="Search..." value="">
        <div id="LabelContainer">Search</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the concept of nested arrays in Angular 2 using Typescript

I'm exploring the possibility of defining an array in Angular 2 that contains multiple other arrays within it. To clarify, here's what I had initially: export class PaymentDetails { account: any[]; bpNumber: number; } The issue with t ...

htmlarraysjsonangulartypescript

Using $.each instead of a traditional for loop in jQuery can make your code

I need to add five list items (li) to the body using the jQuery each() function, but it doesn't seem to be working as expected. The goal is to append a total of five li elements to the body. Please note: This code snippet is just for demonstration pur ...

jquery

Failure to receive Ajax XML data in success callback

I am struggling to access the book.xml file that is located in the same folder as other files. Everything seems fine, but the ajax function refuses to enter the success state and instead shows an [object object] error message. The XML file is very simple, ...

javascriptjqueryhtmlajax

Guide to executing CRUD operations on a list through buttons and displaying each outcome in a popup window

I'm encountering a problem with my MVC Application: Here is my Controller: public class EmployeeController : Controller { // // GET: /Employee/ static EmpUser obj = new EmpUser(); public ActionResult Index() { return View( ...

jqueryasp.net-mvcasp.net-mvc-4buttonrazor

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

javascripthtmlcssangularjsangularjs-ng-repeat

Issue encountered while appending new rows to the tbody of a table

I'm encountering an issue with the append function within a for loop in my code. The string being passed to the function isn't parsing correctly and results in an error. How can I go about resolving this problem? Thanks! function getDetailPopUp ...

javascriptjqueryhtml

Retrieve the server code periodically and automatically refresh the form elements

Let's kick things off by explaining how the application functions: (please note there are multiple users on the page such as Patient M, Patient E, and so forth) 1) Check In: Next to Patient X's name, you will find a button labeled Check In. This ...

phpjavascriptjqueryhtmlajax

React - Although the array in the state is being updated, only the first object in the array is visible on the screen

I'm currently working on developing a web application using the PokeAPI. My primary objective is to retrieve and display a variety of Pokemon based on their type. At the moment, I've set my API URL to specifically fetch fire type Pokemon. Howeve ...

javascriptjqueryajaxreactjsrest

The replaceWith function in jQuery does not support <script> elements

I am faced with a situation where my AJAX response includes HTML code, including <script> elements. My goal is to replace an existing element with this HTML content. However, when I attempt to do so using the following code: $(element).replaceWith( ...

jqueryhtmlajaxreplacewith

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

javascripthtmlcssprintingmedia-queries

Assistance with offsetting a jQuery drop down menu

This is the third jQuery script that I've been working on. While parts of it have been inspired by other scripts, I'm now focusing on implementing a specific feature. I've dedicated 4 hours to solving the issue of displaying the submenu on ...

javascriptjquerydrop-down-menu

How to choose elements using jQuery according to their CSS properties?

Seeking a solution to a unique challenge I've encountered. The website I frequent has found a way to bypass my uBlock extension by using a script that generates random element classes, such as: <div class="lcelqilne1471483619510ttupv"></div& ...

javascriptjquerycss

What steps can I take to stop search engines from crawling and indexing one specific page on my website?

I'm looking for a way to prevent search engines from indexing my imprint page. Is there a method to achieve this? ...

htmlseo

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

htmlcssbootstrap-4

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

My current Wordpress blog displays 20 posts. I am looking to apply a specific class to posts numbered 2 through 10, and then again from 12 to 20. I do not want the first post or post number 11 to have this class added. I attempted using CSS selectors lik ...

jquerycsswordpress

Progressive zoom effect applied to an image in a JavaScript slideshow

Can someone assist me in replicating the zooming effect demonstrated in this code snippet: `http://codepen.io/docode/pen/EjyVQY`. I am specifically focusing on the zooming feature of this slideshow. How can I replicate this zooming effect in JS rather t ...

javascriptjqueryhtmlcsszooming

Is it possible to dynamically override inline styles?

My HTML code is as follows: <div title="remove css"style="position:relative;">Remove my style</div> After the page loads, I need to completely remove the position style attribute. Due to limitations, I cannot override the CSS. Is there a way ...

javascriptjquerycssangularjs

Issue with div not resizing as content is added

HTML Code <div class="container"> <div class="tip_text">A</div> <div class="tip_content">text example</div> </div> <br /><br /><br /> <div class="container"> <div class="tip_text ...

csshtml

Can you tell me the Bootstrap 4 equivalent class for '.well'?

While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4

What's the deal with $routeProvider in angularJS?

I'm having some trouble with my simple web app that I'm trying to update using route provider. Everything works fine when I click on the list items on the page, but when I refresh the page, I get a 404 error. It seems like it's trying to acc ...

javascripthtmlangularjs