cycle three divs on page refresh

Question

I have three divs and I want to show a different div on each page refresh. So first div1 than div2 and than div3 and back to div1 etc.

I have googled but all I can find is the exact opposite, which is refresh div after a period of time(eg 10 sec.) WITHOUT page refresh.

(I use Jquery by the way,but plain javascript is also good)

Answer 1

You do not state why you are doing this on page refresh.

If the expected refresh is user driven could this be done on the server side (you would need to maintain some kind of state of how many times the page has been loaded, potentially in a cookie).

If you are causing the refresh yourself (you have a button or a timed action that in JS you refresh the page) then in that same location you can swap the div (either via ajax or by hvaing loaded all three divs on the page anyway and using jquery to hide/show).

The cookie could store a number that relates to the div. The js or server side then finds the div (perhaps based on nth-child selection in js if they are siblings, if not by looking for a div with id '#div'+index)

• Reading/Writing cookies in javascript
• jquery nth-child selector

So in pseudo code:

• On Page load check if cookie exists, if so read its value and then set it by incrementing it in a cycle (i.e. if its hit 3 set it to 1)
• Using 'hide()' hide all divs
• Using 'show()' and the read in value (from the cookie before you changed it) select the div using nth-child or id selector and show it

Edit If you want a javascript only solution assuming your html is:

<div id="div1">
    div 1
</div>
<div id="div2">
    div 2
</div>
<div id="div3">
    div 3
</div>

You could add the following script, in the head. It's using the quirksmode cookie read/write methods. You may wish to replace these with the jquery cookie plugin (or whatever else). It also hides all divs in the 4th from bottom line, more likely you want to use a jquery selector that selects specifically your three:

function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        $(function () {
            var val = readCookie('div'); // Get last value
            createCookie('div', "", -1); // clear cookie
            $('div').hide(); // hide all divs
            val = (val == null || val == 3) ? 1 : (Number(val) + 1); // incremeent value
            $('#div' + val).show(); // show current div
            createCookie('div', val, 1); // set value for next time
        });

This is a javascript and cookies only solution

Answer 2

Edit Sorry misread the question, if you want them ordered, you'll need to do some persistence like cargowire suggests.

Otherwise, assuming you've got a method (loadDiv) being called on the page load.

function loadDiv()
{
    //Generate a random number between 1 and 3
    var divNumberToShow = Math.ceil(Math.random()*3);
    //If your divs are shown to start - hide them, otherwise unnecessary
    $("hideable-div").hide();
    $("#div" + divNumberToShow).show();
}

This assumes your hideable divs have a class of hideable-div and their ids are numbered.

Answer 3

mm.............. since i dont know what is your programinng lanuage and other stuff . this may not useful to you , but if you are using zend framework , this is the way to do it .

create a session variable in your controller's init method

functiion init() {

$defaultNamespace = new Zend_Session_Namespace('Default');
$defaultNamespace->divnumber = 1 ; 

}

then in your action you sholud pass it to the view

public function divchangeAction{

  $this->view->currentdiv = $defaultNamespace->divnumber ;

}

in your view .it is divchange.phtml

<script lanuage='javascript'>

//get the session variable 
    var divnumber = <?php echo $this->currentdiv ; ?>;

$(document).ready(funcction(){

//hide the divs
$('#divone').hide();
$('#divtwo').hide();
$('#divthree').hide();

//show one div
if(divnumber==1){
    $('#divone').show();
}
else if(divnumber==2) {
   $('#divtwo').show();
}
else {
   $('#divthree').show();
}

//increase the divnumber value

divnumber = divnumber + 1 ;

if(divnumber >3) {

divnumber = 1 ;

}

//pass new div number to the controller's changecache action  and update the session variable 

$.post("baseurl/changecache", {divnumber : divnumber},
   function(data) {

   });


});

in your changecacheAction

public function changecacheAction() {

//take the div number 

$divnumber = $_POST['divnumber'];

//update session variable 

$defaultNamespace->divnumber = $divnumber ;

}

this is the way to do it in zend framework , remember that you can't do it along in client side . because when page is refreshing , client side varibles restore , you sholud use a session or cookie . :)