Change background only on refresh with javascript

Question

Iam loading pages in dynamically with PHP like so:

<div id="content">
<div id="fadein">   


<?php
    /// load page content
    $pages_dir = 'content';

    if(!empty($_GET['p'])) {

        $pages = scandir($pages_dir, 0);
        //delete . and ..
        unset($pages[0], $pages[1]);

        $p = $_GET['p'];

        // only files that are in the array can be loaded
        if (in_array($p. '.php', $pages)) {
            include($pages_dir. '/'.$p. '.php');    

        } else {
            echo 'Helaas deze pagina bestaat niet';
        }
    } else {
        include($pages_dir. '/index.php');
    }

?>  


</div>
</div>

If you use the navigation at the top of my site the PHP loads the relevant content.

And i got this script at the bottom of my page to change the background image:

 function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:
preload([
    '../public/background/test2/1.jpg',
    '../public/background/test2/2.jpg',
    '../public/background/test2/3.jpg',
    '../public/background/test2/4.jpg',
    '../public/background/test2/5.jpg',
    '../public/background/test2/6.jpg'

]);

var totalCount = 6;
function changeBackground()
{
    var num = Math.ceil( Math.random() * totalCount );
    backgroundUrl = '../public/background/test2/'+num+'.jpg';

    $('body').css('background-image', 'url('  +backgroundUrl+  ')');
}

changeBackground();

But everytime different content is loaded, the script is executed... I don't want that. I only want to change the background when the user refreshes the page. Not when different content is loaded when the user is navigating through the site.

How are you changing the content, using ajax? If you're not, there is no difference between reloading the page and navigating between different links. — jeroen
– jeroen, Commented Dec 3, 2012 at 17:29
iam changing the content with PHP. I thought only the content in the div gets reloaded and the rest of the page stays the same? — user1386906
– user1386906, Commented Dec 3, 2012 at 17:34

jeroen · Accepted Answer · 2012-12-03 17:42:08Z

1

As it is now (based on your comment), you are reloading the whole page when you really want to load only new content.

To be able to get the effect that you want, you should use ajax (combining php and javascript) to refresh only a part of your page when you hit a navigation link.

What you could do is (using jQuery for an easy introduction to ajax...):

separate your php script from the html so that you can call it separately and include it in your initial html;
attach an event handler to your navigation links, cancelling the default action (undo the click) and use jQuery's load method to replace your content with the new content (call your php script with the correct parameters).

As the javascript is located in the main html file, it will only execute your background script on the initial page load or page refresh.

answered Dec 3, 2012 at 17:42

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moses · Accepted Answer · 2012-12-03 17:32:13Z

0

If you are trying to manage this through JavaScript alone, then you can create a Cookie with an array of page visits, then on page load you can refer to that array to determine whether a user has visited that page already.

answered Dec 3, 2012 at 17:32

Moses

9,2316 gold badges49 silver badges67 bronze badges

Collectives™ on Stack Overflow

Change background only on refresh with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related