A Veritable Article

Let It Snow with a Snowflake Control Panel in Textpattern

By Marc Carson · Wednesday December 1, 2010

In this tutorial I’ll show you how to set up a Snowflake control panel in the Textpattern CMS. This will allow you to easily activate or deactivate a JavaScript snowflake effect.

This tutorial assumes you know your way around Textpattern’s control panel, can install a plugin, and can upload a JavaScript file to your server.

The snowfall effect works on mobile devices as well, as you can see by the iPod Touch screenshot above.

The Set-Up

Install and enable the following plugin: adi_variables

Next, download the ‘Snowfall’ jQuery plugin, and add the file “snowfall.jquery.js” to the “js” folder on your website.

Then, add this code to the form or page on your website where you want snow to fall. I added it to a single Textpattern page, because I didn’t want the snow on every page of my website:

Update: This code can be replaced by simpler code if you wish to use a Textpattern plugin. See the “Updates” section below.

<txp:if_variable name="snowflakes" value="on">
<script src="http://www.EXAMPLE.com/js/snowfall.jquery.js"></script>
<script type="text/javascript">
	$(document).snowfall({
		flakeCount : 25,
		flakeColor : '#ffffff',
		flakeIndex: 999999,
		minSize : 1,
		maxSize : 4,
		minSpeed : 2,
		maxSpeed : 5
	});
</script>
</txp:if_variable>

Imporant: Change “EXAMPLE.com” on line 2 of the code above to your domain name!

This code will check if the “snowflakes” variable is set to “on.” If so, the Javascript is loaded.

Adi and His Variables

This is where the adi_variables plugin comes in. You installed it and enabled it, right?

Adi_Variables gives us a “Variables” tab in the CMS to control any variables we want. In this case we want something that controls whether snowflakes are turned ON or OFF. We don’t want to have to re-insert this code every time winter rolls around!

In the Textpattern control panel, you should now have a “Variables” tab underneath “Content.” Go there and type “snowflakes” in the empty field to the left. Then, in the field next to it, type “on” (set “public” however you like, depending on who you want to have access to this setting).

Click the “update” button and you’re all set! This will save the variable.

Now reload your website and you should see snowflakes falling.

Classy, understated, and season-appropriate, or ironically corny? You be the judge.

Going furtherererer

Note that you can change lots of parameters in the JavaScript above that will affect the way the snowflakes behave. For example, if you have a website with a white background, you might try a gray color for the flakeColor setting (snowflakes are actually gray anyway, if you compare them to absolute white, or look up at the clouds to see them).

Or, if you live near a volcano, you might try a deep ashen gray to celebrate your upcoming Volcano Fest. Very versatile!

If you are really excited about giving your clients access to this, you can even make textpattern variables for the parameters in the JavaScript. Then you can install a plugin like adi_notes and leave a note on the variables tab, explaining to your client what all the different variables do.

Updates

Hey, now it’s a plugin

Matt Davis has turned the snowflake effect into a Textpattern plugin called msd_snowflakes. Thanks, Matt!

If you install and enable the plugin, you only need to use code that looks like this:

<txp:if_variable name="snowflakes" value="on">
<txp:msd_snowflakes />
</txp:if_variable>

That’s a lot shorter. Lovely.

Firefox scrollbar issue

Uli notes that:

in FF 3.6, on screens high enough to not cause scrollbars to appear, the whole wrapper div’s content is trembling when a snowflake swings enough so that vertical scrollbars appear caused by its swing.

Whoa, thanks for pointing it out!

Here’s a fix I found. You can add this to your site’s CSS in the Presentation —> Styles tab:

/*Fix for Firefox Snowflakes bug*/
HTML {
overflow: -moz-scrollbars-vertical;
}

This fix does place an inactive scrollbar on your website where there might not otherwise be one. For me it’s not a big deal — only affects one browser and a single page on my site, and only on certain screens — but you can weigh the decision and consider your own devotion to the snowfall effect.