0

I was inspired by this thread: Refresh image with a new one at the same url

I'm trying to refresh a WordPress header background image every 5 seconds.

The background image is set in styles.css: background-image: url(/some/path/rotator.php);

"Rotator.php" is PHP script that chooses a random image, and its working nicely. The path doesn't change.

I was hoping the following javascript would refresh it:

var newImage = new Image();
newImage.src = "/some/path/rotator.php";

function updateImage()
{
if(newImage.complete) {
    document.getElementById("header").src = newImage.src;
    newImage = new Image();
    number++;
    newImage.src = "/some/path/rotator.php?" + new Date().getTime();
}
setTimeout(updateImage, 5000);
}

The script is loaded by the following PHP in Functions.php:

<?php

add_action('after_setup_theme', 'load_mbr_scripts');

function load_mbr_scripts() {
    wp_register_script('updateImage', get_stylesheet_directory_uri().'/refreshheader.js', array('jquery'), '1.7', true );
    wp_enqueue_script( 'updateImage', get_stylesheet_directory_uri().'/refreshheader.js', array( 'jquery' ) );
}

add_action('wp_enqueue_scripts', 'load_mbr_scripts');

?>

Firebug shows my javascript being loaded. It doesn't seem to be refreshing anything, however.

Am I specifying the header element to refresh incorrectly? Or am I doing something else wrong?

I have fair knowledge of HTML and CSS, and a little PHP, but I am a total Javascript N00b, so any advice will be appreciated!

Community
  • 1
  • 1
Raw
  • 1
  • 1

1 Answers1

0

what element has the id header (in document.getElementById("header").src) is it an image? if it is the element than it obviously has not src attribute... it would work if you actually had an image there and not an element with an image background

Victor Radu
  • 2,262
  • 1
  • 12
  • 18
  • That makes sense... :-) Thanks tripleb. #header in the CSS is where the header background image is set in both the original theme and my modified child theme. Any idea how I _should_ be specifying that background image? – Raw Aug 22 '14 at 07:37
  • sry let's try again function updateImage() { if(newImage.complete) { $("#header").css("background-image", newImage.src); newImage = new Image(); number++; newImage.src = "/some/path/rotator.php?" + new Date().getTime(); } setTimeout(updateImage, 5000); } i just used jquery since wordpress has it – Victor Radu Aug 22 '14 at 07:44
  • Thanks, tripleb. That looks closer to what I should have, but my script is still not refreshing the header background... :-/ I've been reading w3school's articles on javascript, but I haven't found a way to specify the background image... – Raw Aug 22 '14 at 07:54
  • ok sry my bad wasn't paying attention it's $("#header").css("background-image",'url("'+newImage.src+'")') – Victor Radu Aug 22 '14 at 08:01
  • Thanks! Its looking complicated. Tried that. Still not refreshing :-( Tripleb, what is a good way to turn on extra debugging information? (if there is such a thing?) – Raw Aug 22 '14 at 08:13
  • use the console, can you post a link to the project, it'll be much easier – Victor Radu Aug 22 '14 at 09:25
  • Thanks for all your help, tripleb! In the end I cheated and used an animated GIF as a header background :-p This weekend I'll be hitting the books on Javascript and JQuery, its frustrating not to be able to use it effectively! Cheers! – Raw Aug 28 '14 at 06:52