Blog

Widgets How-To: Display Single Random Item Using Javascript

Feed Informer's built-in tools, paired with CSS capabilities, let you create meticulously crafted widgets, but sometimes it's not enough. Perhaps you didn't know it, but you can make your widgets more powerful by adding Javascript to the mix.

Let's consider the following example of how you can expand built-in functionality of Feed Informer widgets using simple Javascript code.

Task (based on the actual request from our user): I need a widget that would display exactly one randomly selected item of my digest each time the page where it's embedded is loaded in browser.

Problem: you can create a widget comprising of just one random item using built-in tools, but due to technical limitations it will update only when digest's content is updated, which is not what we want.

Solution: we'll let our widget display multiple items, but, with the power of Javascript, we hide all its items but one.

For the sake of brevity, HTML code of our widget will be quite simple.

Header template

<ul id="fi-widget-1" style="display: none; margin: 0; padding: 0">

Per-item template

<li style="display: none; margin: 0; padding: 0">
<strong><a target="_blank" href="%URL%">%TITLE%</a></strong>
</li>

Footer template

</ul>

Now let's write a function that would unhide a random <li> element (they are hidden initially, as well as the container <ul> tag):

<script type="text/javascript">

function showwidget(widgetid) {

// create an array of <li> elements
var filist = document.getElementById(widgetid).getElementsByTagName("li");

// get a random element's index
var itemtodisplay = Math.floor(Math.random()*filist.length);

// using CSS "display" property, unhide the element we previously selected
for (var i = 0, l=filist.length; i < l; i++) {
	if (i==itemtodisplay)
		filist[i].style.display = "block";
}

// unhide the widget
document.getElementById("fi-widget-1").style.display = "block";

}

</script>

You can embed your script into page template, but you have a choice to incorporate it into the widget itself.

Let's do the latter approach and save our function code in the Header part of the widget, before <ul> tag.

Now we just need to call the function. Since it's important to call it after the HTML code of the widget, it would be logical to put the call in Footer template, after </ul> tag:

<script type="text/javascript">showwidget("fi-widget-1")</script>

You can check the widget in action here.

To import complete widget code, please visit the same link and click CUSTOMIZE button, then click 'Edit template manually' link and copy code snippets for each part of the widget to the corresponding fields of your template.

That's a simple demonstration of how to expand your widget capabilities beyond the core functionality provided by Feed Informer. We'd like to invite our power user to share their own examples of advanced widget templates that other user may find useful. The best examples will be republished here or we can provide a link to your web page where the widget code can be found. Please make your code available under Creative Commons license so it can be used by others without restrictions.