[javascript] Update Div Background Image

[Steve21]

Hey all,

 

I was wondering if there's a simple way to update a div background without needing a page reload. I know javascript/ajax can do it for a normal image, but not seen a way to do it with divs as such.

 

 

Looking for the div to reload the image every X seconds if possible?

 

Sure I'm missing something obvious here though

 

Thanks,

Steve

[CESIL]

you should have a look at the setTimeout function...and maybe use jQuery as this makes the whole thing much simpler.

    

<br />
      $('document').ready(function(){<br />
        setTimeout("imgSwap()",500);<br />
      });  <br />
      function imgSwap(){<br />
        $('#test_div').css('background-image','url(desktop2.jpg)');<br />
      }<br />

Edited March 5, 2012 by CESIL

[Steve21]

you should have a look at the setTimeout function...and maybe use jQuery as this makes the whole thing much simpler.

    

<br />
      $('document').ready(function(){<br />
        setTimeout("imgSwap()",500);<br />
      });  <br />
      function imgSwap(){<br />
        $('#test_div').css('background-image','url(desktop2.jpg)');<br />
      }<br />

 

Thanks, I'm assuming to make it an infinite loop you'd just add the whole thing to a function, then recall the function at the end?

 

Thanks,

Steve

[mac_shinobi]

So that is Meta Refresh straight out the window then ?

 

Meta Refresh Tag - What is the Meta Refresh Tag

 

[left][color=#333333][font=Droid Sans Mono]

[/font][/color][/left]

[CESIL]

The main function will run after the page is loaded and then the timeout will fire every x milliseconds until cancelled. I have corrected a couple of typos...

      $('document').ready(function(){        t = setTimeout("imgSwap()",500);      });        function imgSwap(){        $('#test_div').css('background-image','url(desktop2.jpg)');      });

@mac_shinobi the OP stated that he didn't want a page reload

[mac_shinobi]

The main function will run after the page is loaded and then the timeout will fire every x milliseconds until cancelled. I have corrected a couple of typos...

      $('document').ready(function(){        t = setTimeout("imgSwap()",500);      });        function imgSwap(){        $('#test_div').css('background-image','url(desktop2.jpg)');      });

@mac_shinobi the OP stated that he didn't want a page reload

 

What does the JQuery stuff do and how do you install or use that ?

[Steve21]

The main function will run after the page is loaded and then the timeout will fire every x milliseconds until cancelled. I have corrected a couple of typos...

 

Ah lovely Will give it a shot tonight. Thanks!

 

What does the JQuery stuff do and how do you install or use that ?

 

It's basically a javascript library that has lots of prewritten functions, just makes life easier

 

Steve

[mac_shinobi]

Ah lovely Will give it a shot tonight. Thanks!

 

 

 

It's basically a javascript library that has lots of prewritten functions, just makes life easier

 

Steve

 

which functions in the example @CESIL posted were from JQuery ?

[Steve21]

which functions in the example @CESIL posted were from JQuery ?

 

.ready() – jQuery API

 

etc

 

Steve

[CESIL]

Sorry, I should have said that you need to either download jQuery or link an online source of jQuery.

 

mine is in a js directory...

 

I have realised I posted a broken version

 

Here is a working version

    
       
       
       
       <br />
            $('document').ready(function(){<br />
                setTimeout("imgSwap()",2000);<br />
            });  <br />
            function imgSwap(){<br />
                alert("swapped");<br />
                $('#test_div').css('background-image','url(desktop2.jpg)');<br />
                setTimeout("imgSwap()",2000);<br />
            }<br />
        
   
   

 

The alert is just there to prove the timer is working.

[jann]

If you wish to do this without the bloat of jquery, you can do something along the lines of > https://tinker.io/6c478

[Steve21]

If you wish to do this without the bloat of jquery, you can do something along the lines of > https://tinker.io/6c478

 

That needs pre-loaded images though, this is an image that's updating so can't preload it I'm afraid.

 

Thanks,

Steve

[jann]

So you've got an image that gets overwritten each X seconds and you want to force a browser to update that element each X seconds without a page refresh?

 

Have you pieced together a satisfactory solution from the replies so far, or still looking?

 

Cheers,

Jann

[Steve21]

So you've got an image that gets overwritten each X seconds and you want to force a browser to update that element each X seconds without a page refresh?

 

Have you pieced together a satisfactory solution from the replies so far, or still looking?

 

Cheers,

Jann

 

Aye that's the ticket, the jquery bit is working fine currently, only issue I'm still working on is being named the same they're adding into cache, and even using a HTTP no cache header doesn't seem to fix it.

 

Thanks,

Steve

[CESIL]

Aye that's the ticket, the jquery bit is working fine currently, only issue I'm still working on is being named the same they're adding into cache, and even using a HTTP no cache header doesn't seem to fix it.

 

Thanks,

Steve

Try adding the current time using Javascript Date object method .getTime() to the end of the url ie

var d = new Date();
$fName = 'url("desktop.jpg?'+d.getTime()+'")';

[Steve21]

Try adding the current time using Javascript Date object method .getTime() to the end of the url ie

var d = new Date();
$fName = 'url("desktop.jpg?'+d.getTime()+'")';

 

Will do, Thanks!

 

Steve

[Arthur]

@Steve21. FileWatcher and/or bgStretcher might be worth a look?

[TheUberOverLord]

This does what you want using one line of HTML and includes error recovery and there is a working demo shown here:

 

 

Foscam Forum • View topic - A How To Embed Any Foscam IP Camera In Webpage Using 1 Line

 

 

Don