www.webdeveloper.com
Results 1 to 13 of 13

Thread: Optional Paging

  1. #1
    Join Date
    Apr 2012
    Posts
    7

    Optional Paging

    Dear JS Developers---I have designed a web survey. it has 30 questions (qs). I want to give users the option of [a] seeing one q at a time (and go forward or backward), or [b] seeing all qs at the same time and use standard browser scroll-up and scroll-down. users should be able to switch between [a] and [b] at any time. moreover, if I am on a small screen device (e.g., an iPhone), the default should be [a], and when I am on a large screen device (e.g., a 30" monitor where the browser has been maximized), the default should be [b].

    the "submit" button can and should remain at the bottom of the webpage. I obviously know where I want to break the qs.

    this is useful not only for surveys, but for reading, for example. wired.com uses something a little bit like it, where one can switch to a "View All" mode.

    can you please give me some pointers to a JS library or function where I would find support to do this easily? I presume that this cannot be done with .css alone.

    /iaw

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Lightbulb

    You should use a combination of JS and CSS to accomplish your goals.

    1. My suggestion would be to create a brief quiz (no more than 5 questions for testing to start)

    2. Put each question in a <div class="qs"> Survey Question </div> of the form.

    3. Use the CSS to create something like .qs { display:none; }

    4. Then depending on the button A or B display, either set all the elements of the 'qs' class
    to be shown or change the element to .style.display = 'block';

    If you don't understand any of the above, then consider the following as a starting place.
    Code:
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function displayInfo() {
      var sel = document.getElementsByTagName('div');
      if (document.getElementById('singleFull').checked) {
        for (var i=0; i<sel.length; i++) { sel[i].style.display = 'block'; }
      } else {
        for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
        showQuestion(0);
      }
    }
    var qno = 0;
    function showQuestion(qnoDirection) {
      var oqno = qno;
      var sel = document.getElementsByTagName('div');
      qno = qno + qnoDirection;
      if (qnoDirection < 0) {
        if (qno < 0) { qno = 0; } 
      } else {
        if (qno > sel.length-1) { qno = sel.length-1; } 
      }
      sel[oqno].style.display = 'none';
      sel[qno].style.display = 'block';
    }
    window.onload = function() {
      showQuestion(0);
    }
    </script>
    
    <style type="text/css">
    .qs { display:none; border:1px solid red; }
    </style>
    </head>
    <body>
    <h2>Survey</h2>
    <input type="button" onclick="showQuestion(-1)" value="&lt">
    <input type="button" onclick="showQuestion(+1)" value="&gt">
    <input type="checkbox" id="singleFull" onclick="displayInfo()"> Full display
    <button onclick="alert('Not coded yet')">Submit</button>
    <p>
    <div class="qs"> Survey question #1</div>
    <div class="qs"> Survey question #2</div>
    <div class="qs"> Survey question #3</div>
    <div class="qs"> Survey question #4</div>
    <div class="qs"> Survey question #5</div>
    
    </body>
    </html>
    Last edited by JMRKER; 04-15-2012 at 10:33 PM. Reason: Added example.

  3. #3
    Join Date
    Apr 2012
    Posts
    7
    thanks a lot...wanted to send you a private email to do so, but couldn't find the email.

  4. #4
    Join Date
    Apr 2012
    Posts
    7

    too soon

    It doesn't really work, though. I put an example at

    http://temp.ivo-welch.info/test-paging.html

    It does weird stuff on page-back. I am always worried about how robust JS solutions are...whether this is a code buglet or a browser buglet. this is why it is nice to use tested JS-frameworks. alas, this one seems so close...(and yet so far).

    /iaw

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Lightbulb

    You had numerous errors in your code, like:
    a. invalid id values
    b. non-paired <body> tags
    c. incorrect placement of <form> tags
    d. and some questionable questions in the subpage areas
    but the primary one was the use of the getElementsByTagName('div')
    when you had multiple levels of <div> tags.

    Easiest fix was to change to getElementsByClass to treat each section as a separate page.

    You should also check the error console if you are using FF or Chrome as it might show where the syntax errors are located. Would not find the logic error of the nested <div> tags, but that could have been avoided with a bit more specifications of the requirements.

    Code:
    <html>
    <head>
    <title>Showing Off</title>
    
    <style type="text/css">
    .subpage {
     display:none;
     border:1px solid red;
     height:25%;
     width:50%;
    }
    </style>
    
    <script type="text/javascript">
      function displayInfo() {
      var sel = getElementsByClass('subpage',null,'div');
      if (document.getElementById('singleFull').checked) {
        for (var i=0; i<sel.length; i++) { sel[i].style.display = 'block'; }
      } else {
        for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
        showQuestion(0);
      }
    }
    
    var qno = 0;
    function showQuestion(qnoDirection) {
      if (document.getElementById('singleFull').checked) { return; }
      var oqno = qno;
      var sel = getElementsByClass('subpage',null,'div');
      qno = qno + qnoDirection;
      if (qnoDirection < 0) {
        if (qno < 0) { qno = 0; } 
      } else {
        if (qno > sel.length-1) { qno = sel.length-1; } 
      }
      sel[oqno].style.display = 'none';
      sel[qno].style.display = 'block';
    }
    
    function getElementsByClass(searchClass,node,tag) {
      var classElements = new Array();
      if (node == null) node = document;
      if (tag == null) tag = '*';
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
      for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    }
    
    
    window.onload = function() {
      showQuestion(0);
    }
    
    function validate() {
      alert('Validation / Grading to be added.');
      return false;
    }
    </script>
    
    </head>
    <body>
    
    <h2 class="quizname"> Showing Off </h2>
    <input type="button" onclick="showQuestion(-1)" value="&lt">
    <input type="button" onclick="showQuestion(+1)" value="&gt">
    <input type="checkbox" id="singleFull" onclick="displayInfo()"> Full display
      
    <form method="post" action="" onsubmit="return validate()">
    
     <div class="subpage">
      <div class="description">
       Page 1<p>
       <ul>
        <li> How would I add the number of the current page in a field in the show?  
             (And, not as important, possibly allow a user to type a page directly?)
             This is useful esp after a user toggles "full screen" display.
        </li>
        <li> The forward works, but on backwards, the page content (often?) doesn't show.
             This is under OSX Chrome 18.0.1025.163 and Firefox 11.
        </li>
        <li> Why are there empty subpages between my subpages??? </li>
       </ul>
      </div>
     </div>
    
     <div class="subpage">
      <div class="qstn" id="q1">
       Page 2<p>
       <p class="qstn">  Give me an A? </p>
       <p class="inputanswer">
          Your Answer: <input class="studentanswerfield" type="text" size="8" name="q-stdnt-1" />
       </p>
      </div>
     </div>
    
     <div class="subpage">
      <div class="qmsg"> 
       Page 3<p>
       <span style="background-color: yellow"> Hello 
      </div>
     </div>
    
     <div class="subpage">
      <div class="qstn" id="q3">
       Page 4<p>
       <p class="qstn">  Give me a B? </p>
       <p class="inputanswer">
        Your Answer: <input class="studentanswerfield" type="text" size="8" name="q-stdnt-3" />
       </p>
      </div>
     </div>
     
    <!-- unknown object with invalid name   <input type="hidden" name="q-A-*" value="7B9m0" /> -->
    
     <div class="subpage">
      <div class="PS">
       Page 5<p>
       <hr />
       <h3>Postfix</h3>
      </div>
     </div>
    
     <div class="subpage">
      <input type="submit" name="submit" value="Submit and Grade my Answers" />
     </div>
    
     <hr />
     <p style="font-size:x-small">The bottom of the page</p>
    
    </form>
    </body>
    </html>
    Also, you will need to add your 'validation()' code to do whatever it is that you want to do.

    Can you explain further what it is that you want to do with a particular page display as stated in your first question page?

    How many pages do you expect to display maximum?
    If less than say, 10, you could use radio buttons to go to and display a particular page, but you could also put in an <input value="" ... > tag and use the error checked user entry to go to a particular page. What you want and what I might recommend might change with your explanation I asked about in the paragraph above.

  6. #6
    Join Date
    Apr 2012
    Posts
    7
    Thanks a lot. I owe you.

    [I just excerpted some html from a more involved html page, so my demo had all sorts of other problems. I had not understood the JS code. mea culpa.]

    It would be nice to see what page one is currently on. Such as "Page 3 of 10". Optional Radio Buttons would indeed be great (and better than entering a number), but there is no guarantee that the web pages for which I want to use this will always be less than 10.

    frankly, I find this so neat that I may want to convert a lot of my web pages to use a feature like this.

    I don't really understand JS well. (I program in R and perl, usually.) So, I really don't know whether this is easy and trivial stuff or terribly hard stuff.

    but in any case, I very much appreciate your help.

    regards,

    /iaw

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    Possible alternative solution...
    Code:
    <html>
    <head>
    <title>Showing Off</title>
    
    <style type="text/css">
    .subpage {
     display:none;
     border:1px solid red;
     height:50&#37;;
     width:50%;
     overflow:auto;
    }
    </style>
    
    <script type="text/javascript">
    
    function getElementsByClass(searchClass,node,tag) {
      var classElements = new Array();
      if (node == null) node = document;
      if (tag == null) tag = '*';
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
      for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    }
    
    function displayInfo() {
      var sel = getElementsByClass('subpage',null,'div');
      if (document.getElementById('singleFull').checked) {
        for (var i=0; i<sel.length; i++) {
          sel[i].style.display = 'block';
          sel[i].style.height="auto";
        }
      } else {
        for (var i=0; i<sel.length; i++) {
          sel[i].style.display = 'none';
          sel[i].style.height="50%";
        }
        showQuestion(0,0);
      }
    }
    
    var qno = 0;
    var oqno = 0;
    
    function showQuestion(qnoDirection,setPage) {
      if (document.getElementById('singleFull').checked) { return; }
      var sel = getElementsByClass('subpage',null,'div');
      qno = qno + qnoDirection;
      if (setPage != 0) { qno = setPage-1; }
      if (qnoDirection < 0) { if (qno < 0) { qno = 0; } }
                       else { if (qno > sel.length-1) { qno = sel.length-1; } }
      sel[oqno].style.display = 'none';
      sel[qno].style.display = 'block';
      oqno = qno;
      document.getElementById('pageDisplay').innerHTML
        = '<b>Page '+(qno+1)+' of '+sel.length+'</b>';
    }
    
    function gotoPageDisplay() {
      var sel = getElementsByClass('subpage',null,'div');
      var str = '';
      for (var i=0; i<sel.length; i++) {
        str += '<input type="radio" name="pgno"';
        str += ' onclick="qno='+i+';showQuestion(0,'+(i+1)+')">'+(i+1)+' ';
      }
      document.getElementById('gotoPage').innerHTML = str;
    }
    
    window.onload = function() {
      showQuestion(0,0);
      gotoPageDisplay();
    }
    
    function validate() {
      alert('Validation / Grading to be added.');
      return false;
    }
    </script>
    
    </head>
    <body>
    
    <h2 class="quizname"> Showing Off </h2>
    <input type="button" onclick="showQuestion(0,1)" value="|&lt;&lt;">
    <input type="button" onclick="showQuestion(-1,0)" value="&lt;">
    <input type="button" onclick="showQuestion(+1,0)" value="&gt;">
    <input type="button" onclick="showQuestion(0,100)" value="&gt;&gt;|">
    <br>Go to page: <span id="gotoPage"></span>
    <br>
    <span id="pageDisplay"></span>
    <input type="checkbox" id="singleFull" onclick="displayInfo()"> Full display
      
    <form method="post" action="" onsubmit="return validate()">
    
     <div class="subpage">
       <b>Page 1 of 6</b>
       <ul>
        <li> How would I add the number of the current page in a field in the show?  
             (And, not as important, possibly allow a user to type a page directly?)
             This is useful esp after a user toggles "full screen" display.
        </li>
        <li> The forward works, but on backwards, the page content (often?) doesn't show.
             This is under OSX Chrome 18.0.1025.163 and Firefox 11.
        </li>
        <li> Why are there empty subpages between my subpages??? </li>
       </ul>
     </div>
    
     <div class="subpage">
       <p class="qstn">  Give me an A? </p>
       <p class="inputanswer">
          Your Answer: <input type="text" size="8" />
       </p>
     </div>
    
     <div class="subpage">
       <b>Page 3 of 6</b>
       <span style="background-color: yellow"> Hello </span>
     </div>
    
     <div class="subpage">
       <p>  Give me a B? </p>
       <p class="inputanswer">
        Your Answer: <input type="text" size="8" />
       </p>
     </div>
     
    <!-- unknown object with invalid name   <input type="hidden" name="q-A-*" value="7B9m0" /> -->
    
     <div class="subpage">
       <b>Page 5 of 6</b>
       <h3>Postfix</h3>
     </div>
    
     <div class="subpage">
       <b>Page 6 of 6</b>
      <input type="submit" name="submit" value="Submit and Grade my Answers" />
     </div>
    
     <hr />
     <p style="font-size:x-small">The bottom of the page</p>
    
    </form>
    </body>
    </html>
    Remove parts that you don't like.

  8. #8
    Join Date
    Apr 2012
    Posts
    7

    contact?

    do you have a project to which I can contribute as a token of thanks? if so, please send me an email.

    regards,

    /iaw

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Thumbs up

    Quote Originally Posted by iaw4 View Post
    do you have a project to which I can contribute as a token of thanks? if so, please send me an email.

    regards,

    /iaw
    Send a contribution to your favorite charity for me.
    That will be thanks enough.

    Good Luck!

  10. #10
    Join Date
    Apr 2012
    Posts
    7
    Dear JMRKER:

    I have to apologize first, because it looks like I am getting greedy. your code worked great. alas, it would be even better if instead of radio buttons, it would be a pulldown menu (this one is easy), and the always correct current page (e.g., "Pg.2/3" display) was the selected pulldown menu.

    making it a pulldown menu is easy, but the problem is that the arrow keys can now go back and forth a page, and this should impact the pull down menu. In some sense, I want the page-forth and page-back icons to operate the pulldown menu.

    Is this easy or difficult?

    and one more---my pulldown menu works great with individual pages, but the "displayInfo()" [better named "displayAllPages()"] doesn't work.

    could I beg you for this extra advice, please?

    regards,

    /iaw


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
    function getElementsByClass(searchClass,node,tag) {
      var classElements = new Array();
      if (node == null) node = document;
      if (tag == null) tag = '*';
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
      for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    }
    
    function displayInfo() {
      var sel = getElementsByClass('subpage',null,'div');
      if (document.getElementById('singleFull').checked) {
        for (var i=0; i<sel.length; i++) {
          sel[i].style.display = 'block';
          sel[i].style.height="auto";
        }
      } else {
        for (var i=0; i<sel.length; i++) {
          sel[i].style.display = 'none';
          sel[i].style.height="50%";
        }
        showQuestion(0,0);
      }
    }
    
    var qno = 0;
    var oqno = 0;
    
    function showQuestion(qnoDirection,setPage) {
      if (document.getElementById('singleFull').checked) { return; }
      var sel = getElementsByClass('subpage',null,'div');
      qno = qno + qnoDirection;
      if (setPage != 0) { qno = setPage-1; }
      if (qnoDirection < 0) { if (qno < 0) { qno = 0; } }
                       else { if (qno > sel.length-1) { qno = sel.length-1; } }
      sel[oqno].style.display = 'none';
      sel[qno].style.display = 'block';
      oqno = qno;
      document.getElementById('pageDisplay').innerHTML
        = '<b>Pg.'+(qno+1)+'/'+sel.length+'</b>';
    }
    
    function gotoPageDisplay() {
      var sel = getElementsByClass('subpage',null,'div');
      var str = '';
      for (var i=0; i<sel.length; i++) {
        str += '<input type="radio" name="pgno"';
        str += ' onclick="qno='+i+';showQuestion(0,'+(i+1)+')">'+(i+1)+' ';
      }
      document.getElementById('gotoPage').innerHTML = str;
    }
    
    window.onload = function() {
      showQuestion(0,0);
      gotoPageDisplay();
    }
    
    function validate() {
      alert('Validation / Grading to be added.');
      return false;
    }
    </script>
    
    <style type="text/css">
    .subpage {  display:none;  border:1px solid red;  height:25%;  width:100%; }
    </style>
    
    
    <body>
    
    <p>Permanent Top</p>
        
    
    
    	<table class="navbar">
    	<tbody><tr>
    	    <td> This navigator is working: </td>
    	<td> <span id="pageDisplay"><b>Pg.1/3</b></span> </td>
    	<td> <input type="button" onclick="showQuestion(0,1)" value="|&lt;&lt;"> </td>
    	<td> <input type="button" onclick="showQuestion(-1,0)" value="&lt;"> </td>
    	<td> <span id="gotoPage"><input type="radio" name="pgno" onclick="qno=0;showQuestion(0,1)">1 <input type="radio" name="pgno" onclick="qno=1;showQuestion(0,2)">2 <input type="radio" name="pgno" onclick="qno=2;showQuestion(0,3)">3 </span> </td>
    	<td> <input type="button" onclick="showQuestion(+1,0)" value="&gt;"> </td>
    	<td> <input type="button" onclick="showQuestion(0,100)" value="&gt;&gt;|"> </td>
    	<td> <input type="checkbox" id="singleFull" onclick="displayInfo()"> View All </td>
    	</tr>
    	</tbody>
    	</table>
    
    	<hr />
    
    	<table class="navbar" style="background-color:gray;width:100%" border="1">
    	<caption> Defective Upper Menu: (a) Pulldown should always show current page(s); (b) The "ALL PAGES" no longer works </caption>
            <tbody><tr>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(0,1)" value="|&lt;&lt;"> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(-1,0)" value="&lt;"> </td>
    	<td style="text-align:center">
               <select>
               <option onclick="showQuestion(0,1)"> page 1 of 3 </option>
               <option onclick="showQuestion(0,2)"> page 2 of 3 </option>
               <option onclick="showQuestion(0,3)"> page 3 of 3 </option>
               <option onclick="displayInfo()"> ALL PAGES </option>
               </select> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(+1,0)" value="&gt;"> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(0,100)" value="&gt;&gt;|"> </td>
    	</tr>
    	</tbody></table>
    
    
      <div class="subpage" style="display: block; ">     <h2>SubPage 1</h2>  </div>
    
      <div class="subpage">     <h2>SubPage 2</h2>  </div>
         
      <div class="subpage">     <h2>SubPage 3</h2>  </div>
    
    
    	<table class="navbar" style="background-color:gray;width:100%" border="1">
    	<caption> Defective Lower Menu </caption>
            <tbody><tr>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(0,1)" value="|&lt;&lt;"> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(-1,0)" value="&lt;"> </td>
    	<td style="text-align:center">
               <select>
               <option onclick="showQuestion(0,1)"> page 1 of 3 </option>
               <option onclick="showQuestion(0,2)"> page 2 of 3 </option>
               <option onclick="showQuestion(0,3)"> page 3 of 3 </option>
               <option onclick="displayInfo()"> ALL PAGES </option>
               </select> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(+1,0)" value="&gt;"> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(0,100)" value="&gt;&gt;|"> </td>
    	</tr>
    	</tbody>
    	</table>
    
    <hr />
    
    <p>Permanent Bottom</p>
    
    </body>
    </html>

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    Couple of questions for clarification...

    1. Is the "Nav" menu in the Permanent top section to remain in the final product?
    Would be a lot simpler without it.

    2. What is the purpose of the duplicated navigation bars in the middle section?
    Would be a lot simpler without duplicated display bars.

    3. Will the number of pages be known ahead of time or will the number of pages be a dynamic display, changing with applications?

  12. #12
    Join Date
    Apr 2012
    Posts
    7
    the original nav menu at the top (with the radio buttons) will disappear. I left it just to show that the functionality worked. only the bar with the pulldown menu should remain.

    I can easily live with one navigation system at the top.

    I know the number of pages ahead of time, too. (generated by perl on the backend.)

    best,

    /iaw

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Lightbulb Alternative solution

    Consider this version ...
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
    function $_(IDS) { return document.getElementById(IDS); }
    
    function getElementsByClass(searchClass,node,tag) {
      var classElements = new Array();
      if (node == null) node = document;
      if (tag == null) tag = '*';
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
      for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    }
    
    function displayAllInfo() {
      var sel = getElementsByClass('subpage',null,'div');
      if ($_('singleFull').checked) {
        for (var i=0; i<sel.length; i++) {
          sel[i].style.display = 'block';
          sel[i].style.height="auto";
        }
      } else {
        for (var i=0; i<sel.length; i++) {
          sel[i].style.display = 'none';
          sel[i].style.height="50%";
        }
        showQuestion(0,0);
      }
    }
    var qno = 0;
    var oqno = 0;
    
    function showQuestion(qnoDirection,setPage) {
      var sel = getElementsByClass('subpage',null,'div');
      qno = qno + qnoDirection;
      if (setPage != 0) { qno = setPage-1; }
      if (qnoDirection < 0) { if (qno < 0) { qno = 0; } }
                       else { if (qno > sel.length-1) { qno = sel.length-1; } }
      sel[oqno].style.display = 'none';
      sel[qno].style.display = 'block';
      oqno = qno;
      $_('selectPage').selectedIndex = qno;
    }
    function displayPage(info) {
      $_('singleFull').checked = false;
      displayAllInfo();
      showQuestion(0,info);
    }
    window.onload = function() {
      showQuestion(0,0);
    }
    function validate() {
      alert('Validation / Grading to be added.');
      return false;
    }
    </script>
    
    <style type="text/css">
    .subpage {  display:none;  border:1px solid red;  height:25%;  width:100%; }
    </style>
    
    <body>
    <p>Permanent Top</p>
    <hr>
    
    <table class="navbar" style="background-color:gray;width:100%" border="1">
     <tbody>
      <tr>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(0,1)" value="|&lt;&lt;"> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(-1,0)" value="&lt;"> </td>
    	<td style="text-align:center">
          <select id='selectPage' onchange="displayPage(this.value)">
            <option value="1"> page 1 of 3 </option>
            <option value="2"> page 2 of 3 </option>
            <option value="3"> page 3 of 3 </option>
          </select>
          <input type="checkbox" id="singleFull" onclick="displayAllInfo()"> View All Pages
    	</td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(+1,0)" value="&gt;"> </td>
    	<td style="width:10px"> <input type="button" onclick="showQuestion(0,100)" value="&gt;&gt;|"> </td>
      </tr>
     </tbody>
    </table>
    
    <div class="subpage" style="display: block; ">     <h2>SubPage 1</h2>  </div>
    <div class="subpage">     <h2>SubPage 2</h2>  </div>
    <div class="subpage">     <h2>SubPage 3</h2>  </div>
    
    <hr />
    <p>Permanent Bottom</p>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles