JS.Responsive

JS.Responsive is a tool for responsive styling and javascript coding. This is documentation and also live example. Try to resize window and also try other devices such mobile or iPad...

It generates many usefull class names to HTML element which can be used in styling. It is replacement of media queries. In compare to media queries, you can use same tests in javascript and thus improve responsivness of your website.


Actual HTML element classes:

Actual window size:

Actual document size:

Last event object:

Download: JS.Responsive.js (full source)

Instalation

Just include to HEAD element into your document:

<script type="text/javascript" src="path/to/scripts/JS.Responsive.js"></script>

For proper functionality use:

<meta name="viewport" content="width=device-width" />








Documentation

desktop or mobile

This test uses algorithm of detectmobilebrowsers.com - Open source mobile phone detection.

HTML element class names (disjunctive):

Example in SASS:

header background-color: white width: 960px height: 100px html.mobile & position: fixed left: 0 top: 0 width: 100% height: 36px

Javascript methods:

touch or no-touch

TODO DOCUMENTATION

HTML element class names (disjunctive):

Javascript methods:

normal-display or retina-display

TODO DOCUMENTATION

HTML element class names (disjunctive):

Javascript methods:

landscape or portrait

TODO DOCUMENTATION (based only on viewport width and height). See also device-orientation-portrait and device-orientation-landscape.

Javascript methods:

device-orientation-portrait or device-orientation-landscape and device-orientation-0 or device-orientation-90 or device-orientation-180 or device-orientation-270

By the device orientation adds "device-orientation-portrait" or "device-orientation-landscape" class
and "device-orientation-0", "device-orientation-90", "device-orientation-180" or "device-orientation-270" class.

Javascript methods:

window-focused or window-blured

TODO DOCUMENTATION

Javascript methods:

scrolling or no-scrolling

TODO DOCUMENTATION

Javascript methods:

Custom window horizontal sizes (width)

This is the way how we can get around CSS Media queries. We can use javascript to setup custom window size breakpoints.

Javascript methods:

Example:

JS.Responsive.addHorizontalSizePoint( 'small', 480 ).addHorizontalSizePoint( 'medium', 960 );

Common used values:

'x-small', 320 'small', 480 'medium', 960

Complete recommended values:

'x-small', 320 'small', 480 'medium', 960 'large', 1280 'x-large', 1920

Maybe better practice:

'size-mobile', 0 'size-tablet', 480 'size-desktop', 960 JS.Responsive.addHorizontalSizePoint( 'size-mobile', 0 ).addHorizontalSizePoint( 'size-tablet', 481 ).addHorizontalSizePoint( 'size-desktop', 960 ); 0+ size-mobile-more 0..960 size-desktop-less 0..480 size-mobile 481+ size-tablet-more 481..960 size-tablet 960+ size-desktop (default)
Custom window vertical sizes (height)

This is the same like horizontal, but vertical ;)

Javascript methods:

Example:

JS.Responsive.addHorizontalSizePoint( 'vertical-medium', 600 );
Window size

How to read window size - in real time - that ean on mobile browsers also when some pannel went away (hides) when scrolling content.

Javascript methods:

Change of window size can be handled via method addOnChangeHadler.

Document size

How to read document size. When scrolling, document size is greater than window size, but scrollbar reduce size in document a little.

Javascript methods:

Change of window size can be handled via method addOnChangeHadler.

Handling realtime changes - addOnChangeHadler

TODO DOCUMENTATION

Javascript methods:

Example:

JS.Responsive.addOnChangeHadler( function(e){ } );
Testing class names - is

Insert class names to function parameter as one argument(separed by space) or add as separate parameters. Values in parameter are processed as conjuction, and paramaters as disjunction. Conjuction has priority

Javascript methods:

Example:

JS.Responsive.is( "small landscape", "medium portrait" );// procesed as (small AND landscape) OR (medium AND portrait)
Version watching - watchVersion

Provides classes for filtering actual browser version compared to specified version, e.g. class is specifying if the curtent browser version is less (-l), less-equal (-le), greater (-g) or greater-equal (-ge) than the specified version

Javascript methods:

Example:

JS.Responsive.watchVersion( "webkit", 500 );