Search Box in Motion

I found a fascinating resource on how to create an animated search box using CSS3. The only challenge I'm facing is that I need the position to be set as 'relative'. Instead of having the search box in the center of the screen, I want it positioned under an 'h2' element while maintaining the same functionality.

If you'd like to see the implementation, here's the link to the jsfiddle.

Take a look at the code below:

HTML

<h2>
Testing Animated SearchBox
</h2>

<div class="search-wrapper">
    <div class="input-holder">
        <input type="text" class="search-input" placeholder="Type to search" />
        <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
    </div>
    <span class="close" onclick="searchToggle(this, event);"></span>
</div>

JS

searchToggle = function searchToggle(obj, evt){
    var container = $(obj).closest('.search-wrapper');
        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        }
        else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
        }
}

CSS

h2{
  margin-bottom: 50px;
}

.search-wrapper {
    position: relative;
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
}
.search-wrapper.active {}

<!--Remaining styles and elements unchanged-->

If anyone could offer guidance on achieving this, I would greatly appreciate it.

javascriptjqueryhtmlcss

Answer №1

function toggleSearch(obj, evt){
    var container = $(obj).closest('.search-wrapper');
        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        }
        else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
        }
}
.search-wrapper {
    position: relative;
}
.search-wrapper.active {}

.search-wrapper .input-holder {    
    height: 70px;
    width:70px;
    overflow: hidden;
    background: rgba(255,255,255,0);
    border-radius:6px;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    width:450px;
    border-radius: 50px;
    background: rgba(0,0,0,0.5);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
    width:100%;
    height: 50px;
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color:#FFF;
    transform: translate(0, 60px);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
    width:70px;
    height:70px;
    border:none;
    border-radius:6px;
    background: #000;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 50px;
    height:50px;
    margin: 10px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    transform: rotate(45deg);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute; 
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 4px;
    height: 11px;
    left: 9px;
    top: 18px;
    border-radius: 2px;
    background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #FE5F55;
}
.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:24px;
    left:20px;
    width:25px;
    height:25px;
    cursor: pointer;
    transform: rotate(-180deg);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
}
.search-wrapper.active .close {
    left:475px;
    transform: rotate(45deg);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FE5F55;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
Testing Animated SearchBox
</h2>

<div class="search-wrapper">
    <div class="input-holder">
        <input type="text" class="search-input" placeholder="Type to search" />
        <button class="search-icon" onclick="toggleSearch(this, event);"><span></span></button>
    </div>
    <span class="close" onclick="toggleSearch(this, event);"></span>
</div>

You should exclude top and left from the search wrapper style.

View working example on JSFiddle here

Answer №2

To further enhance the close element, a slight adjustment in positioning is all that is required

searchToggle = function searchToggle(obj, evt){
    var container = $(obj).closest('.search-wrapper');
        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        }
        else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
        }
}
h2{
  margin-bottom: 50px;
}

.search-wrapper {
    position: relative;
}
.search-wrapper.active {}

