Recent Topics

1 Dec 19, 2008 14:02    

My b2evolution Version: 2.5

I would like to add a snowflake javascript to my skin for the season, so it looks like it's snowing.

Is this possible? I am winging it and am not having any luck, so I don't know if A - it's not possible or B - I'm doing it wrong. :)

I copied the javascript (from [url=http://www.hooverwebdesign.com/snoweffect.html]here[/url]) and put it in a FreeHTML container in the Header section:

<script language="JavaScript1.2">

/*
Snow Effect Script
Created and submitted by Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
Permission granted to Dynamicdrive.com to feature script in archive
For full source code and installation instructions to this script, visit http://dynamicdrive.com
*/

//Configure below to change URL path to the snow image
var snowsrc="snowflake-blog.gif"
// Configure below to change number of snow to render
var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;

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 (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

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 (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></layer>");
}
} else if (ie4up) {
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 snowNS() { // Netscape main animation function
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();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}

function snowIE() { // IE main animation function
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();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", 10);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}

</script>

I created my .gif, changed the code to reflect my own graphic, and uploaded the gif to a variety of directories (because I wasn't sure which would be the right one - blogs or blogs/skins or blogs/skins/specific_skin).

And it's not working.

Thoughts?

2 Dec 19, 2008 14:17

Hi Hudson,

I could be wrong (many times I am lol) but I believe you need to add the code anywhere in the body of your skin (index.main.php or some name close to that). You don't need the Free HTML plugin regardless of whether it goes in the body or head, it should fit right in with the rest of the code. When putting it in the body of the page be sure you are not somewhere in the middle of other tags - like ?php, or div it could cause problems.

As for where to put the image I am not positive, but it should probably go into the img or images folder within the skin folder you are using.

For example, for me it would go in the following path:
skins>RU3(your skin name here)>img

Hope that helps,
Gene :-)

3 Dec 19, 2008 14:18

I can try that...and actually did think of that. I was just hoping I could put it in an HTML widget so it was more easily deleted at the end of the season. :)

5 Dec 19, 2008 14:29

Oh, good to see you got it working. On the second try is great! Much of what I do is trial and error lol and it takes much more than two tries usually.

Gene :-)

6 Dec 19, 2008 14:30

Well, granted, the second one was completely different than the first one, but it's still neat. :)

The javascript file was separate (there was an entire folder to upload) but I could still add the basic java into the FreeHTML widget.


Form is loading...