Issues with JavaScript

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Locked
User avatar
Gleasonator
Registered User
Posts: 652
Joined: Tue Jun 05, 2007 2:19 pm
Location: Texas
Contact:

Issues with JavaScript

Post by Gleasonator »

I've tried several scripts (from sites like http://www.hypergurl.com/) on my phpBB board, and haven't been able to get any to work.

For example, this falling snow script works fine if I paste it into a .html document and run it from my browser, but not in phpBB. http://www.hypergurl.com/snowmaker.html

Anyone have any idea why or what I can do to fix it? If this script is placed after the phpBB <body> tag, it displays all the snowflakes in the top-left corner and they don't move.

Thanks.

Script:

Code: Select all

<script>
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximal-size of your snowflaxes
var snowmaxsize=22

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
	if (ie5 || opera) {
		marginbottom = document.body.clientHeight
		marginright = document.body.clientWidth
	}
	else if (ns6) {
		marginbottom = window.innerHeight
		marginright = window.innerWidth
	}
	var snowsizerange=snowmaxsize-snowminsize
	for (i=0;i<=snowmax;i++) {
		crds[i] = 0;                      
    	lftrght[i] = Math.random()*15;         
    	x_mv[i] = 0.03 + Math.random()/10;
		snow[i]=document.getElementById("s"+i)
		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
		snow[i].size=randommaker(snowsizerange)+snowminsize
		snow[i].style.fontSize=snow[i].size
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
		snow[i].sink=sinkspeed*snow[i].size/5
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
		snow[i].style.left=snow[i].posx
		snow[i].style.top=snow[i].posy
	}
	movesnow()
}

function movesnow() {
	for (i=0;i<=snowmax;i++) {
		crds[i] += x_mv[i];
		snow[i].posy+=snow[i].sink
		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
		snow[i].style.top=snow[i].posy
		
		if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
			snow[i].posy=0
		}
	}
	var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
	window.onload=initsnow
}
</script>
Sorry for my bad Engrish !
gleason|design

Image
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 17414
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón
Contact:

Re: Issues with JavaScript

Post by DavidIQ »

That script needs to go before the </head> tag in overall_header.html
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
Gleasonator
Registered User
Posts: 652
Joined: Tue Jun 05, 2007 2:19 pm
Location: Texas
Contact:

Re: Issues with JavaScript

Post by Gleasonator »

DavidIQ wrote:That script needs to go before the </head> tag in overall_header.html
Thanks for the help, but doing so produces the same issue, as seen here (top-left corner): http://gleasonator.com/forums/index.php

Like I said, it doesn't make sense to me because that exact code seems to work on everything except phpBB. And it's not just this script, I've tried several, none of which work.

EDIT: Tested with vanilla prosilver on vanilla phpBB 3.0.2 board, same issue.
EDIT2: It doesn't even work if I browse to mysite.com/styles/mystyle/template/overall_header.html
EDIT3: It works in IE6 but not FF3. :shock:
EDIT4: The code has browser checking... :|
Last edited by Gleasonator on Sat Nov 01, 2008 9:26 pm, edited 1 time in total.
Sorry for my bad Engrish !
gleason|design

Image
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 17414
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón
Contact:

Re: Issues with JavaScript

Post by DavidIQ »

Hmmmm...looking at another script I helped with for someone else on here, try putting the code just before the </body> tag.
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
Gleasonator
Registered User
Posts: 652
Joined: Tue Jun 05, 2007 2:19 pm
Location: Texas
Contact:

Re: Issues with JavaScript

Post by Gleasonator »

DavidIQ wrote:Hmmmm...looking at another script I helped with for someone else on here, try putting the code just before the </body> tag.
This is so weird.

It doesn't work anywhere inside the <body></body> tags. It does have browser checking (Mozilla doesn't seem to be on there), but it works fine when executed from an .html document in Mozilla. But it doesn't work in phpBB unless you're using IE.

EDIT: I modified the code and removed browser checking and reformatted it. Still works when executed from the browser (in FF3 and IE6) but now doesn't work when executed from either browser in phpBB... and I did refresh my cache.

