"Full Screen Search"
Bootstrap 3.1.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Full Screen Search</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#search">Search</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <div id="search"> <button type="button" class="close">×</button> <form> <input type="search" value="" placeholder="type keyword(s) here" /> <button type="submit" class="btn btn-primary">Search</button> </form> </div>
body { padding: 40px 0px; } #search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; } #search.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; } #search input[type="search"] { position: absolute; top: 50%; width: 100%; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0); font-size: 60px; font-weight: 300; text-align: center; border: 0px; margin: 0px auto; margin-top: -51px; padding-left: 30px; padding-right: 30px; outline: none; } #search .btn { position: absolute; top: 50%; left: 50%; margin-top: 61px; margin-left: -45px; } #search .close { position: fixed; top: 15px; right: 15px; color: #fff; background-color: #428bca; border-color: #357ebd; opacity: 1; padding: 10px 17px; font-size: 27px; }
$(function () { $('a[href="#search"]').on('click', function(event) { event.preventDefault(); $('#search').addClass('open'); $('#search > form > input[type="search"]').focus(); }); $('#search, #search button.close').on('click keyup', function(event) { if (event.target == this || event.target.className == 'close' || event.keyCode == 27) { $(this).removeClass('open'); } }); //Do not include! This prevents the form from submitting for DEMO purposes only! $('form').submit(function(event) { event.preventDefault(); return false; }) });

Related: See More


Questions / Comments:

Well done!! .. Is it possible to integrate the pop-out with Google Custom Search box?

Marzo () - 3 years ago - Reply 0


So I put the code (might I add, brilliant job, very cool program) for this into my meteor/bootstrap project, and everything seems to work ok except the text box is constatly outlined in blue, and the text gets cut off on the top and bottom. I can add a height tag to remove the bottom cutoff, but the blue outline and top cutoff persists. Any help would be great, and thanks again for the code in the first place, mouse0270!

dylan () - 3 years ago - Reply 0


I would need to see your code to help you resolve this issue.

mouse0270 () - 3 years ago - Reply 0


how do you suggest i show it to you?

dylan () - 3 years ago - Reply 0


Provide an online demo or send me the files (assuming it isn't connected to a database)

mouse0270 () - 3 years ago - Reply 0


it is connected to a database. it uses mongo db since it is a meteor project

dylan () - 3 years ago - Reply 0


Does the console throw any errors?

mouse0270 () - 3 years ago - Reply 0


I don't know but It didn't open on my script. I rechecked everything on firebug but this script didn't fire on click.

Slashable () - 3 years ago - Reply 0


were the same problem. Please help us.

Glenncamz () - 3 years ago - Reply 0


I would need to see your code to help you resolve this.

mouse0270 () - 3 years ago - Reply 0


I would need to see your code to help you resolve this.

mouse0270 () - 3 years ago - Reply 0


Awesome job! Although I am having trouble loading it on browsers for mobile devices. It's kinda slow. How can I fix that?

Chris () - 3 years ago - Reply 0


not working for me . just copied all codes and it doesn't work

noname () - 3 years ago - Reply 0


I know this is old but I'd like to know how can I change or remove the blue X that appears next to the keyword (to delete it) in Chrome. Thanks!

The struggle is real. () - 3 years ago - Reply 0


What blue "X"

mouse0270 () - 3 years ago - Reply 0


Does it work if I hit Enter btn?

Gleb Korolenko () - 3 years ago - Reply 0


Perfect!!!

Anaïs () - 3 years ago - Reply 0


Hey Mouse0270,

Is there a way to prefix a symbol in search. I see that you have a placeholder, which is awesome. But for me, I have been trying to get my mind around how to prefix '$' in front of what the user types. Is that something you can comment on?

Andersen () - 4 years ago - Reply 0


This is actually a lot more complicated due to the fact that the textbox is 100% the width of the screen so you can't just use css or a div because it would place the text at the very beginning/left side of the screen. So I think I came up with a workaround. You can check it out here: http://bootsnipp.com/mouse0...

I hope this is what you were looking for, if not just let me know.

mouse0270 () - 4 years ago - Reply 0


you could add your style like z-index:1 if you would like to.

Brian van Vlymen () - 4 years ago - Reply 0


though its nothing and so totally stupid till I clicked on search I cant believe you did awesome job.

Brian van Vlymen () - 4 years ago - Reply 0


i think #search.open want z-index

mexperience () - 4 years ago - Reply 0


Can someone provide me with a snippet to include which will allow me to input search queries and receive results accordingly.

Talha () - 4 years ago - Reply 0


What do you plan on using for searching? A google, bing, yahoo widget or something else all together?

mouse0270 () - 4 years ago - Reply 0


Looks fantastic! Nice job!

Teri Yeri () - 4 years ago - Reply 0


Amazing!!

Tiaan Swart () - 4 years ago - Reply 0


amazing!! nice job!

Leonan () - 4 years ago - Reply 0


This is really bad design, there's no clear close/back, it doesn't work with keyboard shortcuts, and it takes over my full 4k monitor with a tiny search box(60px fixed size font).

scragar () - 4 years ago - Reply 0


You're an ass!

Build it yourself!!! Oh, wait... I bet you can't!

Kraymer () - 4 years ago - Reply 0


I have added a close button to make a more visible way of closing the search box. I have also made it so pressing 'escape' will close the the search box. I am sorry about the font size though, I really don't want to write script that will scale and center the search input and button with the screen size because that seems like more work than is needed for a simple snippet meant to inspire you to build upon.

I would have liked to say ask nicely and you shall receive, but you kinda sounded like a dick in your comment. Since this is free code for you to use that I took the time to write and share I am going to assume I am just taking you comment more to heart than I should.

mouse0270 () - 4 years ago - Reply 0


Sorry, didn't mean to sound like that, I've got a massive thing for accessibility, and when I first used this and didn't see a clear and easy way to dismiss it I saw it as a major problem(because most users are unwilling to try things to resolve an issue, I know people who'd get into that situation, give up finding a close button and reload the page, or search google for your site again).

That turn around time in fixing the complaints though is awesome, and I thank you for actually responding, reading my comment I know what you mean, it wasn't intentional, and I'm sorry.

scragar () - 4 years ago - Reply 0


Like I said, I probably took it more to heart than it was meant. You did have very valid points. Since this does take over the entire screen it should have a clear way to back out of it. As for keyboard accessibility I have found that a lot of users on my sites do not even realize they can use the keyboard to do certain things and I usually don't add it anymore unless it is requested.

mouse0270 () - 4 years ago - Reply 0


Dont listen to scragar. It would be a different story if the snippet was paid for. It is an amazing snippet. Thank you for taking the time to build it.

Adam Looze () - 4 years ago - Reply 0


Man, this is a really great snippet, you have gone far and beyond being awesome :)

There are a lot of people using Bootsnipp and some don't understand that this is not a "freelancer" type of website and all work done here comes out of somebody's free time. I would suggest not paying too much attention to negative comments because it's really difficult to please 10,000 people at once.

You've been doing some exceptional work on Bootsnipp and I'm really impressed with every snippet you make, keep up the good work!

maxsurguy () - 4 years ago - Reply 0


Cool feature and so easy to implement, bravo!

Webrunner () - 4 years ago - Reply 0


Thank you! Glad to see you like it.

mouse0270 () - 4 years ago - Reply 0


This is so fancy.

Win () - 4 years ago - Reply 0


Sorry to ask but I don't realize how to send the form to another .php page to be processed. Thanks in advance.!

Pablo Batalla () - 4 years ago - Reply 0


you'll need to have an "action" attribute defined for the "form" tag.

maxsurguy () - 4 years ago - Reply 0


Thanks Max for your reply. I already did that and nothing happens. Here's my code:

<form role="form" action="search.php" data-toggle="validator" method="POST">
<input type="search" value="" placeholder="type here"/>
<button type="submit" class="btn btn-primary">find</button>
</form>

Pablo Batalla () - 4 years ago - Reply 0


If you copied all of my JS you need to remove the

$('form').submit(function(event) {
event.preventDefault();
return false;
})

This is purely for the demo, it prevents you from bugging out the iframe on bootsnipp.

mouse0270 () - 4 years ago - Reply 0


Dude, awesome snippet, but can you please put a comment in your JS stating you should remove that last part..? That will save JS nitwits like me a lot of time and frustration from trying to figure out why (all of!!) their forms aren't submitting anymore... :D

Hugo () - 4 years ago - Reply 0


ROFL...Yep same here....7 hours later I decided to read this thread :)

sheyes () - 4 years ago - Reply 0


Thanks @mouse0270!

maxsurguy () - 4 years ago - Reply 0


added the comment to the JavaScript.

mouse0270 () - 4 years ago - Reply 0


you rock!

maxsurguy () - 4 years ago - Reply 0


Awesomeness! It was just one of those Mondays. couldn't see wood for trees :)

sheyes () - 4 years ago - Reply 0


In all honestly, I should have done this before. I get an email or two about this snippet a week. @sheyes:disqus I have had those kinda days before.

mouse0270 () - 4 years ago - Reply 0