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)
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" />
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:
TODO DOCUMENTATION
HTML element class names (disjunctive):
Javascript methods:
TODO DOCUMENTATION
HTML element class names (disjunctive):
Javascript methods:
TODO DOCUMENTATION (based only on viewport width and height). See also device-orientation-portrait and device-orientation-landscape.
Javascript methods:
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:
TODO DOCUMENTATION
Javascript methods:
TODO DOCUMENTATION
Javascript methods:
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)
This is the same like horizontal, but vertical ;)
Javascript methods:
Example:
JS.Responsive.addHorizontalSizePoint( 'vertical-medium', 600 );
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.
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.
TODO DOCUMENTATION
Javascript methods:
Example:
JS.Responsive.addOnChangeHadler( function(e){
} );
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)
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 );