Javascript jQuery Confusion

cirx08

Right well I'm new to the whole jQuery thing and I have an assignment coming up where I have to create a website with cool Javascript and jQuery effects, I built this from scratch and I'm confused because after I start the snowing effect no more functions will run after I stop it? I think I'v been looking at it for too long and can't find the problem.

Webpage - http://chrispbacon10.com/Web/index.html

Code - http://chrispbacon10.com/Web/js/snowflake.js

P.S.
If anyone has a good idea for another effect I could add in that would be great.

Thanks in advance.

BrokenArrows

Nice gallery

Im looking at the code but my god that snow effect practically freezes my browser.

cirx08

Lol just some temp images until I know what my actual topic is :L No luck on the problem tho? :P

Deliverance XXV

Is there a reason why you have the JQuery script link at the end of the page after the </html> tag?

COYW

Interesting gallery ....

A few quick suggestions :

- On the gallery, I would implement a carousel for those images. bxslider is nice and easy to use; and free.

- On the contact page, you could use an accordian for each section. Accordian

- That calendar could do with being moved from the central position. Users will click on it expecting for something to happen. If you are going to do something with the datetime, there are tonnes of nice jquery datepickers.

cirx08

Thank very much for the effect ideas :P and will take that into account, none of the content and positions are final yet was just putting stuff on so it didn't look too empty and to get ideas :P Also I for some reason couldn't get a jQuery .click event to run a function when the snow was falling if anyone can help explain why that'd be great, Is it maybe something to do with the snow function already in progress and can't run until it ends?

cirx08

Deliverance XXV wrote: »

Is there a reason why you have the JQuery script link at the end of the page after the </html> tag?

The jQuery script loads in the head, the snowflake script loads outside the html so that the page loads first and then it loads the snowflake script so as not to slow the page down from displaying?

COYW

cirx08 wrote: »

Also I for some reason couldn't get a jQuery .click event to run a function when the snow was falling if anyone can help explain why that'd be great, Is it maybe something to do with the snow function already in progress and can't run until it ends?

That snow effect is very heavy on resources alright, so I am guessing that is the reason for the click not firing. What browser are you using? I am on Chrome and it is slow. IE would be shocking I'd say.

cirx08

COYW wrote: »

That snow effect is very heavy on resources alright, so I am guessing that is the reason for the click not firing. What browser are you using? I am on Chrome and it is slow. IE would be shocking I'd say.

I'm using Firefox but I never really noticed any lag and I'v tested it in all the browsers but on the other hand I do have a pretty decent laptop, I'll look into making things smoother and maybe but that still doesn't explain why no function will run after the snow stops unless it hasn't been stopped properly or something :S

Giblet

innerHTML += on the body

Don't do this.

A dirty fix would be this.

var flakehtml = $('<img src="images/flake.png" class="snowflake" name="snowflake_' + flakeCount + '" style="width: ' + flakeSize + 'px; height: ' + flakeSize + 'px; top: 1px; left: ' + flakePosLeft + 'px;" />'); //Print snowflake to page	
$(document.body).append(flakehtml);

You could do 60fps snow flakes with creating the elements using document fragments, and a revised algorithm + 3d transforms
Look into requestAnimationFrame

Overflow

You should use this library for animating the snow flakes, its far more efficient than jQuery's built in animate function, just check out the samples for the difference:

http://www.jstween.org/

Ballyv24

Have you tried debugging it using the firebug plugin?

I think what is happening is that when it starts snowing, the body of the page is removed and is replaced with the displayed snowflakes. That is what I see when I use firebug.

it may be possible to fix this by adding an x,y and z cordinate to the snowflakes position. Having a z value less than the rest of the page body will mean that a link on the page will still be clickable even if there is a snowflake over it.

This is just a guess because I have not looked at your code fully.

cirx08

Ballyv24 wrote: »

Have you tried debugging it using the firebug plugin?

I think what is happening is that when it starts snowing, the body of the page is removed and is replaced with the displayed snowflakes. That is what I see when I use firebug.

it may be possible to fix this by adding an x,y and z cordinate to the snowflakes position. Having a z value less than the rest of the page body will mean that a link on the page will still be clickable even if there is a snowflake over it.

This is just a guess because I have not looked at your code fully.

Yeah I'v used Firebug, but wouldn't setting a z index of the snowflake less than the body just hide the flake behind it? unless you mean the content not the body?

Ballyv24

cirx08 wrote: »

Yeah I'v used Firebug, but wouldn't setting a z index of the snowflake less than the body just hide the flake behind it? unless you mean the content not the body?

That probably makes more sense. It might not even be worth the extra effort.

Instead of adding the snow flake to "document.body.innerHTML" try adding it to a new div in the page. By doing that you will hopefully stop overwriting the existing content of the page

cirx08

Giblet wrote: »

innerHTML += on the body

Don't do this.

A dirty fix would be this.

var flakehtml = $('<img src="images/flake.png" class="snowflake" name="snowflake_' + flakeCount + '" style="width: ' + flakeSize + 'px; height: ' + flakeSize + 'px; top: 1px; left: ' + flakePosLeft + 'px;" />'); //Print snowflake to page    
$(document.body).append(flakehtml);

You could do 60fps snow flakes with creating the elements using document fragments, and a revised algorithm + 3d transforms
Look into requestAnimationFrame

Thanks the append way fixed my functions not running problem :P