I am trying to insert falling snow onto my website. Do I need to edit the code directly? Is there a way to do it through event plugins?
http://www.hypergurl.com/snowmaker.html
Body Tags - Snow
-
- Regular
- Posts: 14
- Joined: Sat Nov 01, 2008 3:19 am
- Contact:
Body Tags - Snow
Dale
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
Re: Body Tags - Snow
Hi!
The easiest way is to put it into the index.tpl file of your selected template. Remember to replace { with {ldelim} and } with {rdelim} if you insert Javascript.
An event plugin could also be created, but that's the technially more savy way to do it, and you need some PHP knowhow, which you don't need for my suggested variant.
BTW, I hate falling snowflakes. They make webpages slower, harder to read, easier to annoy.
Regards,
Garvin
The easiest way is to put it into the index.tpl file of your selected template. Remember to replace { with {ldelim} and } with {rdelim} if you insert Javascript.
An event plugin could also be created, but that's the technially more savy way to do it, and you need some PHP knowhow, which you don't need for my suggested variant.
BTW, I hate falling snowflakes. They make webpages slower, harder to read, easier to annoy.
Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
I'm using this one for a snowfall effect:
http://www.hypergurl.com/snowmaker.html
@Garvin: I've found the perfect excuse for using the snow effect. It's an online advent calendar! see http://advent.ormus.info/
http://www.hypergurl.com/snowmaker.html
@Garvin: I've found the perfect excuse for using the snow effect. It's an online advent calendar! see http://advent.ormus.info/
my installations:
family blog: http://familie.lobenstein.info/
personal blog: http://www.ormus.info/
OrmusTool Homepage: http://tool.ormus.info/
Online Adventskalender: http://www.ormus.info/pages/advent.html
family blog: http://familie.lobenstein.info/
personal blog: http://www.ormus.info/
OrmusTool Homepage: http://tool.ormus.info/
Online Adventskalender: http://www.ormus.info/pages/advent.html
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
-
- Regular
- Posts: 14
- Joined: Sat Nov 01, 2008 3:19 am
- Contact:
I was a C and Java programmer. Then I started working with Serendipity.
It's excellent code to learn from. It could be commented more completely, but the style is consistent and the code is straightforward. PHP is the a very feature-complete language. And the supporting resources at php.net and smarty.net are easy to use.
I'd recommend starting with the core code; since you're interested in plugins, I'd check out the plugin API source, in the include/ directory. In particular, pay attention to the event hook functionality. Then you can go look at an implemented plugin to see how it's working.
However, the "falling snow" effect should be much easier to achieve than making a new plugin: just add a "HTML Nugget in HEAD" event plugin. Put {literal} at the top of the content; copy the snowmaker JavaScript underneath it; then add {/literal} at the bottom of everything. You should have snow with no problem.
It's excellent code to learn from. It could be commented more completely, but the style is consistent and the code is straightforward. PHP is the a very feature-complete language. And the supporting resources at php.net and smarty.net are easy to use.
I'd recommend starting with the core code; since you're interested in plugins, I'd check out the plugin API source, in the include/ directory. In particular, pay attention to the event hook functionality. Then you can go look at an implemented plugin to see how it's working.
However, the "falling snow" effect should be much easier to achieve than making a new plugin: just add a "HTML Nugget in HEAD" event plugin. Put {literal} at the top of the content; copy the snowmaker JavaScript underneath it; then add {/literal} at the bottom of everything. You should have snow with no problem.
Just tried it in my sandbox. I used the "HTML Nugget on Page" event plugin, which doesn't require the {literal} or {rdelim}/{ldelim} stuff.
The code is badly formatted, to the point of being unusable. Here's my reformatted version:
It's sitting there on my sandbox, chewing up cycles. It repeatedly calls movesnow(). Only problem is, the snow isn't moving. It looks like snow.style.left and style.top aren't actually being set; FireBug claims they're both "".
Anyway. Putting it in the nugget works, but the script... doesn't. At least, not on my sandbox. It seems to work correctly on the original website.
The code is badly formatted, to the point of being unusable. Here's my reformatted version:
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 on webpages 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=3
///////////////////////////////////////////////////////////////////////////
// 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(2*marginbottom-marginbottom-2*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-2*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>
Anyway. Putting it in the nugget works, but the script... doesn't. At least, not on my sandbox. It seems to work correctly on the original website.
I can't believe I'm working so hard on something I intend to never use.
I found an imageless Javascript snow script that actually works for me. Using it as a template, I figured out my problem: the units were not specified. So, in movesnow(), where it sets snow.style.left and snow.style.top, I added the "px" unit to the line:
Now it's snowing on my sandbox, using the HTML Nugget in Page set to "HEAD", on top of my tropical theme.
I found an imageless Javascript snow script that actually works for me. Using it as a template, I figured out my problem: the units were not specified. So, in movesnow(), where it sets snow.style.left and snow.style.top, I added the "px" unit to the line:
Code: Select all
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]) + "px"
snow[i].style.top=snow[i].posy + "px"
Oh, incidentally: this method is especially nice because you can name the nugget "Snow" and move it to the inactive column when you want to stop using up client resources.
Y'know, it wouldn't be so bad if there was some way to turn it off.
On a only slightly related note: I implemented falling snow in Java for my kid's game, Christmas Roundup. I find it odd that the Javascript version takes up 80% of my processor, while the entire Java game takes up nearly nothing!
Y'know, it wouldn't be so bad if there was some way to turn it off.
On a only slightly related note: I implemented falling snow in Java for my kid's game, Christmas Roundup. I find it odd that the Javascript version takes up 80% of my processor, while the entire Java game takes up nearly nothing!