Public Forums 71,145 posts

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#194405

Hi,
I have a responsive template design that uses sticky menus. I’m using the StickUp jQuery plugin which auto detects how far down the page the menu bar is positioned and all works ok. However, if the browser is resized and the page switches to a different format (e.g. large to medium), I need to reinitialise the plugin so that the new top margin can be stored. How can I run a js function when t3 switches from one page size to another?
Thanks
Phil

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#520891

Hi doorknob,

There was no actual event for this.
You should listen to window resize event and check for the break point value.
The break point should be @navbarCollapseWidth in bootstrap 2 and @grid-float-breakpoint in bootstrap 3.

1 user says Thank You to Wall Crasher for this useful post

1. doorknob

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#520936

Thanks Wall Crasher,
That’s very helpful. I’m now having trouble getting access to the Bootstrap variable in JS. Any ideas on that?
Phil

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#521029

@ doorknob,

I am afraid there was no official way to do it.

To make it easy, just use hardcode value (it is 767).

For a tweak, you can detect for the collapse menu button to see if they are visible (you can put another piece of html markup to detect the visibility of this breakpoint).

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#521123

Thanks Wall Crasher,
I did it by testing the header for visibility and it works fine. Although I would have preferred a more generic solution, I think using css is, in some ways, a better approach than using the breakpoint value directly because there seems to be minor variations in the interpretation of width from browser to browser depending on whether you check $(window), $(document) or $(‘html’) and using css means that interpreting the breakpoint into a screen size gives bettter consistency because it is only ever done in one place.
Thanks again
Phil

[Author]

Posts