Do something on resize (only once) (Java Script)

Question

Im currently stuck on that problem: On my Startpage I have:

<script>
            window.addEventListener(
                'resize', HideWithResize
            )
</script>

and my JS looks terrible I know but I'm just trying stuff:

var HideWithResize = function() {
    if ($(window).width() < 1024) {
        $('.nav__paragraph--news').hide();
        $('.nav__paragraph--abwesend').hide();
        document.querySelector(".dropdown__news").classList.replace("dropdown__news--active", "dropdown__news--inactive");
        document.querySelector(".dropdown__abwesend").classList.replace("dropdown__abwesend--active", "dropdown__abwesend--inactive");
 
    } else if ($(window).width() > 1024 )  {
        $('.nav__paragraph--news').show();
        $('.nav__paragraph--abwesend').show();
        document.querySelector(".dropdown__news").classList.replace("dropdown__news--inactive", "dropdown__news--active");
        document.querySelector(".dropdown__abwesend").classList.replace("dropdown__abwesend--inactive", "dropdown__abwesend--active");
    }
};

Let's say someone opens a window on size 1500 and shrinks it below 1024, it should hide 2 paragraphs. when he opens the paragraphes on the smaler window with the dropdown arrows and shrinks the window again (or even increases until 1024) it hides the paragraphs again... But I need it to do only once after going below the limit of 1024... same with someone opening it below 1024 and increasing it over 1024, it always shows the stuff again after resizing

And another thing is that when someone opens the site below 1024 the paragraphs should be hidden, until he opens them --> then they should stay open

Any ideas how that could be solved?

Thanks in advance!

Solution found:

function HideWithResize() {
    var prevWidth = 0;

    $(document).ready(function() {
        prevWidth = $(window).width();
    });

    $(window).resize(function() {
        var currentWidth = $(window).width();
        if (prevWidth > 1024 && currentWidth < 1024) {
            $('.nav__paragraph--news').hide();
            $('.nav__paragraph--abwesend').hide();
            document.querySelector(".dropdown__news").classList.replace("dropdown__news--active", "dropdown__news--inactive");
            document.querySelector(".dropdown__abwesend").classList.replace("dropdown__abwesend--active", "dropdown__abwesend--inactive");
        } else if (prevWidth < 1024 && currentWidth > 1024) {
            $('.nav__paragraph--news').show();
            $('.nav__paragraph--abwesend').show();
            document.querySelector(".dropdown__news").classList.replace("dropdown__news--inactive", "dropdown__news--active");
            document.querySelector(".dropdown__abwesend").classList.replace("dropdown__abwesend--inactive", "dropdown__abwesend--active");
        }
        prevWidth = currentWidth;
    });
    
}

this can be solved by css-only. do you need a javascript solution? — apple apple, Apr 15 '21 at 14:58
how? I have to be able to toggle on/off the paragraphs with a click on the arrow — safetimenow, Apr 15 '21 at 14:59
no I think I explained it not clear. those paragraphs are shown or hidden by a dropdown arrow normally. now I need a function for the resizing — safetimenow, Apr 15 '21 at 15:00
for example the arrows are getting loaded in with pointing down if its >1500 but I have to change classes to make them point to the left — safetimenow, Apr 15 '21 at 15:02

score 0 · Answer 1 · answered Apr 15 '21 at 15:08

0

What you want is to check whether the user made the window bigger or smaller. Only triggering when the window got smaller. However, window.addEventListener('resize', HideWithResize) triggers with any resize. So you need an If statement that compares the old window size with the new one and then acts accordingly.

answered Apr 15 '21 at 15:08

A-Tech

806
6
22

but wouldn't the problem still exist if he resized again? lets say he goes from 1500 to 900, the paragraphs are hidden. then he opens 1 and resizes to 950, and it hides them again? – safetimenow Apr 15 '21 at 15:10
If you have something like: `if new-size < old-size || new-size < 1024 dostuff else donothing` then you should be fine – A-Tech Apr 15 '21 at 15:25
and how would you call that function on the startpage? and the other problem is that, if he's on 950, opens one parag and shhrinks to 900 it will hide all again – safetimenow Apr 15 '21 at 15:29
Calling the function: You leave your `window.addEventListener` as it is but edit the ifs within your function. Ignoring changes from 950 to 900 etc: Change the if-clause to something like `(new-size < old-size && new-size < 1024 && old-size <= 1024) || (new-size < 1024 && old-size == undefined)` Not changing open paragraphs: When a paragraph is opened and set a variable called something like paragraph-open. Check for the variable in your if statement and act on whether it is set or not. – A-Tech Apr 15 '21 at 15:41
and how would I get the new and old sizes as its constantly calling the function with AddEventlistener for "resize", but I see your point! – safetimenow Apr 15 '21 at 15:46
You can define and use variables within the – A-Tech Apr 19 '21 at 08:20

Do something on resize (only once) (Java Script)

1 Answers1