Where can I find a javascript or php template for a 1-10, 11-20 list?

I need a list but don't want to place 1 through 10 posts on one page, then make another html or php page to place the next 10 posts on the list and have to edit every single page when I update the top of the list.

I want just one scrollable list that moves each item down through each page whenever I place a ne post on the first page.

Something like this, but updatable so when I place a post on the number 1 spot, all the posts move down accordingly without me having to put number 10 in the number eleven spot on the second page and so on.

Here's an example: http://www.imdb.com/list/0HgmXB5AXrE/

If it gets to be 100 pages it's too long to do that, so an updatable sliding list of some sort would be awesome.

Where can I find a tutorial to do this?

1 Answer

Relevance
  • Anonymous
    9 years ago
    Favorite Answer

    just copy this to your page and it will do the trick for you.

    <style>

    html {

    height:100%;

    }

    body {

    background-color:#fff;

    font-family:Helvetica, Arial, Tahoma, sans-serif;

    font-color:#C6C;

    font-size:12px;

    width:100%;

    height:100%;

    margin:0;

    padding:0;

    }

    a {

    color:#27c;

    }

    a:hover {

    color:#c00;

    text-decoration:underline;

    }

    .pagination {

    padding:2px;

    }

    .pagination ul {

    font-size:10px;

    text-align:center;

    margin:0;

    padding:0;

    }

    .pagination li {

    display:inline;

    list-style-type:none;

    padding-bottom:1px;

    }

    .pagination a,.pagination a:visited {

    border:1px solid #9aafe5;

    color:#668aae;

    text-decoration:none;

    padding:0 5px;

    }

    .pagination a:hover,.pagination a:active {

    background-color:#c6ddf3;

    border:1px solid #2b66a5;

    color:#000;

    font-weight:700;

    }

    .pagination li.currentpage {

    background-color:#7ACD1B;

    border:1px solid #2b66a5;

    color:#fff;

    font-size:10px;

    font-weight:700;

    padding:0 5px;

    }

    .pagination li.disabled {

    border:1px solid #929292;

    color:#929292;

    font-size:10px;

    padding:0 5px;

    }

    .pagination li.nextpage {

    font-weight:700;

    }

    * html .pagination li.currentpage,* html .pagination li.disabled {

    margin-right:5px;

    padding-right:0;

    }

    h4 {

    display:inline;

    font-size:10px;

    }

    legend {

    background:#f8fafb;

    border:1px dashed #c6ddf3;

    color:#6c6c6c;

    font-weight:700;

    padding:4px 6px;

    }

    fieldset {

    border:1px solid #c6ddf3;

    color:#6c6c6c;

    font-size:11px;

    margin-top:5px;

    width:98%;

    padding:.5em;

    }

    a:active,#rmenu a:active {

    outline:none;

    }

    a:focus,#rmenu a:focus {

    moz-outline-style:none;

    }

    </style>

    <fieldset>

    <div class="pagination"><ul><h4>Result Page:</h4>  <li class="disabled">«</li>

    <li class="currentpage"><b>1</b></li>

    <li><a href="/page=2">2</a></li>

    <li><a href="/page=3">3</a></li>

    <li><a href="/page=4">4</a></li>

    <li><a href="/page=5">5</a></li>

    <li><a href="/page=6">6</a></li>

    <li class="Nextpage"><a href="/page=2">»</a></li>

    </ul></div>

    </fieldset>

Still have questions? Get your answers by asking now.