20/06 2014

Responsive Javascript

Dear Valued visitor,
Thank you so much for your support and interest in the articles on Webegg. Whilst a lot of content is totally free, some of the things I put a lot of work into are slightly restricted in terms of code and demo links. I've had to do this to keep my level of support to the high quality I want to.

Please click below to subscribe, get rid of this message and see this article in it's full glory;

This is a small one off payment of £5 to give you full access to all content on my site forever.

I have been building fully responsive web sites for a couple of years now and it became abundantly clear early on in that time that although responsive sites and the use of Media Queries to build them is a great thing because it reduces the need for multiple sets of code and management of both (this makes it more affordable for clients etc etc etc), it tended to limit the behavior of a site somewhat. Let me explain further:

The main issue was not apparent from any mobile device itself. As I explained in a previous post, it is possible to hide and show an extra element with Media Queries and then detect that from the Javascript, at least that's the way I do it. This means you can send the correct Javascript to the correct device if viewed directly from that device. The issue came because of a trend in the wider Web design world to resize a browser from a desktop machine or laptop and have the site respond that way too. Resizing a desktop browser to see what should appear only on a Mobile device seems wrong to me in principle. Although this trend seems to have taken hold and tends to be a selling point of modern Websites. That is the main reason I wanted to look further into this issue.

The main issue

When you resize a browser window, Media Queries listen all the time for differences in the size of the screen (when it comes to responsive websites, they also have many other uses). Such is currently the job of CSS. The same immediate reaction occurs when you hover over a link or select a block of text. CSS cannot currently control things such as on-page click events or do complicated animations (though this is slowly changing). We have to do all of these things with Javascript and that means changing the HTML & CSS from how it was were originally coded. This is called manipulating the DOM. Once the DOM has been changed, it cannot be changed back to it's original state without refreshing the page. This means that having two conflicting sets of Javascript for Mobile and Desktop can cause all kinds of issues when the browser is resized.

A refreshing solution

It took quite a bit of thought and development time to come up with a solution but essentially I needed a way to refresh the whole page to its original state in order for a site to behave correctly for each breakpoint.

Refreshing the page on resize was extremely annoying and so I had to find a way to refresh only when necessary. Thanks to use of the debounce plugin and some well place variables to detect screen size at the right moments I was able to produce a neat snippet of jquery that allows you to refresh once each time the browser size passes through a breakpoint, either sizing up or down.

The demo is a blank screen but if you resize your browser, you'll see that each time you go small the page will refresh. Size up again and it'll re-refresh.

The Javascript/jQuery

some content here has been restricted.

Although not the largest plugin in the world, the above code doesn't just have to be used to refresh the page. You can perform any action each time the browser size passes through any breakpoint of your choosing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the jquery category. Here are some other related articles also in this category.