CODEWITHSUNDEEP
jquerypaginationshow-hideslide
vaanipala
vaanipala

Reputation: 1291

jquery slide right button that hides the current page div content and shows the next page div content

I have 10 pages of contents with the pagination object on each page done using php. This allows the user to view contents of any page he/she wishes to see by clicking the page number.

Now I want to add a next and previous button that will allow the user to view the next or previous page.

With codef0rmer's guidance, i've changed to the following jquery code for the next button. When i click on next button the subsequent page's content is getting displayed in the div contentcolumn. However, now there are 2 next buttons, 2 previous buttons and 2 pagination objects.

How can I get only the contents to display without the extra next, previous buttons and pagination object?

I'm a beginner in jquery.....I really appreciate any help.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
     var pg=1;
    //$("#contentcolumn:first").show("slide",{'direction':"left"},1000);
    $('#next').click(function () {
         if(pg<=10){
            pg=pg+1;
            page_str="page="+pg;
            $.get('index2.php',page_str , function(data) {
              $('#contentcolumn').html(data).show("slide",{'direction':"left"},1000);
             });
          };    
   })//end $('#next').click
})//end document(ready)
</script>

My html and php code:

<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="leftcolumn">
<div class="innertube">
<input type="button" id="left_but" value="Left"  />
</div>
</div>
<div id="contentcolumn">
<div class="innertube">
<?php
$pagination='';
if (function_exists("curl_init")){
    $ch=curl_init();
    curl_setopt($ch,CURLOPT_URL,"http://feeds.feedburner.com/rb286");
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
    $data=curl_exec($ch);
    curl_close($ch);
    //print_r($data);
    $doc=new SimpleXmlElement($data);
    //$doc=simpleXml_load_file("http://feeds.feedburner.com/rb286?format=xml");
    //$doc=simpleXml_load_string($data); 
    $xml = simplexml_import_dom($doc);    
    if (!$xml) { 
    echo 'Error while parsing the document'; 
    exit; 
     } 

    //print_r($doc);
}

function paginateFunc($xml){
global $pagination;
$disp_arr = array();
$image_array=array();
// How many adjacent pages should be shown on each side?
    $adjacents =3;

    $items=$xml->xPath('/rss/channel/item');
    $count=count($items);
    $total_pages = $count;

    /* Setup vars for query. */
    $targetpage = "index2.php";     //your file name  (the name of this file)
    $limit = 1;                                 //how many items to show per page
    $page = $_GET['page'];
    if($page) 
        $start = ($page - 1) * $limit;          //first item to display on this page
    else
        $start = 0;                             //if no page var is given, set start to 0


    /* Setup page vars for display. */
    if ($page == 0) $page = 1;                  //if no page var is given, default to 1.
    $prev = $page - 1;                          //previous page is page - 1
    $next = $page + 1;                          //next page is page + 1
    $lastpage = ceil($total_pages/$limit);      //lastpage is = total pages / items per page, rounded up.
    $lpm1 = $lastpage - 1;                      //last page minus 1



    //echo("HALLO");
    foreach ($xml->xpath('//item/content:encoded') as $desc) { 
        preg_match_all('/(?<imgs><img[^>]+>)/m', $desc, $m); 
             } 
    foreach($items as $key => $item){ 
                //if( ( $key >= $start) && ($key < $start + $limit) ){ 
                    $disp_array[$key]['link']=$item[0]->link;
                    $disp_array[$key]['title']=$item[0]->title;
                    $disp_array[$key]['desc']=$item[0]->description;

    }//end foreach($items 


    foreach($disp_array as $key=>$disp){
            if($key == $start){
                 echo("<a href='".$disp_array[$key]['link']."'>".$disp_array[$key]['title']."</a><br>");
                 echo($disp_array[$key]['desc']."<br>");
                 //echo(count($m['imgs']));
                 //echo("<img src='".$m['imgs'][$key]."'/>");
              }

    } 
    echo("</div>");//end div innertube
    echo("</div>");//end div contentcolumn
    echo("<div id='rightcolumn'>");
    echo("<div class='innertube'>");
    echo("<input type='button' id='right_but' value='Right' />");
    echo("</div>");//end div innertube
    echo("</div>");
    echo("<div id='footer'>");
    /* 
        Now we apply our rules and draw the pagination object. 
        We're actually saving the code to a variable in case we want to draw it more than once.
    */
    //$pagination = "";
    if($lastpage > 1)
    {   
        $pagination .= "<div class=\"pagination\">";
        //previous button
        if ($page > 1) 
            $pagination.= "<a href=\"$targetpage?page=$prev\">� previous</a>";
        else
            $pagination.= "<span class=\"disabled\">� previous</span>"; 

        //pages 
        if ($lastpage < 7 + ($adjacents * 2))   //not enough pages to bother breaking it up
        {   
            for ($counter = 1; $counter <= $lastpage; $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<span class=\"current\">$counter</span>";
                else
                    $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";                 
            }
        }
        elseif($lastpage > 5 + ($adjacents * 2))    //enough pages to hide some
        {
            //close to beginning; only hide later pages
            if($page < 1 + ($adjacents * 2))        
            {
                for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
                {
                    if ($counter == $page)
                        $pagination.= "<span class=\"current\">$counter</span>";
                    else
                        $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";                 
                }
                $pagination.= "...";
                $pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
                $pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";       
            }
            //in middle; hide some front and some back
            elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
            {
                $pagination.= "<a href=\"$targetpage?page=1\">1</a>";
                $pagination.= "<a href=\"$targetpage?page=2\">2</a>";
                $pagination.= "...";
                for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
                {
                    if ($counter == $page)
                        $pagination.= "<span class=\"current\">$counter</span>";
                    else
                        $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";                 
                }
                $pagination.= "...";
                $pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
                $pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";       
            }
            //close to end; only hide early pages
            else
            {
                $pagination.= "<a href=\"$targetpage?page=1\">1</a>";
                $pagination.= "<a href=\"$targetpage?page=2\">2</a>";
                $pagination.= "...";
                for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
                {
                    if ($counter == $page)
                        $pagination.= "<span class=\"current\">$counter</span>";
                    else
                        $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";                 
                }
            }
        }

        //next button
        if ($page < $counter - 1) 
            $pagination.= "<a href=\"$targetpage?page=$next\">next �</a>";
        else
            $pagination.= "<span class=\"disabled\">next �</span>";
        $pagination.= "</div>\n";       
    }

    }


    if (isset($doc->channel)) paginateFunc($doc);
    ?>
    <?php 
    echo($pagination);
    ?>
    </div><!--closing tag for div footer-->
    </div><!--closing tag for div contentwrapper-->
    </div><!--closing tag for div maincontainer-->
    </body>
    </html>

