Determine screen width with jquery

by Nikolaenko Maxim · Published November 28, 2012 · Updated November 30, 2012

Found a script to determine the screen width via jquery in that cases, if you don't have the option to use css3. Think, will be useful for adaptive layout of the site. Events fire when, when your screen width gets smaller than a given point.

The script is called BREAKPOINTS.JS

$(window).setBreakpoints({
// use only largest available vs use all available
    distinct: true, 
// array of widths in pixels where breakpoints
// should be triggered
    breakpoints: [
        320,
        480,
        768,
        1024
    ] 
});     

$(window).bind('enterBreakpoint320',function() {
    ...
});

$(window).bind('exitBreakpoint320',function() {
    ...
});

$(window).bind('enterBreakpoint768',function() {
    ...
});

$(window).bind('exitBreakpoint768',function() {
    ...
});


$(window).bind('enterBreakpoint1024',function() {
    ...
});

$(window).bind('exitBreakpoint1024',function() {
    ...
});

$(window).setBreakpoints({

// use only largest available vs use all available

distinct: true,

// array of widths in pixels where breakpoints

// should be triggered

breakpoints: [

320,

480,

768,

1024

]

});

$(window).bind('enterBreakpoint320',function() {

...

});

$(window).bind('exitBreakpoint320',function() {

...

});

$(window).bind('enterBreakpoint768',function() {

...

});

$(window).bind('exitBreakpoint768',function() {

...

});

$(window).bind('enterBreakpoint1024',function() {

...

});

$(window).bind('exitBreakpoint1024',function() {

...

});

To see an example of how the script works, go to link.

The script can be downloaded from github.

Online tutoring services. List of courses I teach

Basic web design course;
Site layout;
General course on CMS WordPress and continuation of the course on template development;
Website development in PHP.