liMarquee / Ajax and Refresh

RESULT (Updated every 3 seconds)

CODE

 
<!--If you have already use jquery, then this line is not necessary--> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 


<!-- Plugins files-->
<link rel="stylesheet" href="css/liMarquee.css">
<script src="js/jquery.liMarquee.js"></script> 

<!-- Initialization of plugin --> 
<script>
$(window).on('load',function(){
	//Defined time delay, ms
	var changeDelay = 3000;
	
	//Call plugin
	var strEl = $('.str4');
	strEl.liMarquee({
		removeContentFadeDuration:300,
		circular:true,
		startShow:true
	});
	
	////Change Content Functions
	var changeContentFunc = function(){
		$.ajax({
			method:'get',
			url:'ajax_and_refresh.php',
			dataType:'html',
			success:function (html) {
				strEl.liMarquee('removeContent');
				strEl.liMarquee('addContent',html);	
			}
		});
	};
	
	//A timer for content change
	setInterval(function(){
		changeContentFunc();
	},changeDelay)
	
	//Paste the starting content into the ticker
	changeContentFunc();
})
</script> 



<!-- HTML code-->
<div class="str4 mWrap"></div>

/* -- PHP code (ajax_and_refresh.php) -- */
<?php
$gold_cost = '1292.5';
$silver_cost = '17.4';
$platinum_cost = '965.7';
$palladium_cost = '532.7';

$up = '&uarr;';
$down = '&darr;';

$update_titme = date("Y-m-d H:i:s");

echo '
	<span class="comItem">
		<b>Gold 1g: </b>
		<span>

			'.$gold_cost.' $

			'.$up.'

		</span>
	</span>
	<span class="comItem">
		<b>Silver 1g: </b>
		<span>
		
			'.$silver_cost.' $
			 
			'.$down.'

		</span>
	</span>
	<span class="comItem">
		<b>Platinum 1g: </b>
		<span>
			
			'.$platinum_cost.' $
			
			'.$up.'
			
		</span>
	</span>
	<span class="comItem">
		<b>Palladium 1g: </b>
		<span>
		
			'.$palladium_cost.' $
			 
			'.$down.'
			
		</span>
	</span>
	<span class="comItem">
		<b>Last Update: </b>
		<span>
			'.$update_titme.'
		</span>
	</span>
	';
?>