+ Post New Thread
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
Web Development Thread, Update Div Background Image in Coding and Web Development; Hey all, I was wondering if there's a simple way to update a div background without needing a page reload. ...
  1. #1

    Steve21's Avatar
    Join Date
    Feb 2011
    Location
    Swindon
    Posts
    2,705
    Thank Post
    335
    Thanked 517 Times in 485 Posts
    Rep Power
    180

    Update Div Background Image

    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.

    Code:
    <div id="test_div" onclick="testevent(event)" style = "background-image:url('Desktop.jpg');width:1920px;height:1080px;">
    Looking for the div to reload the image every X seconds if possible?

    Sure I'm missing something obvious here though

    Thanks,
    Steve

  2. #2

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,404
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    169
    you should have a look at the setTimeout function...and maybe use jQuery as this makes the whole thing much simpler.
    Code:
        
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script>
          $('document').ready(function(){
            setTimeout("imgSwap()",500);
          });  
          function imgSwap(){
            $('#test_div').css('background-image','url(desktop2.jpg)');
          }
    </script>
    Last edited by CESIL; 5th March 2012 at 05:19 AM.

  3. Thanks to CESIL from:

    Steve21 (5th March 2012)

  4. #3

    Steve21's Avatar
    Join Date
    Feb 2011
    Location
    Swindon
    Posts
    2,705
    Thank Post
    335
    Thanked 517 Times in 485 Posts
    Rep Power
    180
    Quote Originally Posted by CESIL View Post
    you should have a look at the setTimeout function...and maybe use jQuery as this makes the whole thing much simpler.
    Code:
        
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script>
          $('document').ready(function(){
            setTimeout("imgSwap()",500);
          });  
          function imgSwap(){
            $('#test_div').css('background-image','url(desktop2.jpg)');
          }
    </script>
    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

  5. #4

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,849
    Thank Post
    3,365
    Thanked 1,062 Times in 982 Posts
    Rep Power
    366
    So that is Meta Refresh straight out the window then ?

    Meta Refresh Tag - What is the Meta Refresh Tag

    Code:
    <meta http-equiv="refresh" content="600">

  6. #5

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,404
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    169
    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...
    Code:
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script><script>      $('document').ready(function(){        t = setTimeout("imgSwap()",500);      });        function imgSwap(){        $('#test_div').css('background-image','url(desktop2.jpg)');      });</script>
    @mac_shinobi the OP stated that he didn't want a page reload

  7. 2 Thanks to CESIL:

    mac_shinobi (5th March 2012), Steve21 (5th March 2012)

  8. #6

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,849
    Thank Post
    3,365
    Thanked 1,062 Times in 982 Posts
    Rep Power
    366
    Quote Originally Posted by CESIL View Post
    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...
    Code:
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script><script>      $('document').ready(function(){        t = setTimeout("imgSwap()",500);      });        function imgSwap(){        $('#test_div').css('background-image','url(desktop2.jpg)');      });</script>
    @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 ?

  9. #7

    Steve21's Avatar
    Join Date
    Feb 2011
    Location
    Swindon
    Posts
    2,705
    Thank Post
    335
    Thanked 517 Times in 485 Posts
    Rep Power
    180
    Quote Originally Posted by CESIL View Post
    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

  10. #8

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,849
    Thank Post
    3,365
    Thanked 1,062 Times in 982 Posts
    Rep Power
    366
    Quote Originally Posted by Steve21 View Post
    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 ?

  11. #9

    Steve21's Avatar
    Join Date
    Feb 2011
    Location
    Swindon
    Posts
    2,705
    Thank Post
    335
    Thanked 517 Times in 485 Posts
    Rep Power
    180
    Quote Originally Posted by mac_shinobi View Post
    which functions in the example @CESIL posted were from JQuery ?
    .ready() – jQuery API

    etc

    Steve

  12. Thanks to Steve21 from:

    mac_shinobi (5th March 2012)

  13. #10

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,404
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    169
    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
    Code:
    <html>    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title></title>
            <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
            <script>
                $('document').ready(function(){
                    setTimeout("imgSwap()",2000);
                });  
                function imgSwap(){
                    alert("swapped");
                    $('#test_div').css('background-image','url(desktop2.jpg)');
                    setTimeout("imgSwap()",2000);
                }
            </script>
        </head>
        <body></body>
    </html>
    The alert is just there to prove the timer is working.

  14. 2 Thanks to CESIL:

    mac_shinobi (5th March 2012), Steve21 (6th March 2012)

  15. #11

    Join Date
    Mar 2006
    Posts
    35
    Thank Post
    2
    Thanked 3 Times in 3 Posts
    Rep Power
    23
    If you wish to do this without the bloat of jquery, you can do something along the lines of > https://tinker.io/6c478

  16. Thanks to jann from:

    Steve21 (6th March 2012)

  17. #12

    Steve21's Avatar
    Join Date
    Feb 2011
    Location
    Swindon
    Posts
    2,705
    Thank Post
    335
    Thanked 517 Times in 485 Posts
    Rep Power
    180
    Quote Originally Posted by jann View Post
    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

  18. #13

    Join Date
    Mar 2006
    Posts
    35
    Thank Post
    2
    Thanked 3 Times in 3 Posts
    Rep Power
    23
    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

  19. #14

    Steve21's Avatar
    Join Date
    Feb 2011
    Location
    Swindon
    Posts
    2,705
    Thank Post
    335
    Thanked 517 Times in 485 Posts
    Rep Power
    180
    Quote Originally Posted by jann View Post
    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

  20. #15

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,404
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    169
    Quote Originally Posted by Steve21 View Post
    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
    Code:
    var d = new Date();
    $fName = 'url("desktop.jpg?'+d.getTime()+'")';

  21. Thanks to CESIL from:

    Steve21 (6th March 2012)

SHARE:
+ Post New Thread
Page 1 of 2 12 LastLast

Similar Threads

  1. Joomla - Creating a background image for all the pages
    By bodminman in forum Web Development
    Replies: 2
    Last Post: 27th May 2010, 11:41 PM
  2. Background Images In Home Directories
    By ahunter in forum Netware
    Replies: 3
    Last Post: 3rd May 2010, 07:23 AM
  3. Xibo - Background Image Hell
    By Hightower in forum AV and Multimedia Related
    Replies: 1
    Last Post: 6th November 2009, 11:37 AM
  4. Replies: 2
    Last Post: 5th September 2008, 08:37 AM
  5. Updating RIS image drivers
    By edie209 in forum Windows
    Replies: 2
    Last Post: 7th July 2006, 03:53 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •