I often have a load of links arranged under some category or whatever: favorite blogs, blog articles, blog links, etc. These lists tend to become long and cumbersome, and I can also imagine that the reader of my blog sees a complete mess and does not know where to start.
Why not give him or her the chance to click on a button to jump to a random link in the list? That seemed like a good idea to me so that is when I decided to brush up on my Javascript skills, roll up my own sleeves, and give it a go. In the end I was so pleased that I thought perhaps other bloggers out there might be interested in it also.
First of all you need to arrange your links in an array of strings with the following format:
CODE
"title|link"
For example:
CODE
"the storm brewing|http://www.thestormbrewing.com/"
.Basically you end up with the following Javascript array:
CODE
<script language="JavaScript" type="text/javascript">
<!--
var arrILinks = [
"a day in my life|http://www.locotek.com/",
...
"the storm brewing|http://www.thestormbrewing.com/",
...
"wafer baby|http://www.waferbaby.com/"
];
//-->
</script>
<!--
var arrILinks = [
"a day in my life|http://www.locotek.com/",
...
"the storm brewing|http://www.thestormbrewing.com/",
...
"wafer baby|http://www.waferbaby.com/"
];
//-->
</script>
Where the ellipsis (...) represents other entries inbetween. Be very careful that the last array element does NOT contain a comma, as this can lead to unpredictable results depending on the browser.
Alright, so what is the big deal? Now you need to define a routine which will display them. Have a look at the following function:
CODE
<script LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
//
// displayLinks(a)
// display array of links as anchors separated by '|'
// array elements must have the following format:
// "txt|lnk"
// which results in the following:
// "<a href='lnk'>txt</a> | "
//
function displayLinks(a)
{
var i, j, lnk, txt;
for (i = 0; i < a.length; i++)
{
j = a[i].indexOf("|");
if (j != -1)
{
txt = a[i].slice(0, j);
lnk = a[i].slice(j + 1);
document.write('<a href="' + lnk + '">' + txt + '</a>');
if (i < a.length - 1)
{
document.write(' | ');
}
}
}
}
<!--
//
// displayLinks(a)
// display array of links as anchors separated by '|'
// array elements must have the following format:
// "txt|lnk"
// which results in the following:
// "<a href='lnk'>txt</a> | "
//
function displayLinks(a)
{
var i, j, lnk, txt;
for (i = 0; i < a.length; i++)
{
j = a[i].indexOf("|");
if (j != -1)
{
txt = a[i].slice(0, j);
lnk = a[i].slice(j + 1);
document.write('<a href="' + lnk + '">' + txt + '</a>');
if (i < a.length - 1)
{
document.write(' | ');
}
}
}
}
Basically this function runs through the array and inserts the appropriate code to create links to the given sites using the given text. If you prefer another separator token than " | " then you can easily replace the code with "
", for example. Each element except the last is appended with this token.
So after the declaration of the array you should have the following Javascript code at the point on the page where this list is supposed to appear:
CODE
<script LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
displayLinks(arrILinks);
//-->
</script>
<!--
displayLinks(arrILinks);
//-->
</script>
I have also defined a rountine which will take the very same array as input, randomly choose one of the elements of the array, and jump to the link, either replacing the current page or opening up a new window. The routine looks like this:
CODE
<script LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// randomLink(a, bOpen)
// get a random link from the given array
// and change page location there if bOpen
// is false otherwise open new window of
// bOpen is true.
// array elements must have the following format:
// "txt|lnk"
// which results in the following:
// location = lnk;
//
function randomLink(a, bNew)
{
var i, j;
i = Math.round(Math.random()*(a.length));
j = a[i].indexOf("|");
if (j != -1)
{
lnk = a[i].slice(j + 1);
if (bNew) window.open(lnk, "_blank"); else location = lnk;
}
}
// -->
</script>
<!--
// randomLink(a, bOpen)
// get a random link from the given array
// and change page location there if bOpen
// is false otherwise open new window of
// bOpen is true.
// array elements must have the following format:
// "txt|lnk"
// which results in the following:
// location = lnk;
//
function randomLink(a, bNew)
{
var i, j;
i = Math.round(Math.random()*(a.length));
j = a[i].indexOf("|");
if (j != -1)
{
lnk = a[i].slice(j + 1);
if (bNew) window.open(lnk, "_blank"); else location = lnk;
}
}
// -->
</script>
Finally, to put it all together, I have defined a random-button which I place at the end of the list allowing the user to click it in order to jump to a random link. Here it is:
CODE
<script LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write('<p align="center"><input type="button" value="Random" title="Click here to jump to a random blog..." onclick="randomLink(arrILinks,true);" /></p>');
// -->
</script>
<!--
document.write('<p align="center"><input type="button" value="Random" title="Click here to jump to a random blog..." onclick="randomLink(arrILinks,true);" /></p>');
// -->
</script>
That's pretty much it. Putting all the pieces together you end up with something that should look like this:
CODE
<script language="JavaScript" type="text/javascript">
<!--
var arrILinks = [
"a day in my life|http://www.locotek.com/",
...
"the storm brewing|http://www.thestormbrewing.com/",
...
"wafer baby|http://www.waferbaby.com/"
];
displayLinks(arrILinks);
document.write('<p align="center"><input type="button" value="Random" title="Click here to jump to a random blog..." onclick="randomLink(arrILinks,true);" /></p>');
//-->
</script>
<!--
var arrILinks = [
"a day in my life|http://www.locotek.com/",
...
"the storm brewing|http://www.thestormbrewing.com/",
...
"wafer baby|http://www.waferbaby.com/"
];
displayLinks(arrILinks);
document.write('<p align="center"><input type="button" value="Random" title="Click here to jump to a random blog..." onclick="randomLink(arrILinks,true);" /></p>');
//-->
</script>
Feel free to have a look at my blog to see it in action. Hopefully I was able to inspire at least one other fellow blogger to reach out for new heights of blogging.