How to call JavaScript on change of CSS

Question

I'm using tinyscrollbar to show some text in a box. I have 2 stylesheets:

<link rel="stylesheet" media="all and (min-width: 1152px) and (max-width: 9000px)" href="grid-1218.css"/>
<link rel="stylesheet" media="all and (min-width: 1px) and (max-width: 1151px)" href="grid-978.css"/>

I face a problem: when I change CSS the box gets bigger but the height stays the same and I don't want to declare height in CSS as i got some more boxes.

Is there any way to rerun the script to get new height?

score 1 · Accepted Answer · answered Apr 10 '13 at 08:20

1

There isn't a specific event for media query changes, as far as I know.

You can bind to the window's resize event and re-run your javascript on every resize, or do some checking to see whether a resize is an important one.

answered Apr 10 '13 at 08:20

drquicksilver

1,627
9
12

found this oScrollbar5.tinyscrollbar_update(); to update content can you send me the full script for that on resize ? – user2110399 Apr 10 '13 at 08:34
`window.onresize = function() { oScrollbar5.tinyscrollbar_update(); }` although personally I get bored quite quickly of setting up event handlers manually and always use jQuery to make it more convenient. – drquicksilver Apr 10 '13 at 08:39

score 1 · Answer 2 · answered Apr 10 '13 at 08:46

It's accepted so just for the record. You can also use matchMedia and addListener:

window.matchMedia("(min-width: 152px) and (max-width: 900px)").addListener(function(mq) {
    if (mq.matches) {
        oScrollbar5.tinyscrollbar_update();
    }
});

It works in IE10+, so sure for now window.onresize is better.

How to call JavaScript on change of CSS

2 Answers2