No Fancy Name: using javascript to randomize things in your blog template

Sunday, November 13, 2005

using javascript to randomize things in your blog template

First, let me begin with the disclaimer that this particular solution may not be the most hifalutin' programmerish way to do this, but it is a usable, flexible, simple way to achieve a particular goal for users with zero to little familiarity with code, and/or for users who do not have access to server-side languages or even access to storing external files on a server. Randomizing things when server-side languages are available, or when external files can be stored and called by server-side or client-side languages, that's a whole other set of instructions.

Given the information that follows, you'll be able to randomize things in your blog template using JavaScript. Examples include images and text, as used for header graphics and taglines—but you can use the code to place images and text anywhere in your template, not just at the top.

The fundamental function that controls the randomization of things is the randRange() function seen below:

Paste this function in the HEAD area of your blog template. The HEAD area of your blog template is surrounded by <head></head> tags. Your stylesheet, meta tags, and likely other JavaScript functions are in this area as well. Just cut and paste the code above somewhere in that area. If you are unsure where to put it, look in your template for the closing </head> tag and paste this code just above it.

Once pasted in the HEAD area of your blog template, you can forget about this function. Whether you plan to randomize your header graphic, tagline text, both, or something else, you will call this function in order to get a random number, but you won't have to modify this code or duplicate it further down in your template, or anything like that. Just paste it in and move on.

Next I'll explain the actual randomizing process before getting all specific with headers or text. This entire process works off two basic concepts: 1) get a random number and 2) match the random number to something.

You get a random number by calling the randRange() function you pasted into the HEAD area of your blog template. Before calling the function you must know the high end of the range of numbers. For instance, if you want to select a random header graphic from a set of five, then five is the high end of the range. Similarly, if you want to select a random tagline from a set of fifteen, then fifteen is the high end of the range. Here is how the function is called:

var randVal = randRange(1,[total number of things]);

Where "randVal" is the name of the variable you are creating, and [total number of things] is the high end of the range. In case you want to use the randomizer multiple times in your template, it's best to name the variable something akin to the number it represents. Let's assume the random value is for a random header, and you have five possible headers to choose from. You would then use something like this:

var randHdr = randRange(1,5);

The result of this function will be a random number between 1 and 5 (inclusive) assigned to the variable randHdr. In other words, randHdr could be assigned a value of 1, or 2, or 3, or 4, or 5. Now that you have that value, stored in the randHdr variable, you need to do something with it to get the random header displayed on the page.

The next part of this process sets up an if...else logical construct that looks to match the number stored in randHdr. When a match is made, the JavaScript document.write() method will be used to write text to the browser. For instance:

if (randVal == 1) {
document.write('random thing 1')
} else if (randVal == 2) {
document.write('random thing 2')
}

...and so on; for as many items as you have, you need to add a matching else if (something) in there. For instance, say you have five things:

Or maybe eight things:

if (randVal == 1) {
     document.write('random thing 1')
} else if (randVal == 2) {
     document.write('random thing 2')
} else if (randVal == 3) {
     document.write('random thing 3')
} else if (randVal == 4) {
     document.write('random thing 4')
} else if (randVal == 5) {
     document.write('random thing 5')
} else if (randVal == 6) {
     document.write('random thing 6')
} else if (randVal == 7) {
     document.write('random thing 7')
} else if (randVal == 8) {
     document.write('random thing 8')
}

I think you get the idea. This is also the area where someone will say "but you could also [insert solution here]" where [insert solution here] is something like "put things in a database" or "put things in an external file" or "make an array and randomize it instead" or ... you get the idea. All those things are true. But in the case of people who don't have access to a database, or access to a filesystem, or don't want to have to understand arrays with their keys and values and indices and counting starting at 0 instead of 1, this solution will work. All you have to do is cut and paste and increment by 1.

The text that appears within the document.write() method can either be text—useful for a tagline but not for a header graphic—or a bit of HTML. The HTML in this case will be an <img> tag specific to an image stored somewhere. There's the key for randomizing header graphics: the graphics must be stored somewhere. You can use Blogger images, Flickr, PhotoBucket, whatever you want. As long as you have a full URL to the image in question, then you're good to go. Let's say you have three images to randomize. You would use:

if (randHdr == 1) {
     document.write('<img src="http://url.to/file1.ext">')
} else if (randHdr == 2) {
     document.write('<img src="http://url.to/file2.ext">')
} else if (randHdr == 3) {
     document.write('<img src="http://url.to/file3.ext">')
}

Replacing, of course, "url.to" with the appropriate domain and/or directories, and "file.ext" with a filename including extenstion, such as "somerandomhdr.jpg". Example:

if (randHdr == 1) {
     document.write('<img src="http://photos1.blogger.com/blogger/3212/748/1600/saltandpepper.jpg">')
} else if (randHdr == 2) {
     document.write('<img src="http://photos1.blogger.com/blogger/3212/748/1600/card%20catalogue.jpg">')
} else if (randHdr == 3) {
     document.write('<img src="http://photos1.blogger.com/blogger/3212/748/1600/sushi.jpg">')
}

The actual chunk of code you'd use in your template must be surrounded by the appropriate <script></script> tag pair and contain the call to the randRange() function, like so:

