Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's the solution I've currently settled on - I'm not sure if it's the best way to do this, so any alternative ideas very welcome :)</p> <p>I used a second image and added the new one underneath the old using z-index and then faded out the old one before removing it from the DOM.</p> <p>This requires the image to have absolute position inside the containing DIV such that the new one goes directly behind, rather than alongside. </p> <pre><code>&lt;script&gt; // set interval var tid = setInterval(mycode, 20000); function mycode() { var theDate = new Date(); var mili = theDate.getUTCDate() + theDate.toLocaleTimeString() + theDate.getMilliseconds(); var img = $('&lt;img /&gt;') .attr('src', '@Url.Action("Chart", "Home", new {ForceNoCache = "theDate"})') .attr('id', 'GraphImageNew') .attr('style', 'z-index:: 4;') .load(function () { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken image!'); } else { $('#GraphContainer').append(img); $('#GraphImage').attr('id', 'GraphImageOld'); $('#GraphImageOld').fadeOut(1000, function () { $('#GraphImageOld').remove(); $('#GraphImage').attr('style', 'z-index: 5;'); }); $('#GraphImageNew').attr('id', 'GraphImage'); } }); img.attr('src', img.attr('src').replace("theDate", mili)); } function abortTimer() { // to be called when you want to stop the timer clearInterval(tid); } &lt;/script&gt; </code></pre> <p>This seems to work fine in IE and Firefox - but I've not tested in other browsers.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload