It’s the most wonderful time of the year, and what better way to celebrate than to play a harmless, festive prank on your colleagues and fellow employees! Sitting by the Yuletide fire this year with a little time on my hands, I had an idea for an interesting prank powered by a couple of little used SharePoint features.

This blog post will show you how to add a falling snow effect and play some… festive… music when a visitor opens your page 🙂

ChristmasPrank

If you’re not interested in the prank aspect of this post (bah, humbug!), the mechanics we’ll demonstrate will show you how you can easily target code and styling to only certain members of your site, and not all of them.

To get started, we’ll need to find some JavaScript code for our falling snow effect and an appropriately annoying Christmas tune to play.

Step 1: Falling Snow

First things first, let’s get a nice solution for putting falling snow on a page.  I really like this falling snow effect by “Goat 1000,” but of course you can replace with another method if you like it better.

http://www.jqueryrain.com/?CJwIdqnK

To keep the solution future proof, I’d recommend you download the JS file mentioned and upload it to your SharePoint site’s document library.  Once you do, you can generate the JS code you’ll put on your page:

<script src="{URLToYourSharePointLibrary}/snow2.min.js" 
	type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
 try {
 snow.count = 30; // number of flakes
 snow.delay = 20; // timer interval
 snow.minSpeed = 2; // minimum movement/time slice
 snow.maxSpeed = 5; // maximum movement/time slice
 snow.start();
 } catch(e) {
 // no snow 🙁
 }
};
//]]>
</script>

Step 2: Annoying Music!

Next, we need to get a suitably annoying Christmas tune to play when our victims load the page.  I suppose we could find a pleasant tune to play, but that’s not as much fun.  So, for annoying Christmas music, I think most would agree that the otherwise brilliant Paul McCartney’s horrifying Wonderful Christmastime fits the bill quite nicely.

Paul

And, to make it even better/worse, how about we get a MIDI version of the song!  Young whipper snappers these days might not remember MIDIs from the Glorious Days of Internet Yore, but suffice to say it’s an audio format that can take the best song and make it hideously annoying.  For today’s purposes, that’s exactly what we want.

I found a good MIDI with a Bing search, but since modern browsers don’t play MIDIs natively anymore (for good reason…), I converted it to MP3 with this site: http://solmire.com/.

Once you have your MP3, simply upload it to the document library you used earlier for the JS, and then we can use HTML5’s <audio> tag to have it autoplay on our webpage.  Check out a tutorial on the tag on the wonderful www.w3schools.com site, http://www.w3schools.com/tags/tag_audio.asp, but, to make it easier, here’s basically what you need to insert:

<audio src="{URLToYourSharePointLibrary}/WonderfulChristmastimeMidi.mp3" 
	preload="auto" autoplay="autoplay" loop="loop"></audio>

Step 3: Put it All Together

We’ve got all our pieces, so to get our prank on SharePoint, we just need to put them together and add the code to a page:

<!--Lovely JavaScript snow-->
<script src="{URLToYourSharePointLibrary}/snow2.min.js" 
	type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
 try {
 snow.count = 30; // number of flakes
 snow.delay = 20; // timer interval
 snow.minSpeed = 2; // minimum movement/time slice
 snow.maxSpeed = 5; // maximum movement/time slice
 snow.start();
 } catch(e) {
 // no snow 🙁
 }
};
//]]>
</script>

<!--Beautiful Christmas music-->
<audio src="{URLToYourSharePointLibrary}/WonderfulChristmastimeMidi.mp3" 
	preload="auto" autoplay="autoplay" loop="loop"></audio>

Step 4: Make It Better with SharePoint

Nothing we’ve talked about yet requires SharePoint.  This is just a JavaScript and HTML5 solution so far and will work on any website.  However, if we add this code to a page, anyone who visits the page with a modern browser will “enjoy” our prank.  This might be what you want, but we have some options in SharePoint that will let us control this experience a little better.  Perhaps you want to prank just the people on your team and not, say, the president of your company who visits your site looking for the most recent investment report.

SharePoint has two features we’re going to take advantage of to make sure we target this prank to only those we want: the Script Editor web part and “audience targeting”.

The Script Editor web part is available in SharePoint 2013 (and newer), and lets you insert JavaScript/jQuery and CSS on your pages in a safe way.

ChristmasPrank2

Audience targeting is an option at the bottom of the web part properties panel (and a few other places in SharePoint) that lets you specify a security group or SharePoint group to only display a web part or navigation element to.

Combine these two together and what do you get?  You can add code to a SharePoint page, via the Script Editor web part, that you only display to the members of a SharePoint group via audience targeting. Now we’re cooking!

Practical Applications

For the Scrooges* and Grinches* out there who are interested in more practical applications of this post, what we’ve done can be used in many, many different ways.  If there’s ever any code or styling that you need to apply to a page for the benefit of only a subset of your site’s users, this method will work great.

For example, let’s say you want to apply different branding to your site based on the regional preferences of a global workforce.  Using JavaScript or jQuery and some CSS in a Script Editor web part with audience targeting, this becomes very easy to do if you have these different groups of people added to specific security groups.

Or, let’s say you would like to rearrange the web parts on a page based on which department a user belongs to.  Say you want to move a report viewer web part higher on the page when members of the Finance department are looking at the page.  You can target some JavaScript to rearrange your page’s DIV tags and deploy it with an audience targeted Script Editor web part.

I won’t belabor the point any longer, but I hope I’ve shown some of the potential uses of these powerful features.

*I’ve always thought Scrooge and the Grinch get a bit of a bad rap.  They’re always trotted out as examples of people hate Christmas, but of course at the end of both their stories they end up as shining examples of how to celebrate Christmas!