JavaScript Background Image Change on page load on Impresspages

Question

I would like implement the javascript background image changer on page load on Impresspages 4.2.3 as described on http://www.9lessons.info/2011/03/background-image-change-on-refresh-with.html. It works on my localhost but not working when moved to my hosting server.

I put this code below on "_header.php" between the tag:

<script type="text/javascript"> 
var totalCount = 4;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://localhost/halmaheradivecruise.com/theme/air/assets/img/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>

and this code below in tag:

<script type="text/javascript"> 
ChangeIt();
</script>

Did you forget to change to this path: `document.body.background = 'http://localhost/halmaheradivecruise.com/theme/air/assets/img/'+num+'.jpg';` to the path of the images on your server? — DrewT, Oct 07 '14 at 04:58
the marks ` don't exist on the actual coding... I just misunderstood the instruction to include code on the post in stackoverflow ... — user3766934, Oct 07 '14 at 05:33

score 1 · Accepted Answer · answered Oct 07 '14 at 06:06

Before hacking the code, check whether the image you're trying to load actually exists.

Taking your code you get something like this:

http://www.halmaheradivecruise.com/theme/air/assets/img/2.jpg

If you follow this link, you'll get "404 not found" error. So the problem is with link and not script.

The real problem lies in case sensitivity by Unix based systems. ImpressPages doesn't have folder "theme". All themes are placed in "Theme". And themes most of the time are named in capital letter, too. Therefore, your images are here:

http://www.halmaheradivecruise.com/Theme/BantikAir/assets/img/3.jpg

On a localhost it worked because Windows don't see any difference between lowercase and uppercase letters. While Unix systems treat them as different paths.

In addition to that. On ImpressPages you can use ip.baseUrl to get the URL of the website. Then you code would look like this: document.body.background = ip.baseUrl + 'theme/air/assets/img/'+num+'.jpg'; and will work on any domain. Localhost and production server. — Mangirdas Skripka, Oct 07 '14 at 11:20
Thanks Audrius ... it's now working :D It was just 'case sensitivity' problem ... — user3766934, Oct 14 '14 at 04:15

score 0 · Answer 2 · edited May 23 '17 at 10:28

Other than the localhost path, there's nothing visibly incorrect with your code

Use the developer tools inspector to make sure (usualy cmd + alt + i on mac or f12 on windows) and select the networks tab to make sure the image is not getting a 404.
also in developer tools use the javascript console to ensure there are no javascript errors
If you are still having trouble, try making sure your call to ChangeIt() is made after all the scripts have loaded by manually typing it into the javascript console of your browser's develop tools

Also, instead of:

var num = Math.ceil( Math.random() * totalCount );

Try

var num = Math.floor(Math.random() * totalCount) + 1

More info on why that's a better method (uniform distribution etc.) here: Generate random number between two numbers in JavaScript

JavaScript Background Image Change on page load on Impresspages

2 Answers2