CODEWITHSUNDEEP
javascriptjquery
max777
max777

Reputation: 143

jQuery snow plugin does not show the same amount of snow on all pages

I am using a simple jQuery snow falling plugin on my site: JQuery-Snowfall

If you take a look at the homepage, less snow shows then if you look at another page.

The following code is in the js/script.js file, and is used by every page.

$(document).ready(function(e) {
    $(document).snowfall({image :"images/assets/flake.png", minSize: 6,maxSize:25,flakeCount:150});
});

Homepage, less snow: Click here

Other page on this site, more snow: Click here

Upvotes: 0

Views: 845

Answers (1)

frobinsonj
frobinsonj

Reputation: 1167

Both pages have 150 snowflakes, however, the document height of the homepage is larger then that of the others. This means different number of snowflakes are visible within the viewport.

To get around this, you can add a div to the body that takes up the entire viewport. You can then apply the snowflakes to this div, rather then the document.

I don't know about your limitations here so here's a JS only solution:

$(document).ready(function(e) {
    var snowfallDiv = $(document.body).append("<div style='height: 100%;width: 100%;left: 0;top: 0;position: fixed;'></div>");

    snowfallDiv.snowfall({image: "images/assets/flake.png", minSize: 6, maxSize: 25, flakeCount: 150});
});

If you can edit the page properly, I would suggest putting the div in your HTML.

Here's a working example:

$(document).ready(function(e) {

  $("#snowfall").snowfall();
});
body {
  background-color: black;
  height: 250px;
}

#snowfall {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
<div style="height:5000px"></div>

<div id="snowfall"></div>

Upvotes: 1

Related Questions