In our first task we'll store some information about the current browsing environment, such as the URL of the current page. We'll also parse any attached style sheets looking for media queries.
We'll start with our document ready shortcut, as we have in most of our other projects. In the heat-map-client.js file, add the following code:
$(function () {
});All the additional code we add to this file will go into this callback function.
We'll first set a series of variables that will be used throughout the script. We'll also need to parse any attached style sheets and look for media queries so that we can determine which breakpoints are defined for the different layouts.
Note
Media queries are a way to specify in CSS that a group of styles should only be applied if certain conditions are met, such as the width of the screen. For more information see http://en.wikipedia.org/wiki/Media_queries.
Add the following code inside...