CODEWITHSUNDEEP
javascriptcss
Ali Shariati
Ali Shariati

Reputation: 21

js function repeats on window resize

I have created random stars using a js unction which manipulates CSS based on window height & width. My goal was to fit them at all-time in the viewport as I resize the height and width of the window.

The problem is every time that I resize the window, the js function adds CSS to previous ones without removing them first which causes a horizontal scroll and other unappealing visual issues.

Is there any way to prevent that? perhaps disabling and re-enabling the function or something else that fits the stars exactly in the viewport and make them behave dynamically as the width and height change without keeping the previous applied css properties and values?

<style>
    body, html {margin: 0;}
    #header {display: grid;background-color: #2e2e2e;width: 100vw;height: 100vh;overflow: hidden;}
    #header i {position: absolute;border-radius: 100%;background: grey; }
</style>
<body>
    <div id="header"></div>
<script>
    window.onresize = function() {
        skyCity();
    };

    function skyCity() {
        for( var i=0; i < 400; i++) {

            var header = document.getElementById("header"),
                cityLight = document.createElement("i"),
                x = Math.floor(Math.random() * window.innerWidth * .98),
                y = Math.floor(Math.random() * window.innerHeight),
                size = Math.random() * 1.5;
                animate = Math.random() * 50;

            cityLight.style.left = x + 'px';
            cityLight.style.top = y + 'px';
            cityLight.style.width = size + 1.5 + 'px';
            cityLight.style.height = size + 1.5 + 'px';
            cityLight.style.opacity = Math.random();
            cityLight.style.animationDuration = 10 + animate + 's';

            header.appendChild(cityLight);
        }
    };
    skyCity();
</script>
</body>

Upvotes: 0

Views: 196

Answers (3)

shotasenga
shotasenga

Reputation: 979

I would suggest you keep the "stars" as an array (cityLights in the code below) and apply the new style every time the browser size changes.

<style>
    body, html {margin: 0;}
    #header {display: grid;background-color: #2e2e2e;width: 100vw;height: 100vh;overflow: hidden;}
    #header i {position: absolute;border-radius: 100%;background: grey; }
</style>
<body>
    <div id="header"></div>
<script>
    window.onresize = function() {
        skyCity();
    };

    var header = document.getElementById("header");
    var cityLights = []
    for( var i=0; i < 400; i++) {
        cityLights.push(document.createElement("i"));
    }


    function skyCity() {
        for( var i=0; i < 400; i++) {
            var cityLight = cityLights[i],
                x = Math.floor(Math.random() * window.innerWidth * .98),
                y = Math.floor(Math.random() * window.innerHeight),
                size = Math.random() * 1.5;
                animate = Math.random() * 50;

            cityLight.style.left = x + 'px';
            cityLight.style.top = y + 'px';
            cityLight.style.width = size + 1.5 + 'px';
            cityLight.style.height = size + 1.5 + 'px';
            cityLight.style.opacity = Math.random();
            cityLight.style.animationDuration = 10 + animate + 's';

            header.appendChild(cityLight);
        }
    };
    skyCity();
</script>
</body>

Upvotes: 0

Karl L
Karl L

Reputation: 1725

it seems that the issue is it appends more i tags or stars when resizing, not really css issue.

I suggest to clear the wrapper #header before adding more <i>s.

You can do something like this:

window.onresize = function() {
        skyCity();
    };

    function skyCity() {
      var header = document.getElementById("header")
      header.innerHTML=''
        for( var i=0; i < 400; i++) {

          
              var cityLight = document.createElement("i"),
                x = Math.floor(Math.random() * window.innerWidth * .98),
                y = Math.floor(Math.random() * window.innerHeight),
                size = Math.random() * 1.5;
                animate = Math.random() * 50;

            cityLight.style.left = x + 'px';
            cityLight.style.top = y + 'px';
            cityLight.style.width = size + 1.5 + 'px';
            cityLight.style.height = size + 1.5 + 'px';
            cityLight.style.opacity = Math.random();
            cityLight.style.animationDuration = 10 + animate + 's';

            header.appendChild(cityLight);
        }
    };
    skyCity();
    #header {display: grid;background-color: #2e2e2e;width: 100vw;height: 100vh;overflow: hidden;}
    #header i {position: absolute;border-radius: 100%;background: grey; }
    <div id="header"></div>

You can check the full page link so you can try to resize the window

Upvotes: 1

Δ O
Δ O

Reputation: 3710

Simply said, every time you resize, you call skyCity() which runs header.appendChild(cityLight); 400 times. It is just programmed to add new lights...

You can, a) remove every <i> from #header in skyCity() before the loop,

and b), b for better, init the 400 <i> once on load, on then on resize just update their properties.

Upvotes: 1

Related Questions