JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Snow for your NING site

UPDATE: if you like this script - please add it to the custom code box - formerly the ANALYTICS.

If you like to change the snow flakes - you have to change the img src URL with an own gif or png. Here is a new updated script with 9 snow flakes at one time with this snow flake

You can use it for example with stars too ...

Today I saw on this website http://www.outbrain.com/ this funny addition. I checked the source code and copy and paste it into this

snow.txt - if you like it, feel free to use. But if you do it, sure you do it with or on your own risk. You can change the variation of snow flakes by changing the red line
// Configure below to change number of snow to render
var no = 7;

- if like to see more snow choose instead of 7 maybe 20.

Here is the text code: but open the attachment cause the img url could be distorted:



<script language="JavaScript" type="text/javascript">
//Configure below to change URL path to the snow image
var snowsrc="http://storage.ning.com/topology/rest/1.0/file/get/1061487227?profile=original"
// Configure below to change number of snow to render
var no = 7;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "windowheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

0 members favorited this

Attachments:

snow.txt, 3 KB

▶ Reply to This

Replies to This Discussion

Permalink Reply by JenSocial on December 22, 2010 at 11:51am

Hey Jens!

I have different snow scripts, but this one really seems to load fast and run smoothly. Thanks! I have it installed on the site. Really nice design tip, I appreciate you adding to the site.

Happy Holidays Friend,

Jen

▶ Reply

Permalink Reply by www.overtone.cc - Jens on December 22, 2010 at 1:56pm

Thanks that you like it. I had another snow script but that works not fine - this one from www.outbrain.com seems to be really smoothly.

▶ Reply

Permalink Reply by JenSocial on December 22, 2010 at 2:52pm

After I installed it, I looked in my tips and tricks folder, it's the same script I used last year from dynamic drive. So, I can tell you, it runs well. At least it did last year, and so far this year.

;-)

▶ Reply

Permalink Reply by www.overtone.cc - Jens on December 23, 2010 at 6:07am

... from dynamic drive !!! good to know. I just trusted the guys from outbrain.com where I found the clear script in the source code - thanks for this recommendation! Interesting site http://www.dynamicdrive.com/ - funny that I am learning English by reading technical stuff about HTML, javascript and more.

I have updated my thread because I found another snow flakes which harmonize better on white background color.