Upvotes: 0

Views: 3067

Answers (2)

vaanipala
vaanipala

Reputation: 1291

After days of research, I found this cool tutorial on jquery sliders for beginners at http://jc-designs.net/blog/2010/03/jquery-slider-tutorial-for-beginners-how-i-did-mine/....the explanation is for dummies like me.

With the guidance from the above website, i managed to come up with the following codes. I have downloaded rss feed into a file (using php), created next and previous buttons and controllist - for pagination (using jquery), 3 column layout -fixed, liquid, fixed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body{margin:0;
padding:0;
}
#leftcolumn{
float:left;
margin-right:-200px;
}
#slidecontent{
width:550px;
height:450px;
float:left;
margin:0 200px 0 200px;
border:solid thin #FF3333;
overflow:hidden;
}
#slidewrap{
width:5500px;
height:450px;
top:0;
left:0;
}
.slide{
float:left;
width:550px;
height:450px;
}
#rightcolumn{
float:left;
margin-left:-200px;
}
#controllist{
clear:both;
text-align:center;
padding:4px;
}
ul{
list-style-type:none;
}
ul li{
display:inline;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#controlleft").hide();
    var currentPosition=0;
    var slideWidth=550;
    var count=0;
    var html="";
    var rss_link="";
    var rss_title="";
    var rss_desc="";
    $.get("rss.xml",function(data){
        $(data).find("item").each(function(){
            count+=1;
            rss_title=$(this).find("title").text();
            rss_link=$(this).find("link").text();
            rss_desc=$(this).find("description").text();
            html+="<div class='slide'><a href='"+rss_link+"'>"+rss_title+"</a>"+rss_desc+"</div>";
          }); //end find data
         $("#slidewrap").append($(html));

         html="<ul>";
         for (i=1;i<=count;i++){
             if (i<10){
                 html+="<li><a href='#'>"+i+"</a></li> | ";
             }else{
                 html+="<li><a href='#'>"+i+"</a></li>";
             }
         }
         html+="</ul>";
         $("#controllist").append($(html));

     });//end get

     function controlMechanism(){
            if (currentPosition>=9){
                $("#controlright").hide();
            }else{
                $("#controlright").show();
            }

            if (currentPosition<=0){
                $("#controlleft").hide();
            }else{
                $("#controlleft").show();
            }
     }//end controlMechanism

       //code for next and previous buttons
     $(".controls").click(function(event){
        event.preventDefault();
        if ($(this).attr('id')=="controlright"){
            currentPosition+=1;
        }else{
            currentPosition-=1;
        };
        $("#slidewrap").animate({"marginLeft" : slideWidth*(-currentPosition)});

        controlMechanism();
     });//end controls click

      //this controls the pagination
     $("#controllist ul li").click(function(event){
        event.preventDefault();
        currentPosition=$(this).index();

        $("#slidewrap").animate({"marginLeft" : slideWidth*(-currentPosition)});

        controlMechanism();
     });// end controllist click


});
</script>
</head>

<body>
<?php
//downloading rss feed into a file
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,"http://feeds.feedburner.com/rb286");
$fp=fopen('rss.xml','w');
curl_setopt($ch,CURLOPT_FILE,$fp);

$data=curl_exec($ch);
curl_close($ch);
fclose($fp);
?>
<div id="leftcolumn">
<a href="#" class="controls" id="controlleft">&lt;</a>
</div>
<div id="slidecontent">
    <div id="slidewrap">
    </div>
</div>
<div id="rightcolumn">
<a href="#" class="controls" id="controlright">&gt;</a>
</div>
<div id="controllist">
</div>
</body>
</html>

Upvotes: 0

codef0rmer
codef0rmer

Reputation: 10530

As you have not shared much of the code, I'll give you an overview of how can it be done.

I think you should hide the current visible content window and find the next slide & show it. 

$('#next').click(function () {
    $("div:visible").hide()
        .next().show("slide",{'direction':"left"},1000);
});

$('#prev').click(function () {
    $("div:visible").hide()
        .prev().show("slide",{'direction':"right"},1000);
});

Demo: http://jsfiddle.net/codef0rmer/E7U82/

Upvotes: 1

Related Questions