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>

Footer template


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";



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.


  1. First of all, THANK YOU for this brilliant work-around. I got it to work great in preview but when I post the HTML code to my website, the feed shows nothing except the FEED INFORMER credit. I tried it with your code to see if it was just me and still nothing. I will try adding the script to the page and anything else I can think of but wanted to see if you had any ideas. Thanks!

    Posted March 3, 2015 at 10:27 pm | Permalink
  2. Hello Susan,
    Could you please provide us with a link to a test page that has your widget embedded, using our Contact Form?

    If you use a content management system (including blogging platforms), my guess is it can remove Javascript code (as a safety measure) if you embed your widget directly into the body of your post or page. In this case please try to move all JS code from the widget template to the page template.

    Posted March 3, 2015 at 11:13 pm | Permalink
  3. I pulled the scripts that were in the header and footer and added within the head tag on this CMS page:

    I put the widget code at the bottom of the right column. Your suggestions would be appreciated!

    Posted March 4, 2015 at 4:01 am | Permalink
  4. Since now you call showwidget() before the widget’s HTML code is loaded, it leads to an error. The easiest way to fix it is to make sure that showwidget() is called after the document or window is loaded, like this:
    <script type="text/javascript">
    function fiwidgetload() {
    window.onload = fiwidgetload;

    Posted March 4, 2015 at 11:21 am | Permalink
  5. Thanks…Just to clarify: is this in addition to the other scripts or does it replace the call? (Sorry… javascript neophyte)

    Posted March 4, 2015 at 7:59 pm | Permalink
  6. It’s a replacement for this code:

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

    Posted March 4, 2015 at 9:30 pm | Permalink