TwitterBootstrap JavaScript for specific resolution only

Question

With twitter-bootstrap it is possible to achieve responsive behavior by applying css to markup like visible-lg visible-md visible-sm responsive-utilities for example.

But how about if i want to apply specific JavaScript for specific resolution.

lets say I have javascript like that:

$('.mainHeader').affix({
        offset: {
            top: 585
        }
    });

I want value top make dynamic based on current resolution. lets say if current resolution visible-lg I want top: 20, if current resolution visible-md I want top: 300 etc..

Is there any clever way to achieve that with twitter-bootstrap?

Consider using enquire.js.

moonwave99
– moonwave99

2013-12-23 00:47:29 +00:00
Commented Dec 23, 2013 at 0:47 — moonwave99
– moonwave99, Commented Dec 23, 2013 at 0:47
This might be helpful window width else if

ilias
– ilias

2013-12-23 01:06:06 +00:00
Commented Dec 23, 2013 at 1:06 — ilias
– ilias, Commented Dec 23, 2013 at 1:06

Bobby · Accepted Answer · 2013-12-23 03:49:47Z

0

You can use matchMedia API to detect certain screen width, so you can do this

if ( window.matchMedia('(min-width: 768px)').matches ) {
    $(element).affix({
        offset: {
            top: 585
        }
    });
} else if ( window.matchMedia('(min-width: 992px)').matches ) {
    // change the affix offset
}

Need to know that matchMedia API only supported on IE10+ reference. The other alternative you can Modernizr mq() function. Read the documentation here to learn more.

answered Dec 23, 2013 at 3:49

Bobby

4825 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TwitterBootstrap JavaScript for specific resolution only

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related