vb.org Archive - Snow & other Effects for your forum

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.5 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=155)

- - Snow & other Effects for your forum (https://vborg.vbsupport.ru/showthread.php?t=99991)

Snow & other Effects for your forum

[Original Source & Files Copyrighted to ? Dynamic Drive]

UPDATED:

Ok i have changed the code a little bit and added some images to the zip folder at current i havent added a menu in admin CP to globally turn this off
when i manage to figure out the new hooks system ill have a bash at doing it for you :).

You can easily add your own images just upload your image to the effects folder which should be located
in your forums image folder for example /forum/images/misc/effects/
Then change the code to point to the new image name.

The images will only work with the Forum Effects code

ok lets get started :).

first goto admincp > styles & templates > edit templates and locate header and edit
at the very very top before anything else. Add one of the following codes,

For small snowflakes add this code

Code:



<!-- Snow Effect(Small SnowFlakes) by Blackpheonix ? to Dynamic Drive -->

<script type="text/javascript" src="/forum/images/misc/effects/snow.js">

</script>

<!-- /Snow Effect(Small SnowFlakes) by Blackpheonix ? to Dynamic Drive -->

find and edit this line

src="/forum/images/misc/effects/snow.js

point it to your forum image path

************************************************** **************************

For big snowflakes and other effects add this code

Code:



<!-- Forum Effects by Blackpheonix ? to Dynamic Drive -->



<script language="JavaScript1.2">

  



  //Configure below to change URL path to the snow image

  var snowsrc="/forum/images/misc/effects/effect(*).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 ns6up = (document.getElementById&&!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||ns6up) {

    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||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 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_NS6() {  // IE and NS6 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 = ns6up?window.innerWidth : document.body.clientWidth;

        doc_height = ns6up?window.innerHeight : document.body.clientHeight;

      }

      dx[i] += stx[i];

      if (ie4up){

      document.all["dot"+i].style.pixelTop = yp[i];

      document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

      }

      else if (ns6up){

      document.getElementById("dot"+i).style.top=yp[i]+'px';

      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px';

      }   

    }

    setTimeout("snowIE_NS6()", 10);

  }



  if (ns4up) {

    snowNS();

  } else if (ie4up||ns6up) {

    snowIE_NS6();

  }



</script>

<!-- /Forum Effects by Blackpheonix ? to Dynamic Drive -->

find and edit this line

var snowsrc="/forum/images/misc/effects/effect(*).gif"

point it to your forum image path and delete the (*) and put a number from 1-18 (make sure there is no space for example effect1) to use the pre-added images.

************************************************** **************************

now download forum_effects.zip and upload the effects folder to your forum image path for example /forum/images/misc/

************************************************** **************************

Few addons for this modification.

************************************************** **************************

Let your forum members choose weather or not to display the effect. - Thanks to SHANE-D-PAIN

Go to AdminCP => User Profile Fields => Add new User Profile field => Single Select Menu

Title: View Forum Effects
Description: Choose yes to view forum effects.
Options:
Yes
No
Set Default: Yes, but No First Blank Option
Editable By User: Yes
Display Page: Options: Other Options

Write down your field# . i.e field5

Change X to the Field id.

Just remember to wrap the code with the if tags provided.

Code:

<if condition="$bbuserinfo[fieldX] != 'No'">

Add The Code Here

</if>

For Example:

Code:

<if condition="$bbuserinfo[field5] != 'No'">

<!-- Snow Effect(Small SnowFlakes) by Blackpheonix ? to Dynamic Drive -->

<script type="text/javascript" src="/forum/images/misc/effects/snow.js">

</script>

</if>

<!-- /Snow Effect(Small SnowFlakes) by Blackpheonix ? to Dynamic Drive -->

************************************************** **************************

Make modification optional per usergroup. - Thanks to SHANE-D-PAIN

Code:

<if condition="is_member_of($bbuserinfo[usergroupid], array(1,2,3,4,5))">

Add The Code Here

</if>

Where 1,2,3,4 & 5 are the ids of the Usergroups that this is to be displayed to.

For Example:

Code:

<if condition="is_member_of($bbuserinfo[usergroupid], array(1,2,3,4,5))">

<!-- Snow Effect(Small SnowFlakes) by Blackpheonix ? to Dynamic Drive -->

<script type="text/javascript" src="/forum/images/misc/effects/snow.js">

</script>

</if>

