Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You do not state why you are doing this on page refresh.</p> <p>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).</p> <p>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).</p> <p>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)</p> <ul> <li><a href="http://www.quirksmode.org/js/cookies.html" rel="nofollow">Reading/Writing cookies in javascript</a></li> <li><a href="http://api.jquery.com/nth-child-selector/" rel="nofollow">jquery nth-child selector</a></li> </ul> <p>So in pseudo code:</p> <ul> <li>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)</li> <li>Using 'hide()' hide all divs</li> <li>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</li> </ul> <p><strong>Edit</strong> If you want a javascript only solution assuming your html is:</p> <pre><code>&lt;div id="div1"&gt; div 1 &lt;/div&gt; &lt;div id="div2"&gt; div 2 &lt;/div&gt; &lt;div id="div3"&gt; div 3 &lt;/div&gt; </code></pre> <p>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:</p> <pre><code>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 &lt; 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 }); </code></pre> <p>This is a javascript and cookies only solution</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload