Force timed update of CSS file

Question

EDIT:

Thanks Akshat and Jefferey for your help and advice. I'm going to re-ask my question in very simple terms:

How can I make my webpage smoothly re-position an image when it's coordinates change. An application writes the cordinates to a file on the server every minute or so. I say smoothly because I don't want user intervention or a forced page refresh (META HTTP-EQUIV=REFRESH CONTENT=300), that would be easy but not be a good user experience.

I hope this makes sense. Thank you again.

I have a simple webpage with an image - a map - which changes every minute or so. The map dynamically updates every 30 seconds as follows:

<script language="JavaScript">
<!--
function refreshMap1() {
   if (!document.images) return;
   document.images['map1'].src = 'map1.jpg?' + Math.random();
   setTimeout('refreshMap1()',30000);
}
//--></script>

Then:

<body onload=" setTimeout('refreshMap1()',30000)">
<img src="map1.jpg" name="map1">

This works fine.

I overlay an animated gif on the map by loading a StyleSheet containing absolute positioning as follows:

<link rel="stylesheet" type="text/css" href="position.css" />

Then:

<img src="animation.gif" class="pos1" id="a1">

The css file (position.css) simply contains:

.pos1 { position: absolute; left: 300px; top: 400px; }

This works fine also, but.... The css file will change every minute or so the same as the map to reflect a new position for the gif. I want to dynamically change the position of the animated gif by forcing an update of the css every 30 seconds in a similar way as the map. I haven't been able to find a method to force a dynamic timed update of a css file.

Any ideas?

TIA.

You could update the map on the client-side with Javascript whenever the server file gets updated. If you choose that route, I'd go with Akshat's answer. — Jeffrey Sweeney, May 25 '12 at 17:50

Akshat Goel · Accepted Answer · 2012-05-24T13:36:08.453

1

You don't need to change the css file. Just put this in the refresh function :

document.getElementById("a1").style.top = XXX+"px";
document.getElementById("a1").style.left = XXX+"px";

I hope this helps.

edited May 24 '12 at 13:36

answered May 24 '12 at 13:25

Akshat Goel

538
4
18

I don't know all the details to the project, but implementing something like this in Javascript would likely be an excellent idea. One critique though: you should add `+ "px"` to the end of your value. – Jeffrey Sweeney May 24 '12 at 13:34
@JeffreySweeney thanks for the edit! I will update the answer now. – Akshat Goel May 24 '12 at 13:35
@RichXantos You can create dynamic css files. Simply use style.php as the href in link tag. In style.php, echo your style rules. Now, you can update that css dynamically using ajax to avoid page reloads. Sorry, but question is still not getting clear. This is the best I could get. – Akshat Goel May 26 '12 at 16:35
@AkshatGoel thank you. Sorry, but I'm a bit out of my comfort zone, how do you update css dynamically using ajax. – Rich Xantos May 31 '12 at 07:13

score 0 · Answer 2 · edited May 23 '17 at 11:56

If the id or class is unique in each CSS file, you could just load all of the CSS up front, and change an identifier every 30 seconds. CSS files are rarely too large.

Dynamically loading CSS is possible, but I really wouldn't advise it; it goes against web standards, and welcomes potential security problems. One way to do this is to inject the content into a style tag, as this answer states:

Loading page content and its CSS dynamically - how to prevent jump because CSS is not loaded yet?

One last note, you probably should make a practice of using strings for the setTimeout function. Use an anonymous function, or if the function is global (and in your case it is), a reference to the function. setTimeout(refreshMap1, 30000); could replace setTimeout('refreshMap1()',30000); for example.

Force timed update of CSS file

2 Answers2