CODEWITHSUNDEEP
javascriptjqueryresizeviewport
user1406440
user1406440

Reputation: 1645

'Media-queries' for javascript - different code for different viewport height/widths

The problem

I'm using javascript to calculate widths of elements to achieve the layout I'm after. The problem is, I don't want to load the code on smaller screen sizes (when the screen width is less than 480px for example). I'd like this to work on load and on browser/viewport resize.

I'd consider small screen devices 'the default' and working up from there. So, none of the following script is called by default, then if the browser width is greater than 480px (for example), the following script would be called:

The code

$(document).ready(function() {

    //Get the figures width
    var figure_width = $(".project-index figure").css("width").replace("px", "");

    //Get num figures
    var num_figures = $(".project-index figure").length;

    //Work out how manay figures per row
    var num_row_figures = Math.ceil(num_figures / 2);

    //Get the total width
    var row_width = figure_width * num_row_figures;

    //Set container width to half the total
    $(".project-index").width(row_width);

    x = null;
    y = null;

    $(".project-index div").mousedown(function(e) {
        x = e.clientX;
        y = e.clientY;
    });

    $(".project-index div").mouseup(function(e) {
        if (x == e.clientX && y == e.clientY) {
            //alert($(this).next().attr("href"));
            window.location.assign($(this).next().attr("href"));
        }
        x = y = null;
    });

});

// Drag-on content
jQuery(document).ready(function() {
    jQuery('#main').dragOn();
});

The extra bit

The slight difference on larger screens is to do with the browser/viewport height. This is in regards to the line:

var num_row_figures = Math.ceil(num_figures / 2);

You can see once the calculation has a value, it divides it by 2. I only want this to happen when the browser/viewport height is above a certain amount - say 600px.

I'd be happy with this being the 1st state and then the value is divided by 2 if the height is greater than 600px if it's easier.

Can anyone help me/shed some light on how to manage my script this way. I know there's media queries for managing CSS but I can't seem to find any resources for how to manage javascript this way - hope someone can help.

Cheers, Steve

Upvotes: 0

Views: 633

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

You can use window.matchMedia, which is the javascript equivalent of media queries. The matchMedia call creates a mediaQueryList object. We can query the mediaQueryList object matches property to get the state, and attach an event handler using mediaQueryList.addListener to track changes.

I've added an example on fiddle of using matchMedia on load and on resize. Change the bottom left pane height and width (using the borders), and see the states of the two queries.

This is the code I've used:

<div>Min width 400: <span id="minWidth400"></span></div>
<div>Min height 600: <span id="minHeight600"></span></div>

var matchMinWidth400 = window.matchMedia("(min-width: 400px)"); // create a MediaQueryList
var matchMinHeight600 = window.matchMedia("(min-height: 600px)"); // create a MediaQueryList

var minWidth400Status = document.getElementById('minWidth400');
var minHeight600Status = document.getElementById('minHeight600');

function updateMinWidth400(state) {
    minWidth400Status.innerText = state;
}

function updateMinHeight600(state) {
    minHeight600Status.innerText = state;
}

updateMinWidth400(matchMinWidth400.matches); // check match on load

updateMinHeight600(matchMinHeight600.matches); // check match on load

matchMinWidth400.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinWidth400(MediaQueryListEvent.matches);
});

matchMinHeight600.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinHeight600(MediaQueryListEvent.matches);
});

Upvotes: 2

Rohit Katyal
Rohit Katyal

Reputation: 67

 @media screen and (max-width: 300px) {
body {
    background-color: lightblue;
}
}

So i searched a bit and came up with this example from w3 schools .http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1 i think this is something you are trying to achieve.

For pure js , you can get the screen width by screen.width

Upvotes: 0

Related Questions