jQuery to Display Dynamic Content Continuously After Page Load

The title is a mouthful, but it’s true.  A client needed a timer from a WordPress plug-in to be displayed multiple times on a page, but the plug-in didn’t allow for multiple instances on the page.  I tried to do a few workarounds by hacking (or just trying to make it do things it wasn’t intended to do without actually changing its code) the functionality of the plug-in itself to no avail.  So I turned to what is increasingly solving my web dilemmas: jQuery.

The code to dynamically get content from the page and output it wherever you want

$(function() {
//Tells the code to run the code every 800 milliseconds.
	setInterval(function() {

//Tells where to place the content you're grabbing.  I'm putting
//each one in a div with the class "countdown-timer"
	$('div.countdown-timer').html(function() {

//Sets a variable called timeRemaining, which is equal to the html
//of the first paragraph.  So any content inside of the first 
//paragraph gets plugged into the div class "countdown-timer"
		  var timeRemaining = $('p:first').html();

//tells the variable timeRemaining to actually output
		  return timeRemaining;
		});
	}, 800);
});

To get this to work for you:

• Change ‘div.countdown-timer’ to wherever you want the content to output. I used a class element so I could output it lots of times on the page.
• Change ‘p:first’ to wherever you want to be grabbing the content from. Mine just happened to be the first paragraph, so it was the easiest way for me to select it.
• Add whatever you put for the ‘div.countdown-timer’ to your page. So, for me, I put

  wherever I want the content from ‘p:first’ to appear.

Cheers!