Javascript works with doctype html4 but not html5

Question

I've attempted to run several of the "falling snow background" type scripts available at scriptmania. Just javascript, no jquery.

I'm puzzled by the fact that some of them work fine in IE, but fail to animate in FF, Chrome or Safari when the doctype is set to HTML5. The scripts do run in any of the above browsers when the doctype is set to HTML 4.0 Transitional.

Here are links to a couple of scripts that have this behavior:

http://rainbow.arch.scriptmania.com/scripts/bg/snow_fall.html

http://rainbow.arch.scriptmania.com/scripts/bg/autumn_fall_timeout.html

Any pointers as to what might be the root cause of the failures and/or fixes would be appreciated.

It works for me in Chrome: jsbin.com/ijEcUji/1 Please show exactly how you are setting the doctype, and let us know if the browsers where it doesn't work for you are reporting any errors in their consoles. — nnnnnn
– nnnnnn, Commented Sep 22, 2013 at 0:27
Looking at that code, it looks to be trying quite hard to be compatible with older browsers. That was probably legitimate at the time it was written, but today browsers are much more standardized. It could be that the script is using something that was allowed in HTML4 for compatibility, but the HTML5 DOCTYPE makes the browser stricter, removing obsolete features. — icktoofay
– icktoofay, Commented Sep 22, 2013 at 0:29
Using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> or <!DOCTYPE HTML>. Either one followed by <html lang="en">. — codeDawg
– codeDawg, Commented Sep 22, 2013 at 0:57
The jsbin demo I linked to above uses <!DOCTYPE html> and it works in Chrome. — nnnnnn
– nnnnnn, Commented Sep 22, 2013 at 1:02
nnnnnn - The first link, initially linked up to a script that works. I've edited it to link to one of the scripts that fail. Sorry for the typo. — codeDawg
– codeDawg, Commented Sep 22, 2013 at 1:07

Quentin · Accepted Answer · 2013-09-22 00:30:19Z

1

The HTML 4.01 Transitional Doctype with no URL component triggers Quirks mode in browsers.

The HTML 5 Doctype triggers standards mode in browsers.

In Quirks mode, numerous bugs of older browsers (from the 1990s) are emulated.

Dependancy on any of these bugs could be the cause of the problem, but the most likely is that something is setting a CSS property which expects a length but giving it a Number. Lengths other than 0 require units (such as 23px).

answered Sep 22, 2013 at 0:30

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

KingRider · Accepted Answer · 2014-12-10 13:09:59Z

Web Oficial:

http://rainbow.arch.scriptmania.com/scripts/bg/snow_fall_2.html

Download:

http://rainbow.arch.scriptmania.com/scripts/bg/snowstorm.js

Code:

<!-- SNOW TAGS START -->

<!-- Copy the <script> tag into your own page(s) for the snow effect. That is all! (No CSS etc. is needed) -->
<script type="text/javascript" src="snowstorm.js"></script>
<!-- now, we'll customize the snowStorm object -->
<script type="text/javascript">
snowStorm.flakesMaxActive = 95; // show more snow on screen at once
snowStorm.snowStick = true; // When false, snow will never sit at the bottom
snowStorm.animationInterval = 33; // 20 = fast + smooth, but 50 = more but slower
</script>

<!-- SNOW TAGS END -->

Open your file snowstorm.js is go line 41

before:

this.zIndex = 0; // CSS stacking order applied to each snowflake

after:

this.zIndex = 1000; // CSS stacking order applied to each snowflake

Problem body layer is can not see the snow to mean 0 is none, so the need to change for 1000 is available see the front of the body shows snow in front.

sry bad english

Merry Christmas 2014 and New years 2015 ;-)

Collectives™ on Stack Overflow

Javascript works with doctype html4 but not html5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related