Check the div's height every 5 seconds and change class if true

Question

I have this function already, which checks for change, and if true only updates this div.

jQuery(document).ready( function($) {
    var auto_refresh = setInterval(function() {
        $.ajax({
            success: function(data) {
                var result = $('<div />').append(data).find('div#vs').html();
                $('div#vs').html(result);
            }
        })
    }, 5000); // refreshing after every 5000 milliseconds
})

This works great, but now I want to add another function, I have made this javascript http://jsfiddle.net/jockebq/ocLh1rLd/

What it does is that if the height of the div #vs exceeds 300px it will add class .vscroll to #vs. I have managed to make this work great in JSFiddle, but I cannot figure out how to merge this together with my javascript above.

I'm very much stuck, and I cannot find any information on how to do this. All help and tips are much appreciated!

MKougiouris · Answer 1 · 2018-04-12T10:25:42.627

1

I am sure i am missing something here but why not just add it inside the function passed to setInterval and run it alongside the ajax call

     var auto_refresh = setInterval(function() {
            $.ajax({
                success: function(data) {
                    var result = $('<div />').append(data).find('div#vs').html();
                        $('div#vs').html(result);
                        if (document.getElementById('vs').clientHeight > 300 ) 
                            $('div#vs').addClass('vscroll');
                    }
            });


        }, 5000); // refreshing after every 5000 milliseconds
        })

PS: Your ajax better not be as you pasted it here!

EDIT: added the code in the success callback, since you probably want to resize when the new content is appended,as said by Pierre

edited Apr 12 '18 at 10:25

answered Apr 12 '18 at 09:22

MKougiouris

2,821
1
16
19

I guess it would be better to place the `addClass` code at the end of the `success` callback code so it updates after the data is appended. – Pierre C. Apr 12 '18 at 09:31
This is fantastic, helped me solve a big problem for me! Last thing is that i would like to do a percentage of the screen, instead of 300px. Is it possible to add percentage instead? Or maybe vw? So that it works with every resolution! – jockebq Apr 12 '18 at 10:55
instead of 300 try getting the viewport height var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); and then the percent that you want off of that H. Source: https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript – MKougiouris Apr 12 '18 at 11:06

Check the div's height every 5 seconds and change class if true

1 Answers1