Body Tags - Snow

Random stuff about serendipity. Discussion, Questions, Paraphernalia.
Post Reply
poopingbag
Regular
Posts: 14
Joined: Sat Nov 01, 2008 3:19 am
Contact:

Body Tags - Snow

Post by poopingbag »

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
Dale
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Body Tags - Snow

Post by garvinhicking »

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
# 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/
ormus7577
Regular
Posts: 122
Joined: Sat Nov 04, 2006 12:11 pm
Location: Ulm, Germany

Post by ormus7577 »

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/
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
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

Could we PLEASE not mention that ugly, 4-letter word just yet? :lol: I'm more of a summer person, but it has gotten fairly chilly here in Chicago the past few days! :cry:
=Don=
poopingbag
Regular
Posts: 14
Joined: Sat Nov 01, 2008 3:19 am
Contact:

Post by poopingbag »

I hate snowflakes too. My better half loves them.

:roll:

I am going to attempt to learn PHP. Any advice on a crash course? (Books etc)

I have done some .NET work, python a little Ruby ... pretty much a novice.
Dale
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert »

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.
Judebert
---
Website | Wishlist | PayPal
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert »

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:

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> 
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.
Judebert
---
Website | Wishlist | PayPal
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert »

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:

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"
Now it's snowing on my sandbox, using the HTML Nugget in Page set to "HEAD", on top of my tropical theme.
Judebert
---
Website | Wishlist | PayPal
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert »

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!
Judebert
---
Website | Wishlist | PayPal
Post Reply