<!-- /Snow Effect(Small SnowFlakes) Effect by Blackpheonix ? to Dynamic Drive -->

************************************************** **************************

To Save on the heavy CPU usage that this mod uses follow the instructions below - Thanks to Solitary Seraph

Please Note, This is for the small snowflakes and not the big ones.

Edit the snow.js with any type of editor (ie. notepad).

Code:

var num = 20;   //Number of flakes 

var timer = 75; //setTimeout speed. Varies on different comps 

var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

The first two will let you change it, Solitary Seraph changed it to 20/75, and it dropped to about 50% cpu usage for his/her members with bad computers.
Keep tweaking with it and eventually it should work nicely for everyone, or you can turn it off with the last bit, for the mozilla users.

************************************************** **************************

I would also like to thank the following ppl :)

Smiry Kin's - for the nicer snow image.

************************************************** **************************

PLEASE NOTE: Big snowflakes and other effects may slow down your board and may not be viewable via firefox browsers. The small flakes should be ok and can be viewed by firefox.

hope u enjoy!

:) Please Dont forget to click Install :)

[Original & Files Copyrighted to ? Dynamic Drive]

Awesome :)

[high]* Cyricx installs![/high]

Ur a star mate, thanks :)

This is awesome. Now I need a Christmas style to put it on

I have the hack in, but I just have red X's for the snow.gif ??? www.phonexpo.net/index.php

Ohh, nice, looks like a great Christmas style effect for me to use ina few weeks. :)

I've put *installed* now, but wont actually use this till December though. :)

Quote:

Originally Posted by phonexpo

I have the hack in, but I just have red X's for the snow.gif ??? www.phonexpo.net/index.php

LMAO...Check the path for the snow flakes....

LMAO..just think about it.

Quote:

ERROR 404...Weather cannot find snowflake specified.

LMAO!!!!!

Quote:

Originally Posted by jugo

LMAO...Check the path for the snow flakes....

LMAO..just think about it.

LMAO!!!!!

File path is http://www.phonexpo.net/images/misc/snow.gif

Quote:

Originally Posted by jugo

LMAO...Check the path for the snow flakes....

LMAO..just think about it.

LMAO!!!!!

Have you stopped laughing yet? I need to fix this please.

Deto, just swap out the gif for something like a falling leaf gif or something :)

I can't wait til next halloween, I got a kick butt flying witch gif I'm going to use LOL!

Very Nice man, but one question could this be made to be turned on/off through the admin CP and not through file edits. or Set to schedule like turn it on randomly etc so It does not get old fast..?

Mabey we can all work on some different types of Icons to float around Im pretty good with Photoshop but my coding skills lack :P Id be willing to work on these

heck even mabey add in a random gif from specificed folder to mix it up.

Nice one .. will save for Xmas :cool:

Is there any way to change the path (rather than /forum) in the hack? I can do it manually, but not everyone has it set up in their /forum directory. Which is what is causing some problems (me for the first 2 seconds).
Awesome hack, btw. I'm going to play around with leaves later. :)

does it play well in firefox?

it works fine for me only the big snow not :) thnx for the snow

cool. Will install this in December!

Very nice! Works in all browsers! Anyone have any ideas how I can make this optional per usergroup without new styles or usergroups?

You could add conditionals around the code to allow for certain usergroups to see it.

I will use this at xmas! :)

Quote:

Anyone have any ideas how I can make this optional per usergroup without new styles or usergroups?

Code:

 

<if condition="is_member_of($bbuserinfo[usergroupid], array(1,2,3,4,5))">

the code here 

</if>

Where 1,2,3,4 & 5 are the ids of the Usergroups that this is to be displayed to.

If you want to make it so the users themselves can view to see it you could create a new user profile field and use that to allow them to choose. Infact im going to get the code for it. :P - Just incase anyone wants it.

Right, here goes, I have never posted anything like this so be gentle :P

Go to AdminCP => Profile Fields => Add new Profile field => Single Select Menu

Title: View Xmas Snow Flakes?
Description: Choose yes to have little Christmas Snowflakes Floating around.
Options:
No
Yes
Set Default: Yes, but No First Blank Option
Editable By User: Yes
Display Page: Options: Other Options

Write down your field# . i.e field6

Here is the code, I am using the small snowflakes as example code.

Code:

<if condition="$bbuserinfo[fieldX] != 'No'">

<!-- Snow Effect(Small SnowFlakes) by Blackpheonix ? to Dynamic Drive -->

