{"id":238,"date":"2021-03-21T15:30:48","date_gmt":"2021-03-21T15:30:48","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=238"},"modified":"2021-03-21T15:47:47","modified_gmt":"2021-03-21T15:47:47","slug":"jquery-window-width","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/jquery-window-width\/","title":{"rendered":"jQuery Window Width – Determine Browser Window Size, Responsive Design"},"content":{"rendered":"\n

jquery window width, you\u2019ll need it if you\u2019re working with Responsive Design<\/strong> and\/or need to figure out the width of the browser Window?<\/strong> Are you using a responsive design layout and using viewport, but need a way to determine window width?<\/strong> jQuery width() and jQuery resize() can help.<\/p>\n\n\n\n

<\/code><\/pre>\n\n\n\n
Responsive Design<\/h2>\n\n\n\n
With so many devices able to access the internet, Responsive Design<\/strong> is becoming a necessity.   Smart phones, tablets, laptops, and desktop computers have different viewable areas. Viewport is the window size of the device. We\u2019ll use jquery width and resize functions to determine the window width<\/strong> of the screen thus aiding us in our Responsive Design.<\/p>\n\n\n\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/><\/code><\/pre>\n\n\n\n
To determine the browser window width and if it gets resized we\u2019ll use:<\/p>\n\n\n\n
  • jquery width<\/li>
  • jquery resize<\/li>
  • window<\/li><\/ul>\n\n\n\n
    jQuery Window Width Determined<\/h2>\n\n\n\n
    jQuery .width() returns a numerical value only, i.e.325.  The value is in pixels.  However, .css(width) will return the number and units, i.e. 325px.   We want to use jQuery window width<\/strong> since we\u2019ll test for numerical values later.<\/p>\n\n\n\n
    var wi = $(window).width(); \/\/ Stores the numerical value of the width into the variable \"wi\"<\/code><\/pre>\n\n\n\n
    Window vs. Document vs. Screen<\/h2>\n\n\n\n
    Why window width?  The window \u201cholds\u201d the document. Because the document is what gets loaded into the Window object we\u2019ll use $(window).width().  I also use  jquery window width instead of screen width.  If someone doesn\u2019t have their browser window<\/strong> maximized to full screen then it only makes sense to get the width of the window size they are using and not the screen.<\/p>\n\n\n\n
    $(window).width();   \/\/ This will return the width of browser viewport\n$(document).width(); \/\/ This will return the width of HTML document\n$(screen).width(); \/\/ This will return the width of the users screen\n \n\/\/Since the document is what gets loaded into the Window object, and the \n\/\/browser window may not be maximized to full screen we'll use $(window).width();<\/code><\/pre>\n\n\n\n
    jQuery Window Resize<\/h2>\n\n\n\n
    What happens if the window is resized?  Luckily jQuery has a function to test if an object gets resized.  The code below will show the window width when resized.<\/p>\n\n\n\n
    $(window).resize(function() {\n        var wi = $(window).width();\n        $(\"p.testp\").text('Screen width is currently: ' + wi + 'px.');\n});<\/code><\/pre>\n\n\n\n
    jQuery Window Width<\/h2>\n\n\n\n
    The code below will use jQuery window width to show the initial screen width, but not once it\u2019s resized.<\/p>\n\n\n\n
    $(window).resize(function() {\n        var wi = $(window).width();\n        $(\"p.testp\").text('Screen width is currently: ' + wi + 'px.');\n});<\/code><\/pre>\n\n\n\n
    jQuery Window Width<\/h2>\n\n\n\n
    The code below will use jQuery window width to show the initial screen width, but not once it\u2019s resized.<\/p>\n\n\n\n
    var wi = $(window).width();  \n$(\"p.testp\").text('Initial screen width is currently: ' + wi + 'px.');<\/code><\/pre>\n\n\n\n
    jQuery Window Width Determined Initially and When Resized<\/h2>\n\n\n\n
    We\u2019ll put it all together here.  We\u2019ll use jQuery window width and resize as we did above.  I will provide the HTML to be manipulated further below.<\/p>\n\n\n\n
    \/*\n* How to detect browser width\n*\/\n$(window).ready(function() {\n    var wi = $(window).width();  \n    $(\"p.testp\").text('Initial screen width is currently: ' + wi + 'px.');\n \n    $(window).resize(function() {\n        var wi = $(window).width();\n \n        if (wi <= 480){\n            $(\"p.testp\").text('Screen width is less than or equal to 480px. Width is currently: ' + wi + 'px.');\n            }\n        else if (wi <= 767){\n            $(\"p.testp\").text('Screen width is between 481px and 767px. Width is currently: ' + wi + 'px.');\n            }\n        else if (wi <= 980){\n            $(\"p.testp\").text('Screen width is between 768px and 980px. Width is currently: ' + wi + 'px.');\n            }\n        else if (wi <= 1200){\n            $(\"p.testp\").text('Screen width is between 981px and 1199px. Width is currently: ' + wi + 'px.');\n            }\n        else {\n            $(\"p.testp\").text('Screen width is greater than 1200px. Width is currently: ' + wi + 'px.');\n            }\n    });            \n});<\/code><\/pre>\n\n\n\n
    jQuery Window Width HTML<\/h2>\n\n\n\n
    Below is the HTML required. We use the jQuery \/ javascript code above to manipulate the HTML code below.<\/p>\n\n\n\n
    <!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<head>\n    <title>Detect Browser Window Width<\/title>\n    <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=iso-8859-1\" \/>\n    <script type=\"text\/javascript\" src=\"jquery.js\"><\/script>\n    <!-- Note - You must place your Javascript in an external file for this to work correctly -->\n    <script type=\"text\/javascript\" src=\"detect.js\"><\/script>\n<\/head>\n<body>\n    <p class=\"testp\"><\/p>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    jquery window width, you\u2019ll need it if you\u2019re working with Responsive Design and\/or need to figure out the width of the browser Window? Are you using a responsive design layout and using viewport, but need a way to determine window width? jQuery width() and jQuery resize() can help. Responsive Design With so many devices able to access the internet, Responsive Design is becoming […]<\/p>\n","protected":false},"author":1,"featured_media":127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-238","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":2,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":240,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/238\/revisions\/240"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/127"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}