Jquery function only loads after page refresh

Question

I have roughly around 50 video thumbnails on a set page.

I would like to resize them depending on the resolution.

What I have tried was using @media query in css that did not work as expected then I moved over to this.

$(document).ready(function(event) {
  var width = $(window).width();
  // Change thumbnail size if browser width changes (should be in real-time)   
  if (width <= 1300) {
    console.log(width);
    $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
  } else {
    $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
  }
});

After inserting that script the video thumbnail size changes but as I adjust the browser the jQuery does not load and resize the thumbnail unless the page is refreshed ?

Im not sure as to why the jQuery is not loading the script in real time as the size (browser) changes.

Languages that I am using in this project : PHP, jQuery

https://api.jquery.com/resize/ try this. You need to use the resize event to detect the actual resizing of the window — Cornel Raiu, Feb 13 '19 at 19:43
You're not thinking about this correctly -- jQuery loads only once using `$(document).ready()` you need to be using `.resize()` https://api.jquery.com/resize/ — Zak, Feb 13 '19 at 19:44

Iftifar Taz · Accepted Answer · 2019-02-13T19:56:05.570

you need to catch window resize event with jQuery and also write your code there.

$(window).resize(function() {
    var width = $(window).width();
    // Change thumbnail size if browser width changes (should be in real-time)   
    if (width <= 1300) {
        console.log(width);
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
});

To reduce code repetition you can make a function and call it in both $(window).resize() and $(document).ready()

score 0 · Answer 2 · answered Feb 13 '19 at 19:48

0

function onResize() {
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(onResize);

$(window).resize(onResize);

This should work, but it would be much better if it were done with css. Would love you help you with that if you want to post what you tried. If you do it with css, you will not have the jumping on the page that'll occur when the js loads and changes those classes in and out.

answered Feb 13 '19 at 19:48

Gregory Friedman

76
3

Correct. Using CSS should be the way to go here. – Cornel Raiu Feb 13 '19 at 19:51
No need for any css, as I will be doing more using the jQuery. Thus I posted the jQuery data instead of the CSS, as to the jumping. It does not jump as I have a css to smoothen out those changes with an animation. I would like to show you although it is adult content. So that's a no go. – S4nc7ion P Feb 13 '19 at 19:54
1

Sure thing, assuming this is Material Design classes you're using, you'd also just be able to give it multiple classes based on the breakpoints you are looking to shrink down for. As in, simply giving the thumbnails something like `mdl-cell mdl-cell--4-col mdl-cell--3-col-phone` would do it. https://getmdl.io/components/index.html#layout-section/grid – Gregory Friedman Feb 13 '19 at 20:15

score 0 · Answer 3 · answered Feb 13 '19 at 19:48

0

You can do smth like this.

Note: this is untested code

function updateSizes(){
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(function(event) {
    updateSizes();
    // do other stuff here
});

$( window ).resize(function() {
    updateSizes();
    // do other stuff here
});

answered Feb 13 '19 at 19:48

Cornel Raiu

2,758
3
22
31

I would assume this should work, although your first comment was correct a simple change to `.resize` works wonders. Check @IftifarTaz answer. – S4nc7ion P Feb 13 '19 at 19:51
but then it would not work on initial page load :) So you definitely need both doc ready and resize events bound – Cornel Raiu Feb 13 '19 at 19:52
Yip, I have the resize inside the `$.(document).ready();` that's how it actively changes. I tried it without and it simply does not load. – S4nc7ion P Feb 13 '19 at 19:56
1

Look at the accepted answer here. There are some more ways of doing it https://stackoverflow.com/a/7404981/3741900 – Cornel Raiu Feb 13 '19 at 19:57
Also, to make it even smoother ( without calling the function too many times ) you can have a setTimeout() and only do the resize on resize end – Cornel Raiu Feb 13 '19 at 19:59

Jquery function only loads after page refresh

3 Answers3