{"id":1269,"date":"2011-03-22T20:27:25","date_gmt":"2011-03-22T20:27:25","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1269"},"modified":"2011-03-22T20:36:35","modified_gmt":"2011-03-22T20:36:35","slug":"using-the-browser-resize-event-in-jquery","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1269","title":{"rendered":"Using the Browser Resize Event in jQuery"},"content":{"rendered":"<p>jQuery ties into this event in a browser independant way. The following code fragment illustrates the use of this. Note tha following points:-<\/p>\n<ul>\n<li>Different browsers implement resize differently. Most fire continual events during the resize, but some browsers (e.g. I believe older versions of Firefox) just fire the resize at the end of the drag. You therefore cannot predict how often and when the resize is called.<\/li>\n<li>You need to place the code in the body section \u2013 I placed it in the head initially and it was never called.<\/li>\n<li>When referring to a function defined in the head section as I have here, you need to prefix the call with \u201c<em>document.\u201d<\/em> otherwise the target function appears out of scope. The example assumes that <em>yourFunctionName<\/em> is a Javascript function defined elsewhere, e.g. in the header section of the page.<\/li>\n<\/ul>\n<p>\u00a0<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;script type=&#8221;text\/javascript&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/*<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 * This script block executes the target function on a resize.<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 * Note that jQuery has a browser independant means to hook into the event.<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 *\/<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery(window).resize(function() {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/alert(&#8216;resize called&#8217;);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.yourFunctionName(args);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/script&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery ties into this event in a browser independant way. The following code fragment illustrates the use of this. Note tha following points:- Different browsers implement resize differently. Most fire continual events during the resize, but some browsers (e.g. I believe older versions of Firefox) just fire the resize at the end of the drag. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[89,119,184,16,15],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1269"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1269"}],"version-history":[{"count":1,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1269\/revisions"}],"predecessor-version":[{"id":1272,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1269\/revisions\/1272"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}