Show Random DIV on every page load (For fancybox m

Question

I am showing a fancybox modal window when a visitor leaves the site. It is working correctly. But as a split test, I want to show visitors random content from 2 different divs on subsequent visits.

Meaning:

1) When visitor 1 comes and tries to leave site, he might see fancybox with content 1 or 2

2) When visitor 2 comes and tries to leave site, he might again see fancybox with content 1 or 2

And so on...

The actual code for the fancybox modal is:

<div id="inline" class="various2" style="display:none;">
      <div style="padding:20px;">
             This is the content of that shows inside the fancybox modal.
       </div>
</div>

Now for the inner div, i want to put another div with some different content, and one of them should randomly show on every page load, while the other is display:none...

I have tried this: How to show one div of many, per page refresh? But it doesn't work and shows both divs visible...

Can anyone help?

EDIT: The original question is answered. Now, how can I show alternate div on every page load. Not random. Something like visitors 1,2,3,4 see divs 1,2,3,4 respectively.

I know this would require some server side code, can anyone help with some basic php code?

Answer 1

I prefer timestamp over random for some reason

HTML

<div id-="fancy_box">
    <div id="inline" class="various1" style="display:none;">
        <div style="padding:20px;">
             This is the content of that shows inside the fancybox modal 1.
       </div>
    </div>
    <div id="inline" class="various2" style="display:none;">
        <div style="padding:20px;">
             This is the content of that shows inside the fancybox modal 2.
       </div>
    </div>
</div>

JQuery

$(function(){
    $(".various"+(new Date().getTime() % 2 +1)).css("display", "block");
});

Oh and the fiddle is here

Answer 2

Check this fiddle. I have removed the display: none on your div with id inline, in order to view the results

http://jsfiddle.net/bPK8y/

var value1 = 'my_first_div';
var value2 = 'my_second_div';
var chosenValue = Math.random() < 0.5 ? value1 : value2;
var chosenDiv = document.getElementById(chosenValue);
chosenDiv.style.display = "block";

HTML

<div id="inline" class="various2">
  <div style="padding:20px; display: none;" id="my_first_div">
      This is the content of that shows inside the fancybox modal. CONTENT 1
  </div>
  <div style="padding:20px; display: none;" id="my_second_div">
      This is the content of that shows inside the fancybox modal. CONTENT 2
  </div>
</div>