Click here to Skip to main content
15,498,622 members
Articles / Web Development / HTML
Tip/Trick
Posted 12 Mar 2014

Stats

19.1K views
12 bookmarked

Client-side Paging without JavaScript

Rate me:
Please Sign up or sign in to vote.
4.60/5 (14 votes)
24 Mar 2014CPOL
Here is a small tip to perform a client-side paging without any scripting language

Introduction

This is a simple paging technique in HTML done with the help of HREF attribute and CSS tags. No scripting language is required to do this.

Using the Code

The paging functionality is accomplished with the help of DIV tags with unique IDs as shown in the below HTML code. There are four DIV tags which have the contents and title. These DIVs are inside a main DIV which has the style attribute overflow set to the value hidden.

There is a pager built with an un-ordered list (<ul>) which consists of anchors (<a>). The HREF tag of each anchor is referring to the unique IDs of the DIV tags. While clicking the page number, the corresponding DIV will appear at the top of the main DIV.

HTML
<!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> 
    <style type="text/css">
    body
    {
        color:#f0f0f0;
        background-color:#776;
        font-family:calibri;
        font-size:14px;
    }
    
    h3 
    {
        font-size:20px;        
    }

    ul
    {
        margin:10px 0 0 0;
        padding:0;
    }

    ul li
    {
        list-style:none;
        float:left;
    }

    ul li a
    {
        border:solid 1px #c0c0c0;
        border-width: 1px 0px 1px 1px;
        background-color:#f0f0f0;
        padding:8px;
        text-decoration:none;
        outline:none;
        color:#00f;
    }


    ul li a.last
    {
        border-right-width: 1px;
    }

    div 
    {
        overflow:auto;
        height:250px;
        padding:0 20px 20px 20px;    
        border:solid 0px #f00; 
        
    }

    div.main
    {  
        border:solid 5px #f0f0f0; 
        width:300px;
        overflow:hidden;
        padding:0;
    }
    </style>
</head>
<body> 

    <div class="main">

        <div id="S1">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor  
lorem ipsum dolor sit amet. Lorem ipsum dolor sit ametlorem ipsum dolor sit 
lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit. </p>
        </div>

        <div id="S2">
            <h3>Title 2</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet 
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor 
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor. </p>
        </div> 

        <div id="S3">
            <h3>Title 3</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum dolor
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet.</p>
        </div>

        <div id="S4">
            <h3>Title 4</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum 
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
ipsum dolor sit amet lorem ipsum dolor sit amet.</p>
        </div>

    </div>
 
    <!-- PAGER -->
    <ul>
        <li><a href="#S1">1</a></li>
        <li><a href="#S2">2</a></li>
        <li><a href="#S3">3</a></li>
        <li><a href="#S4" class="last">4</a></li>
    </ul>
    <!-- PAGER -->

</body>
</html>

Feedback

Please feel free to post your feedback. Thanks.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionNice & Light Pin
poiuytrewq1234987654325-Mar-14 5:26
Memberpoiuytrewq1234987654325-Mar-14 5:26 
GeneralMy vote of 5 Pin
Champion Chen18-Mar-14 16:50
MemberChampion Chen18-Mar-14 16:50 
Good job !
GeneralMy vote of 5 Pin
Nitij13-Mar-14 22:05
professionalNitij13-Mar-14 22:05 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun12-Mar-14 23:55
MemberHumayun Kabir Mamun12-Mar-14 23:55 
GeneralRe: My vote of 5 Pin
Anoop_Ravindran13-Mar-14 0:15
MemberAnoop_Ravindran13-Mar-14 0:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.