Website Design

March 22nd, 2017
4minuteread
#WEBSITEDESIGN, #Design&Usability, #DrupalDevelopment

Well first thing you might be asking yourself is why would a front-end developer want to do such a thing? The answer is responsive website design! You might be modifying a drop-down menu to work on mobile devices or redirecting mobile device users to a different area of your site. Either way, if you are using jQuery there is a great way to do this.

Load jQuery

First you need to add the jQuery javascript library to your website if it is not already installed. Simply download the script at jquery.com and add the following code inside the <head> of your HTML document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

 Add the Javascript

After you have added jQuery you can use the following code in your custom javascript file. You may change the "739" to a different number depending on the device resolution you are targeting.

if ( $(window).width() > 739) {      
 //Add your javascript for large screens here 
} 
else {
//Add your javascript for small screens here 
 }

The End

Yep, we're already done! You can now execute your javascript to target different screen sizes. Let me know if you have any questions or feedback below. Thanks!

About The Author