.search-wrapper .input-holder {    
    height: 70px;
    width:70px;
    overflow: hidden;
    background: lightblue;
    border-radius:6px;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
  margin: auto;
    width:450px;
    border-radius: 50px;
    background: lightgreen;
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
    width:100%;
    height: 50px;
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: black;
    transform: translate(0, 60px);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
    width:70px;
    height:70px;
    border:none;
    border-radius:6px;
    background: black;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 50px;
    height:50px;
    margin: 10px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    transform: rotate(45deg);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute; 
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 4px;
    height: 11px;
    left: 9px;
    top: 18px;
    border-radius: 2px;
    background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #FE5F55;
}
.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:24px;
    left: 50%;
    width:25px;
    height:25px;
    cursor: pointer;
    transform: rotate(-180deg);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition-delay: 0.2s;
}
.search-wrapper.active .close {
    left: calc(50% + 250px);
    transform: rotate(45deg);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FE5F55;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
Testing Animated SearchBox
</h2>

<div class="search-wrapper">
    <div class="input-holder">
        <input type="text" class="search-input" placeholder="Type to search" />
        <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
    </div>
    <span class="close" onclick="searchToggle(this, event);"></span>
</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

Are there any APIs available through atmospherejs?

Are there any APIs available on atmospherejs for listing and searching Meteor packages? I am interested in creating an app that can search and list meteor packages. ...

javascriptmeteor

I am attempting to get a jquery plugin to function properly on my Windows 7 Internet Explorer IE7 browser. The plugin in question can be found at http://jvectormap.owl-hollow

I'm encountering some strange issues with my Internet Explorer IE7 browser on Windows 7. The jquery plugin I am attempting to use can be found at . Unfortunately, this plugin is not functioning properly on Internet Explorer IE7 on Windows 7, but it ru ...

javascriptjqueryhtmlcssinternet-explorer

Attempting to successfully integrate the Prerender SPA Plugin with Vue.js CLI 3

Encountering an issue while attempting to build: Building for production...Error: ENOENT: no such file or directory, stat '/Users/me/Code/project/index.html' Software Package: "prerender-spa-plugin": "^3.1.0" Location: vue.config.js: const Pr ...

javascriptwebpackvue.jsvuejs2prerender

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Having created a simple Bootstrap 5 template for my Joomla 4 website, I've been attempting to customize the navbar with CSS in my user.css file. However, it seems that the styles added in user.css are not being applied. I have verified that user.css ...

cssbootstrap-5joomla4

Creating dynamic links with Jquery

Here is a piece of Jquery code that needs to be adjusted: var previewImage = $('#prev'); var newLink = $('<a/>').attr('href', name); previewImage.append(newLink); The current HTML output is <img src=" " id="prev"/& ...

jqueryhtmlhyperlinkhrefvar

Set the modal-dialog to have a fixed width, but ensure that it becomes responsive and adjusts size appropriately when the screen size becomes smaller

Utilizing the default Bootstrap3 CSS files for my project. I've come across an issue where the modal-dialog width is set to 600px by default, while I require it to be 1000px for my screen size. Regardless of the screen size exceeding 1000px, I need t ...

csstwitter-bootstraptwitter-bootstrap-3

Is it possible to utilize JStestDriver for testing JavaScript code embedded within JSP files?

Just a quick question: Is it feasible to conduct unit testing, specifically with JStestDriver, on Javascript code that is embedded within JSP files? Or do I need to extract it into separate external javascript files? ...

javascriptjspunit-testingjs-test-driverdata-integration

Incorporating external content to make it easily discoverable by Google for optimal SEO performance

I am currently working on a project that involves loading external content onto a customer's site. Our main goal is to provide the customer with a simple inclusion method, such as a one-line link similar to Doubleclick, without requiring any server-si ...

javascriptphpajaxseo

Using Cypress for drag and drop functionality within shadow DOM

I encountered an issue in cypress with drag and drop functionality within the shadow dom. My attempt to perform a drag event is as follows: cy.get(".shadow-app>div>div:nth-child(1)", { includeShadowDom: true }).trigger("dragstart&q ...

javascriptdrag-and-dropcypressshadow-domreact-dnd

Managing redundant asynchronous data in AngularJS

Imagine this scenario: In your AngularJS application, a user is spamming input which triggers numerous asynchronous data calls on the backend. This results in constant changes to the displayed data as each fetch request completes. Ideally, we want the fina ...

javascriptangularjsasynchronous

Refreshing a component within a React application

I am new to React and I am experimenting with creating a simple program where you can select a name from a list, which will then display a proverb. I have created an event handler called handleAuthorClick and used setState to update the text accordingly, b ...

javascriptreactjs

Input the latest data into the Bootstrap form

Implementing the bootstrap4 framework in my web application, I have a table displaying various values. Each row includes an edit button at the end of the row (last column). The requirement is that when this edit button is clicked, a form should pop up with ...

javascripthtmlcssbootstrap-4

Click on the image to view in a separate window

I am looking for assistance with a script that can open an image in a new page, not a new window. I have a specific HTML page designated for displaying various images when clicked on. If anyone has any ideas or guidance on how to achieve this, it would be ...

javascriptjquery

How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

How can I make both the menu item and its icon clickable as a link? When either is clicked, the link should work. Here is a CodePen example: http://codepen.io/emilychews/pen/wJrqaR The red square serves as the container for the icon that will be used. ...

javascriptjquerycssanchorpseudo-element

Encountering issues with extracting JSON data in ReactJS constructor using Jquery due to property of null error

Currently, I am delving into the world of ReactJS in order to create a web application that necessitates the use of Jquery for extracting remote JSON data from a server. The issue arises when attempting to extract this data remotely, as manually inputting ...

javascriptjqueryjsonreactjs

Transferring information from Database dropdown menu and jQuery DatePicker to a mySQL Database

Lately, I've been facing a challenge that I can't seem to overcome. I have a client booking form that includes a dropdown menu linked to a database containing various treatments. Additionally, I've integrated a jQuery DatePicker and I'm ...

javascriptphpjqueryhtmlmysql

PHP and MySQL collaborate to create a dynamic, customizable list for

I am new to working with mySQL and currently developing my first website. I have successfully set up the necessary database, but now I am unsure how to implement it. My goal is to allow registered members to provide input for a list structured like this: ...

phphtmlmysqllistphpmyadmin

Position the model in the center of the scene using three.js

Currently, I am utilizing the code below to center an object within the scene. While it works perfectly with the json loader, the issue arises when using either OBJLoader or OBJMTLLoader. function modelLoadedCallback(geometry, materials) { // Create ...

javascriptthree.js

Express/NodeJS encountering a CORS problem, causing services to be inaccessible in Internet Explorer

Currently, I am working on a REST-based service implemented in Express/NodeJS. The code includes CORS (Cross Origin Resource Sharing) implementation to allow services to be consumed from browsers like Chrome and Firefox. However, there seems to be an issue ...

javascriptnode.jsbackbone.jsexpresscors

What is the best way to update the innerHTML of a date input to reflect the current value entered by the user?

Currently, my task involves extracting data from a table by obtaining the innerHTML of each row. The table contains date inputs that can be manually adjusted or generated automatically. However, the innerHTML does not update accordingly. Thus, when exporti ...

javascripthtmljquery