<script type="text/javascript" src="/forum/images/misc/snow.js">

</script>

<!-- /Snow Effect(Small SnowFlakes) by Blackpheonix ? to Dynamic Drive -->

</if>

Change X to the Field id.

Just remember to wrap the code with the if tags provided. :)

Code:

<if condition="$bbuserinfo[fieldX] != 'No'">

 

</if>

I tested this out on my site so I know it works.

Just thought I would post that I currently have the following setting in the profile field:

Description: Choose yes to have little Christmas Snowflakes Floating around throughout December.

I just did this because I have added the prifle field but not added the code for the Snow Flakes yet cause I feel its too early.

Members will be able to see the Field but the Description clearly states that the Flakes will be there in December, just lets them choose now if they want to.

It's great, the only thing I don't like about javascript with this code is that it uses up a lot of cpu resources and slows everything down. :(

This works well in IE, Firefox and netscape (I've viewed it in netscape and IE, my users firefox). It *does* lag the site for users on slower computers so everyone needs to take that into consideration. I've got a pretty kicking computer and it only minorly lagged when I tried to open a pop down menu on my nav bar but some people it does get pretty laggy (one of my friends showed me at his house). I'm using the "small" flakes and not the big ones.

Some kind of randomizer would be cool, or a way to set it up as an even so that at random times during the day it snows.

It's an AWESOME little toy though.

Quote:

Originally Posted by smsmasters

It's great, the only thing I don't like about javascript with this code is that it uses up a lot of cpu resources and slows everything down. :(

Well if you do what I have posted up then its set to No so the Snow Flakes wont show, you could put a warning in the description I suppose to let them know it will lag on computers that suck.

Quote:

Originally Posted by Cyricx

I can't wait til next halloween, I got a kick butt flying witch gif I'm going to use LOL!

Hehe, yeah, you've just given me inspiration... I could actually use this for all kinds of events and a variety of festive type things. :D

Although obviously I won't be over doing it, as it would get annoying if it was over used.

Quote:

Originally Posted by Detomah

Thats why you give users the option to turn it off and on. :P

What would be awesome? A seasonal package. Depending on the season, or weather conditions, the option given (and applicable images/files) to turn on/off weather (rain, snow) seasonal attributes (leaves, ghosts-if you will), etc. If you're feeling kinda weathered down, have something like the sun poke out from behind the forums and move depending on the time of day... lol - the options would be endless - and a vote for HotM.

Quote:

Originally Posted by christianb

ditto
and add in a holiday pack. (st. patricks, valentine, halloween, etc)

Very nice, going to check this out come December...I've just started making different logos for my main theme depending on the holiday (did halloween and have one set aside for thanksgiving already...), definitely have to do something with this...

Cant we just get a turn it on/off in the Admin-CP for all users?

Anyone have this running and want to share the link? I know what snow effects are like, but I just wanna see how purdy it is. :)

Cool stuff. Not sure if this can be fixed but the little cursor goes crazy flashing while this is running instead of the normal blink.

I got red X's for IE as well, but the light snow is good to go. Anyhow very nice for the holidays :)

*clicks install*

Don't use the big snow, it doesn't work perfect on IE nor FF. It takes while to load.

INSTALL

For those of you that want to use this for different holidays, etc... you can also put in date conditionals, so that the script also checks to see if it's the correct date for them to show.

I don't know the exact php code, but it would look something like:

Code:

if date == <the date> && $userinfo[fieldX] !='No' <rest of the code>

That way you could actually put all of the stuff in before the holidays rolled around (in separate <if> blocks), and it would be the code that would handle turning it on and off, rather than you having to manually do it.

This also allows for users to turn off these extra goodies if they want, so that they can 'opt out' for slower computers (or if they just find it annoying).

Great hack...thanks!

hmm.. it is indeed a very nice visual effect.
but look at the cpu load that your browser consumes when viewing a site using this hack. even when u use the small snowflakes version.
is there any way to minimize that?

Pretty neat :squareeyed:

can the small flakes not be made a bit bigger for us FF users..

Opera hates it lol

Its very nice but its a shame that hasnt an option to turn it off or on through the Admin cp....

Hope it can be added so i can install it :)

Quote:

Originally Posted by craiovaforum

Yeah I had to turn it off. It was freazing up a few members browsers.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01633 seconds Memory Usage 1,855KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (11)bbcode_code_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: