javascript update 2 images every minute?

clocka · 22 Apr 2015 at 12:44

Hi,

I am developing an internal website to inform our 2000 staff of the current status of the 25 services they use. I'm adding functionality to our existing home page so by default only a line of text and an "orb" shows.

If there is a problem with a service the "orb" changes colour to represent that, and hovering over the text or "orb" displays a full listing services and their current status.

So hovering over this

shows this.

This is code (stripped down) I have used to get this to work and it works a treat. hover and it shows, un-hover and it disappears.

Code:

<html lang="en">
	<head>

		<!--javascript for service status-->
		<script type="text/javascript">
				function hide(obj) {
					var el = document.getElementById(obj);
					el.style.display = 'none';
				}
				function show(obj) {
					var el = document.getElementById(obj);
					el.style.display = '';
				}
		</script>
		
	</head>
	<body>
			<div id="header">
				
				<h7> 
					<a href="#" onmouseover="javascript:show('link1');" onmouseout="javascript:hide('link1');">
					Current Status of Services: <img src="images/status_ServiceNowColour.png"> </a> 
				</h7>
						
				<div id="popup_container" style="position: relative;">
					<div id="link1" class="site_float" style="display:none;">
					<img src="images/status_ServiceNow.jpg" />
					</div>
				</div>	
					
	</body>

</html>

(status_ServiceNowColour.png is the orb, status_ServiceNow.jpg is the list of services that hides/unhides)

What I to do is make the "orb" and the image that is hidden update every 5 minutes. I've tried to integrate the suggestions and code from http://foscam.us/forum/a-how-to-embed-any-foscam-ip-camera-in-webpage-using-1-line-t9113.html#p43654 and http://www.neowin.net/forum/topic/513381-javascript-image-refresh/ but getting stuck. I think its already because im using javascript to hide/unhide the image.

can anyone offer any assistance? many thanks in advance!

meandu229 · 22 Apr 2015 at 12:51

Something using JQuery and Ajax should be fine.
Like

$(document).ready(function() {
var $img = $('#image1');
setInterval(function() {
$.get('urlinhere', function(data) {
var $loader = $(document.createElement('img'));
$loader.one('load', function() {
$img.attr('src', $loader.attr('src'));
});
$loader.attr('src', data);
if($loader.complete) {
$loader.trigger('load');
}
});
}, 5000);
});

Stolen from stack overflow something like this and then setting the Id/name on your img tag to image1 should work.

edit:included the source link
http://stackoverflow.com/questions/10920514/using-ajax-jquery-to-refresh-an-image

clocka · 22 Apr 2015 at 13:14

worked a treat, thank you.

javascript update 2 images every minute?

clocka

clocka

meandu229

meandu229

clocka

clocka