Type to Search Anywhere

Developer
Jeremy P. Beasley
Size
2,858 Kb
Views
24,288
  1. Type to Search Anywhere Previews
  2. Type to Search Anywhere HTML Codes
  3. Type to Search Anywhere CSS Codes
  4. Type to Search Anywhere JS Codes

How do I make an type to search anywhere?

What is a type to search anywhere? How do you make a type to search anywhere? This script and codes were developed by Jeremy P. Beasley on 20 September 2022, Tuesday.

Type to Search Anywhere Previews
IQ Test

Type to Search Anywhere - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Type to Search Anywhere</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav> <ul> <li class="search"></li><li><p>Type anywhere (or click the icon) to search.</p></li> </ul>
</nav>
<div id="searchOverlay" style="display:none;">
<input autofocus type="text" placeholder="Search anything...">
</div>
<div class="wrapper"> <img src="http://rack.0.mshcdn.com/media/ZgkyMDE0LzAzLzEwLzRmL2syYWJzdHJhY3QxLmQ5NmFhLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/b43e94c0/c11/k2-abstract-1931b-30x25-2013.jpg"> <img src="http://rack.0.mshcdn.com/media/ZgkyMDE0LzAzLzEwLzRmL2syYWJzdHJhY3QxLmQ5NmFhLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/b43e94c0/c11/k2-abstract-1931b-30x25-2013.jpg"> <img src="http://rack.0.mshcdn.com/media/ZgkyMDE0LzAzLzEwLzRmL2syYWJzdHJhY3QxLmQ5NmFhLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/b43e94c0/c11/k2-abstract-1931b-30x25-2013.jpg"> <img src="http://rack.0.mshcdn.com/media/ZgkyMDE0LzAzLzEwLzRmL2syYWJzdHJhY3QxLmQ5NmFhLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/b43e94c0/c11/k2-abstract-1931b-30x25-2013.jpg">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Type to Search Anywhere - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic);
body { font-family: Karla;
}
#searchOverlay { width: 80%; height:; padding: 10%
}
#searchOverlay input, #searchOverlay input:focus { width: 100%; padding: 0px; border: 0px; font-size: 4em; margin-bottom: 2rem; outline: none;
}
nav { margin: 10%;
}
nav ul, nav ul li { list-style: none; padding: 0px; float: left; margin: 0px;
}
nav ul li { float: left;
}
nav ul li p { margin-top: .5em; margin-left: 1em;
}
nav .search { height: 2em; width: 2em; background: white url(https://d30y9cdsu7xlg0.cloudfront.net/png/1311-42.png) center center; background-size: 100%;
}
nav .search:hover { opacity: .4; cursor: pointer;
}
nav .search.close { background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/27846-84.png);
}
/* other stuff */
.wrapper { padding: 10%; width: 80%;
}
.wrapper img { float: left; width: 45%; margin-bottom: 10%
}
.wrapper img:nth-child(even) { margin-left: 10%;
}

Type to Search Anywhere - Script Codes JS Codes

// setting up DOM references
var searchOverlay = $("#searchOverlay");
var searchInput = $("#searchOverlay input");
var searchButton = $("nav .search");
// hide the searchOverlay
searchOverlay.hide();
// Status indicating that search is not active.
var searchStatus = false;
// If any key is pressed while CMD is not pressed, begin search
window.onkeydown = function (e) { if (!e) e = window.event; if (!e.metaKey) { if(e.keyCode >= 65 && event.keyCode <= 90 || e.keyCode >= 48 && event.keyCode <= 57) { if (!searchStatus) { searchOverlay.show(); searchOverlay.find('input').focus(); searchStatus = true; console.log("searchStatus " + searchStatus); searchButton.addClass("close"); } } }
}
// Open and close search when magnifying class or close is tapped
searchButton.click(function() { if (!searchStatus) { searchOverlay.show();	searchOverlay.find('input').focus();	searchStatus = true;	console.log("searchStatus " + searchStatus); } else { searchOverlay.hide(); searchOverlay.find('input').val(''); searchStatus = false; console.log("searchStatus " + searchStatus); searchButton.removeClass("close"); }
});
// Close search when ESC is pressed
$(document).keyup(function(e) { if (e.keyCode == 27 && searchStatus) { searchOverlay.hide(); searchOverlay.find('input').val(''); searchStatus = false; console.log("searchStatus " + searchStatus); searchButton.removeClass("close"); }
});
// Close search is DEL/Backspace is pressed when input is already empty
searchInput.keyup(function() { if (searchStatus) { if (!this.value) { searchOverlay.hide(); searchOverlay.find('input').val(''); searchStatus = false; console.log("searchStatus " + searchStatus); searchButton.removeClass("close"); } }
});
Type to Search Anywhere - Script Codes
Type to Search Anywhere - Script Codes
Home Page Home
Developer Jeremy P. Beasley
Username jeremypbeasley
Uploaded September 20, 2022
Rating 3
Size 2,858 Kb
Views 24,288
Do you need developer help for Type to Search Anywhere?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeremy P. Beasley (jeremypbeasley) Script Codes
Name
Responsive photo tiles
Lightbox from BG Image
Calling Webcam API
Money Entry
CSS Background Image for GOOD Corps
Lazy Load Test
Credit Card Form Auto-tab Continuous Typing V2
Art 3.2
A Pen by Jeremy P. Beasley
Google Image Search by Keyword
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!