Type to Search Anywhere
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 - 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"); } }
});
Developer | Jeremy P. Beasley |
Username | jeremypbeasley |
Uploaded | September 20, 2022 |
Rating | 3 |
Size | 2,858 Kb |
Views | 24,288 |
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!
Name | Size |
Art 3.2 | 2,432 Kb |
Responsive photo tiles | 2,849 Kb |
Sprite Animation Sequence | 2,715 Kb |
Credit Card Form Auto-tab Continuous Typing V2 | 2,289 Kb |
A Pen by Jeremy P. Beasley | 9,999 Kb |
The Big List | 3,435 Kb |
Google Image Search by Keyword | 2,101 Kb |
CSS Background Image for GOOD Corps | 1,835 Kb |
Scroll to Top | 1,932 Kb |
Lightbox from BG Image | 4,039 Kb |
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!
Name | Username | Size |
My three.js practice | Esambino | 3,203 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Gears | Synvox | 3,278 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Weather App | Kw7oe | 3,162 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
A cube | KyleDavidE | 18,627 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!