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" />

Test input field:

Documentation

desktop or mobile

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

HTML element class names (disjunctive):

mobile - if mobile phone is detected
desktop - else this class name

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:

JS.Responsive.isMobile() - (Boolean) if mobile returns true else false.

touch or no-touch

TODO DOCUMENTATION

HTML element class names (disjunctive):

touch - if touch device is detected
no-touch - else this class name

Javascript methods:

JS.Responsive.isTouch() - (Boolean) if touch device returns true else false.

normal-display or retina-display

TODO DOCUMENTATION

HTML element class names (disjunctive):

retina-display - if retina display is detected
normal-display - else this class name

Javascript methods:

JS.Responsive.isRetina() - (Boolean) if retina display returns true else false.

landscape or portrait

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

Javascript methods:

JS.Responsive.isLandscape() - (Boolean) if landscape orientation returns true else false.
JS.Responsive.isPortrait() - (Boolean) if portrait orientation returns true else false.

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:

JS.Responsive.getDeviceOrientation() - (String) Returns device orientation "portrait" or "landscape".
JS.Responsive.getDeviceOrientationAngle() - (Number) Returns angle of device orientation 0, 90, 180, 270 in degrees cross clock wise.

window-focused or window-blured

TODO DOCUMENTATION

Javascript methods:

JS.Responsive.isFocused() - (Boolean) if browser window is focused returns true else false.

scrolling or no-scrolling

TODO DOCUMENTATION

Javascript methods:

JS.Responsive.isScrolling() - (Boolean) if document is scrolled returns true else false.
JS.Responsive.AFTER_SCROLL_TIMEOUT - (Number) timeout for end of scroll (in ms). Default value is 250.

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:

JS.Responsive.addHorizontalSizePoint( name, width ) - (self) adds horizontal size breakpoint.
- @name - (String) name of your size point - whatever but must be css class name compatible
- @width - (Number) size breakpoint in pixels

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:

JS.Responsive.addVerticalSizePoint( name, height ) - (self) adds vertical size breakpoint.
- @name - (String) name of your size point - whatever but must be css class name compatible
- @height - (Number) size breakpoint in pixels

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:

JS.Responsive.getWindowWidth() - (Number) returns window width
JS.Responsive.getWindowHeight() - (Number) returns window height

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:

JS.Responsive.getDocumentWidth() - (Number) returns document width
JS.Responsive.getDocumentHeight() - (Number) returns document height

Change of window size can be handled via method addOnChangeHadler.

Handling realtime changes - addOnChangeHadler

TODO DOCUMENTATION

Javascript methods:

JS.Responsive.addOnChangeHadler( handlerFn ) - (void) adds listener to watch changes

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:

JS.Responsive.is( classNames, classNames, ... ) - (boolean) tests if classNames are obtained

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:

JS.Responsive.watchVersion( browserName, browserVersion ) - filtering rules for browser version

Example:

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

JS.Responsive.getPlatformInfo() - (object) filtering rules for browser version

platform - (Array) e.g. ["webkit", "windows", "chrome"]
browser - (String) e.g. "chrome"
version - (Number) e.g. 43.5