When a page is loaded containing this code, first a value will be assigned to randHdr and then the matching will take place via the if...else construct that follows it. For whichever line matches the random value, the text (or code) within the document.write() method will be printed to your browser. So, if value of randHdr is 2, then this will be printed to your browser:

This of course brings up the last key to the puzzle: where to put this JavaScript? The JavaScript should be placed wherever you want the resulting text (or code) to be printed. So let's say the source code looks like this:

<div id="banner-inner" class="pkg">
<a href="http://kinesthesis.blogspot.com">
<img src="http://photos1.blogger.com/blogger/3212/748/1600/shore-stairs.jpg">
</a>
<h2 id="banner-description">just keepin' the dream alive, man.</h2>
</div>

The random header image will be replacing the bold text:

<div id="banner-inner" class="pkg">
<a href="http://kinesthesis.blogspot.com">
<img src="http://photos1.blogger.com/blogger/3212/748/1600/shore-stairs.jpg">
</a>
<h2 id="banner-description">just keepin' the dream alive, man.</h2>
</div>

So you'd want to paste in the JavaScript like so:

As we all know, templates differ from user to user so pointing out exactly where this code should go for all templates would be difficult to say the least. So, after giving it a try in your own template, I would highly recomment using the handy "Preview" button to see where the random header ends up. Also note that you would stick a border=0 in the <img> tag in this particular instance, since it will be surrounded by a link and thus would have a border around it.

So, on to random taglines...which are exactly the same as random headers except the text (or HTML) within the document.write() method will not be an <img> tag. Let's assume you're Pilgrim/Heretic and have random taglines out the wazoo, where in this case "out the wazoo" means "six." Your JavaScript might look something like this:

Note the use of the backslash to escape the apostrophes. Apostrophes within single-quoted strings are bad news, so remember to escape them with the backslash.

So where does this bit of JavaScript go? Depends on the location of your tagline. In P/H's case, the source code looks like this:

<div id="blog-header"><h1>
Pilgrim/Heretic
</h1>
<p>A deep-fried barbaric yawp.</p>

...so you'd want to place your JavaScript like so:

<div id="blog-header"><h1>
Pilgrim/Heretic
</h1>
<p>
<script type="text/javascript" language="javascript">
var randTagLine = randRange(1,6);

if (randTagLine == 1) {
     document.write('A deep-fried barbaric yawp.')
} else if (randTagLine == 2) {
     document.write('Perhaps I was channeling Tamerlane.')
} else if (randTagLine == 3) {
     document.write('We are going to celebrate ourselves in a Walt Whitman kind of a way.')
} else if (randTagLine == 4) {
     document.write('If we do it right, we\'ll sound like the world\'s biggest gamelon band.')
} else if (randTagLine == 5) {
     document.write('I would be remiss in not stating that gongs are for banging and thence to getting it on.')
} else if (randTagLine == 6) {
     document.write('Desert, but minus the troublesome Warrior icing.')
}
</script>
</p>

In the case of a tagline or other bit of text, put any HTML markup outside the JavaScript if for no other reason than it is repetitive. For instance, if you wanted this string to be emphasized, the <em></em> tag pair would go outside like so:

<div id="blog-header"><h1>
Pilgrim/Heretic
</h1>
<p><em>
[code]
</em></p>

Remember, as with any template-fiddling you do, be sure to backup your template before making modifications, and preview, preview, preview before publishing. Also note this isn't Blogger-specific or even blog-specific, as random JavaScript things can be used in any blog or web site. Just some of the terminology used here like "blogger template" or "preview button" would have to be substituted appropriately for your own platform and situation.

UPDATED to add: So you want to get all crazy and randomize two sets of things, let's say header graphic and tagline.
Let's also assume that this is the non-random, static content:

Here (again) is the same content with the random header graphic:

Now we do something for taglines:

<div id="banner-inner" class="pkg">
<a href="http://kinesthesis.blogspot.com">
<script type="text/javascript" language="javascript">
var randHdr = randRange(1,3);

if (randHdr == 1) {
     document.write('<img src="http://photos1.blogger.com/blogger/3212/748/1600/saltandpepper.jpg">')
} else if (randHdr == 2) {
     document.write('<img src="http://photos1.blogger.com/blogger/3212/748/1600/card%20catalogue.jpg">')
} else if (randHdr == 3) {
     document.write('<img src="http://photos1.blogger.com/blogger/3212/748/1600/sushi.jpg">')
}
</script>
</a>
<h2 id="banner-description">
<script type="text/javascript" language="javascript">
var randTagline = randRange(1,4);

if (randTagline == 1) {
     document.write('some tagline 1')
} else if (randTagline == 2) {
     document.write('some tagline 2')
} else if (randTagline == 3) {
     document.write('some tagline 3')
} else if (randTagline == 4) {
     document.write('some tagline 4')
}
</script>
</h2>
</div>

Note that the variable name was changed from randHdr to randTagline, and in this example since there are four taglines and three header graphics the second call to the randRange() function uses "4" as the upper limit. In the if...else construct there are four possibilities instead of the three in the construct for the graphics, and the variable being matched is also randTagline instead of randHdr.

technorati tags: blogger, blogger templates, javascript, random

go to main page

posted by julie at 7:50 AM // permalink // COMMENTS DISABLED: BLOG IS DEFUNCT
note: links within posts might be broken because this blog is not being updated and things on the internet tend to move/disappear
I now blog at battleoftheants.blogspot.com