CSS property doesn't change using jQuery

Question

i'm making NY card and trying to set all snowflakes in random place, but snowflakes position from left works, but top doesn't.

var snowflakes = $("#snowflakes");
var snowflakesCount = snowflakes.data("count");
console.log(snowflakesCount);

for (var i = 0; i < snowflakesCount; i++) {
  var snowflake = $('<div class="snowflake"></div>').appendTo(snowflakes);
  var left = (Math.round(Math.random() * 80)) + "%";
  var top = (Math.round(Math.random() * 40) + 20) + "%";
  snowflake.css("top", top);
  snowflake.css("left", left);
}

body {
  background: #1a0d81;
}
.snowflake {
  position: fixed;
  top: 50px;
  left: 50px;
  background: url("../image/snowflake.png");
  width: 32px;
  height: 33px;
  transition: 5s all linear;
}
#snowflakes {
  position: absolute;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="snowflakes" data-count="10"></div>

snowflake.css("top", top) doesn't work. All i got is https://i.sstatic.net/3JgiE.jpg

Your code seems to be working fine here: jsfiddle.net/2yrejfkr , are you sure there is nothing else interfering? - @PardeepDhingra, your code is working fine, you just have a 404 for the background image so none of your snowflakes are actually visible. If you do an Inspect Element, they are all randomly positioned, both top and left. — Tyler Roper
– Tyler Roper, Commented Jan 5, 2017 at 16:57
As mentioned below, your issue is that you're using top as a variable name, which is a reserved keyword in javascript, and refers to a window-relative top position. I'm assuming it works in my JSFiddle above because of relativity, whereas if you run it standalone, it will error. Refer to the answers below, and in the future, refrain from using reserved keywords as variable names. — Tyler Roper
– Tyler Roper, Commented Jan 5, 2017 at 17:06

Mi-Creativity · Accepted Answer · 2017-01-05 17:02:09Z

7

https://www.nczonline.net/blog/2007/06/03/javascript-variable-names-you-shouldn-t-use/

You shouldn't use top as a var

edited Jan 5, 2017 at 17:02

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

answered Jan 5, 2017 at 16:54

Axnyff

10.1k4 gold badges36 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

epascarello Over a year ago

This is the answer, Glad people are quick to downvote. Rename the variable to xTop and it will magically start to work.

Tyler Roper Over a year ago

@epascarello While I agree that naming variables after reserved words is a no-no and leads to issues, any insight as to why this works fine in some cases? For example, if you copy the code over the JSFiddle, there's no issue: jsfiddle.net/2yrejfkr - Just curious!

epascarello Over a year ago

@Santi If you run it as a snipplet it does in Chrome. I verified it errors with top and without. It is "window" in chrome. Try it, make an answer with a snipplet.

Tyler Roper Over a year ago

@epascarello I assume it's an issue regarding relativity in which the snippet was run, being that JSFiddle is run in a frame and not a standalone window.

Axnyff Over a year ago

Your code in jsfiddle is turned into a callback for window.onload. If you're in a function, you can redefine top. This has nothing to with iframes: function foo(){ var top = 43; console.log(top); } works correctly

fdomn-m · Accepted Answer · 2017-01-05 17:07:37Z

0

Here's a working snippet. The other answer includes details as to why.

The snippet was giving an error against var top =

Changed the var name and it works fine:

var snowflakes = $("#snowflakes");
var snowflakesCount = snowflakes.data("count");
console.log(snowflakesCount);

for (var i = 0; i < snowflakesCount; i++) {
  var snowflake = $('<div class="snowflake">*</div>').appendTo(snowflakes);
  var left = (Math.round(Math.random() * 80)) + "%";
  var topxx =  (Math.round(Math.random() * 40)) + "%";
  //console.log(topxx);
  snowflake.css("left", left);
  snowflake.css("top", topxx);
}

body {
  background: #1a0d81;
}
.snowflake {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 32px;
  height: 33px;
  transition: 5s all linear;
  color:white;
}
#snowflakes {
  position: absolute;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="snowflakes" data-count="10"></div>

edited Jan 5, 2017 at 17:07

answered Jan 5, 2017 at 17:01

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

2 Comments

Laurianti Over a year ago

Time ago i receveid down votes because I sayd same thing of an other guy, but with a working example.

Tyler Roper Over a year ago

@Laurianti Please be a bit more wary when commenting. You've commented three separate times on different answers to this question, and a case could easily be made that not a single one provided any value or thoughtful discussion points - One of them simply said "This is the right answer", another was just a link that was already provided in the answer that the comment was left on, and this one, which essentially just says that you also came up with this same answer.

Community · Accepted Answer · 2017-05-23 12:24:35Z

0

Here's a working code that was discussed here on SO.
Might not resolve your issues with this but will get you where you want: [jfiddle][2.]
Another option is a JQuery-snowfall.
And a working example of this plugin SnowFall.

Good luck

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jan 5, 2017 at 17:33

Jadeye

4,4374 gold badges54 silver badges67 bronze badges

Collectives™ on Stack Overflow

CSS property doesn't change using jQuery

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related