How to live update CSS based on screen size, using JQuery?

Question

I pulled a snippet of JS from a response to: How can I make content appear beneath a fixed DIV element?

The JS works great but only when the page first loads, if the screen size changes for whatever reason, the rendered page is then in error until refreshed.

I currently have this:

$(document).ready(function() {
  var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
  $('body').css('margin-top',contentPlacement);
  $('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
});

Is there a way to have the outputted CSS dynamically change at the moment the screen size updates? This will also be helpful while developing the site.

This will be for displaying the content on my page underneath a fixed menu.

UPDATE

The sample of the site is located here: http://wp19.knowgreaterpartnership.com/

Can you share your website? You don't need JS nor jQuery for this. CSS alone should be able to do the trick. — Mr. Hugo, Jun 28 '19 at 15:08
css `vw` and `vh` measurements usually fix fullscreen problems — GrafiCode, Jun 28 '19 at 15:09
Yeah, media queries are what i was using, but it's annoying to use when I need to change them so frequently and for every instance when something is added/changed. At lease with this, the browser can calculate what that perfect value needs to be. — Jeff Sydor, Jun 28 '19 at 15:11
@GrafiCodeStudio the View width and view height can be set by the browsers meta and is often unreliable. — Eric Hodonsky, Jun 28 '19 at 15:40

Guillermo · Accepted Answer · 2019-06-28T16:33:21.510

1

Additionally to the ready Callback function you can also use jquery.resize. You just have to execute the same code on the resize callback. Resize will be called every time the window size changes.

For the sake of less code redundancy I introduced a new method adjustContent:

$(document).ready(adjustContent);

$(window).resize(adjustContent);

function adjustContent() {
    var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
    $('body').css('margin-top',contentPlacement);
    $('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
}

edited Jun 28 '19 at 16:33

answered Jun 28 '19 at 15:07

Guillermo

764
6
15

shortround: `$(document).ready(function() { $(window).resize(); });` – GrafiCode Jun 28 '19 at 15:11
`$(document).ready(function() {adjustContent();});` = `$(adjustContent);`, using any kind of selector inside the `ready` method is deprecated. – Shikkediel Jun 28 '19 at 15:19
@Shikkediel Where is this documented? In the [jquery documentation for ready](https://api.jquery.com/ready/) I can not see this. – Guillermo Jun 28 '19 at 15:24
1

It is explained where the fifth alinea starts - "jQuery offers several ways to attach a function..." – Shikkediel Jun 28 '19 at 15:29
1

Thanks. Adjusted the answer. – Guillermo Jun 28 '19 at 15:31
Thanks @Guillermo, your solution works perfectly! The only modification I made was to the opening functions `$(document).ready(adjustContent); $(window).resize(adjustContent);` – Jeff Sydor Jun 28 '19 at 15:31
That's more elegant. I changed the answer. – Guillermo Jun 28 '19 at 16:34

score 0 · Answer 2 · answered Jun 28 '19 at 15:38

I know you're asking about using jQuery to change CSS, but what you really should be doing is using Media Queries for your css so that it's declarative instead of script/event initiated.

Ex: (https://www.w3schools.com/Css/css3_mediaqueries_ex.asp )

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

How to live update CSS based on screen size, using JQuery?

2 Answers2