.js and responsive CSS interaction

JavaScript
1

I just completed a vanilla (not jQuery) .js slider. One of the things I like about the script is that it waits till the page is rendered (according to the CSS) then does the necessary calcs to make the slider work, so

. et:
.slider { width:960px;}
.slider>ul>li { width:25%;}
the script will have slides that are 240px wide (that are equal height), and 4 slides (max) will show in the slider window at a time . In other words you don’t need to alter the .js, only the CSS, to change the slide settings.

This works FINE for now. But I am thinking ahead… what if we made the page was responsive?

the scrip still works on the FIRST redraw, but not if the window is resized. That is the script still runs, but it calculates everything as is if the window retained it’s original measurements.

I would appreciate any insight to how does .js handle calculated/css measurements for @media {} rules?

THINKING about it, my question should be:
aside from class switching, are css properties changed via .js still changeable via a CSS media query?

2

Hi, I would create a function called setDynamicProperties where you set all variables that will change when you resize the screen (you would already be setting them at initialisation in your code). Then depending, either on a resize event or in a resize end event trigger that function to reset those properties. And do any other thing that you need to do so that your slider does not break :slight_smile:

Hope that helped