I wrote this jquery to basically dynamically build a paging control
for long articles, etc....
I have it dynamically generating a UL, a page selector and a drop
down
selector and I just need to write a piece that will do a <-Prev and
Next -> and my brain is having trouble with it. Here is the code in
simplified form. I also don't have the coding for the contect
highlighting done yet to show what page we are on.

HTML:
<div id="headerUL"><!--UL goes here--></div>
<div id="page1" class="page" title="Section 1">This is Page 1</div>
<div id="page2" class="page" title="Section 2">This is Page 2</div>
<div id="page3" class="page" title="Section 3">This is Page 3</div>
<div id="page4" class="page" title="Section 4">This is Page 4</div>
<div id="prev"><!--This will be the Prev Link--></div>
<div id="PageNum"><!-- Page Numbers 1, 2, 3, 4--></div>
<div id="next"><!--This will be the Next Link--></div>
<div id="DropDown"><!--Drop down box--></div>
Here is the Jquery I have that generates it. I just need some help
getting Prev and Next done.
 <script>
  $(document).ready(function(){
//Prestate
$(".page:not(:first)").hide();
$(".page:first").show();
//Let's get the # of pages.
var numPages = $(".page").length;
var pageNums= "";
var prev = "", next="";
var i = 1;
var lister = "<UL id=pageUL>";
var selector = "<select id=pageSelect>";
$(".page").each(function(i) {
pageNums+= "<a href=# id="+this.id+" class=pageids>"+(i+1)+",</
a>&nbsp;"
lister+="<LI><a href=#  class=pageLI>"+$("#"+this.id).attr('title')
+"</
a></LI>"
selector+="<option class=pageSE value="+$("#"+this.id).attr('title')
+">"+$("#"+this.id).attr('title')+"</option>"
});

lister+="</UL>";
selector+="</select>";
//Add the Click events
$(".pageids").live("click", function(){
                $("#"+this.id).show();
                $(".page:not(#"+this.id+")").hide();
});

        $(".pageLI").live("click",function(){
                        var ht = $(this).html()
                        $(".page").hide();
                        $("DIV[title='"+ht+"']").show();
        });
        $(".pageSE").live('click',function(){
                        var ht = $(this).text();
                        $(".page").hide();
                        $("DIV[title='"+ht+"']").show();
        });
//Set the values
$("#PageNum").html(pageNums);
$("#headerUL").html(lister);
$("#DropDown").html(selector);
});

  </script>
Thanks in advance.

Reply via email to