Code: Select all

<script>
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax = 35;

// Set the colors for the snow. Add as many colors as you like
var snowcolor = new Array("#aaaacc","#ddddFF","#ccccDD");

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype = new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");

// Set the letter that creates your snowflake (recommended:*)
var snowletter = "*";

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed = 0.6;

// Set the maximal-size of your snowflaxes
var snowmaxsize = 22;

// Set the minimal-size of your snowflaxes
var snowminsize = 8;

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone = 1;

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow = new Array()
var marginbottom;
var marginright;
var timer;
var rand;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();

function randommaker(range) {		
	rand = Math.floor(range * Math.random())
    return rand;
}

function initsnow() {

	marginbottom = document.body.clientHeight;
	marginright = document.body.clientWidth;

	var snowsizerange = snowmaxsize - snowminsize;
	for (i = 0; i <= snowmax; i++) {
		crds[i] = 0;                      
    	lftrght[i] = Math.random()*15;         
    	x_mv[i] = 0.03 + Math.random()/10;
		snow[i] = document.getElementById("s" + i);
		snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
		snow[i].size = randommaker(snowsizerange)+snowminsize;
		snow[i].style.fontSize = snow[i].size;
		snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
		snow[i].sink = sinkspeed * snow[i].size/5;
		if (snowingzone == 1)
		{
			snow[i].posx = randommaker(marginright - snow[i].size);
		}
		if (snowingzone == 2)
		{
			snow[i].posx = randommaker(marginright / 2 - snow[i].size);
		}
		if (snowingzone == 3)
		{
			snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
		}
		if (snowingzone == 4)
		{
			snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
		}
		snow[i].posy = randommaker(6 * marginbottom - marginbottom - 6 * snow[i].size);
		snow[i].style.left = snow[i].posx;
		snow[i].style.top = snow[i].posy;
	}
	movesnow()
}

function movesnow() {
	for (i = 0; i <= snowmax; i++) {
		crds[i] += x_mv[i];
		snow[i].posy += snow[i].sink;
		snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]);
		snow[i].style.top = snow[i].posy;
		
		if (snow[i].posy >= marginbottom - 6 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i]))
		{
			if (snowingzone == 1)
			{
				snow[i].posx = randommaker(marginright - snow[i].size);
			}
			if (snowingzone == 2)
			{
				snow[i].posx = randommaker(marginright / 2 - snow[i].size);
			}
			if (snowingzone == 3)
			{
				snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
			}
			if (snowingzone == 4)
			{
				snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
			}
			snow[i].posy = 0;
		}
	}
	var timer = setTimeout("movesnow()", 50);
}

for (i = 0; i <= snowmax; i++) {
	document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>" + snowletter + "</span>");
}

window.onload = initsnow();
</script>
Sorry for my bad Engrish !
gleason|design

Image
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 17414
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón
Contact:

Re: Issues with JavaScript

Post by DavidIQ »

Try changing the <script> tag to:

Code: Select all

<script type="text/javascript">
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
Gleasonator
Registered User
Posts: 652
Joined: Tue Jun 05, 2007 2:19 pm
Location: Texas
Contact:

Re: Issues with JavaScript

Post by Gleasonator »

DavidIQ wrote:Try changing the <script> tag to:

Code: Select all

<script type="text/javascript">
Ah, I'd not thought of that.

Doing so, however, produces the same result. The snow flakes hang in the top-left corner. I tried both the original and the modified script.
Sorry for my bad Engrish !
gleason|design

Image
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 17414
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón
Contact:

Re: Issues with JavaScript

Post by DavidIQ »

The problem has to do with the doctype declaration. Removing it or removing the dtd reference allows the script to work correctly in FireFox but the forum doesn't look right. I would try a different script:

http://rainbow.arch.scriptmania.com/scr ... _fall.html

Uses images but it should work in both IE and FF without having to change the doctype. Unless you want to play around with doctypes...
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
Locked

Return to “[3.0.x] Styles Support & Discussion”