jQuery: How to make `real-time pager` depending on browser screen size without `content` refreshing?

jQuery: How to make real-time pager depending on browser screen size without content refreshing?

Example for it you can see in http://www.nytimes.com/chrome/

HTML and CSS 开发者_开发知识库in http://jsfiddle.net/laukstein/qjGrV/

#content{
    display:block;
    width:100%;
    height:40%;
    min-height:205px;
    max-height:408px;
    overflow:hidden;
}
li{
    width:100px;
    height:100px;
    margin:1px;
    float:left;
    background:#ccc;
}
...
<ul id="content">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
<div id="pager"><!--here lets show 1,2,3,4 etc. depending on screen size--></div>

---

Now that I understand your question, let me give 2cents.

The nty chrome page is built with tables. Their custom jquery app called "solo" detects the size of the window, and refreshes the number of <tr> and <td>'s based on the size of a window.

For example, if the window width is small, the table is recreated using jQuery so that only 's are displayed. If the window height is tall enough to display two rows, the table is reformatted and filled out with the extra stories (i assume with aJax although it would cost little to have the content on the page and show and hide the stories as needed).