CSS media queries are easy. Once you get your head around the min and max rules, then you can quickly whip up a responsive design. But there are cases when you need to go further with your responsive design. What happens if you want to dynamically create an element based on the window size? Yes sure with CSS you can create a mobile version of the element and hide it on larger screens and acheive the same result but this is messy.
In this example we are going to look at how to collapse a search bar based on a set window size using javascript. For this example we will be working with a wordpress search form which is marked up (HTML) like this:
[dt_code]
<form role=”search” method=”get” class=”search-form” action=”http://uhp.theitman.net.au/”>
<label>
<span class=”screen-reader-text”>Search for:</span>
<input class=”search-field” placeholder=”Search …” value=”” name=”s” title=”Search for:” type=”search”>
</label>
<button type=”submit” class=”search-submit”><span class=”fa fa-search”></span></button>
</form>
[/dt_code]
Getting the current screen size
The first thing we need to do is get the current screen size. This is easy with jQuery:
[dt_code]var screenSize = $(window).width();[/dt_code]
You’ll notice I have stored the screen size as a variable. This is for two reasons: firstly because JS is awesome and lets us store anything in the DOM as a variable and also for performance reasons.
Next lets run the javascript version of a media query:
[dt_code]
if (screenSize < 1200 && screenSize >= 768) {
$(“form.search-form”).addClass(“collapsed”);
}
[/dt_code]
Pretty simple huh? All we did was to take our screen size variable and compare it with some set points. In this case I have used bootstraps’ default media query points, but all you need to do is adjust these numbers. The reason I have chosen to go between 1200 and 768px is to show you how to run multiple queries. This line of code is similar to the following in CSS:
[dt_code]
@media all and (min-width: 768px) and (max-width: 1200px) {
//css rules go here.
}
[/dt_code]
Finishing Off
Now to finish it all off lets wrap our code in a function and invoke this functions on load and when resizing:
[dt_code]
jQuery(document).ready(function($) {
// You can use $() inside of this function
function addTabletClass() {
var screenSize = $(window).width();
console.log(screenSize);
if (screenSize < 1200 && screenSize >= 768) {
$(“form.search-form”).addClass(“collapsed”);
}
}
$(window).load(addTabletClass);
$(window).resize(addTabletClass);
}); //Finish JS
[/dt_code]
Now all you need to do is add some CSS for your collapsed search bar. For example you could write the following:
[dt_code]
form.search-form.collapsed input {
/* CSS for our search form on mobile devices */
width: 0px
}
form.search-form input {
transition: width 0.5s ease;
}
[/dt_code]
What this will do is create “collapse” the input inside our search form
