-1

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/ alt text

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>
Binyamin
  • 7,493
  • 10
  • 60
  • 82

1 Answers1

2

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).

superUntitled
  • 22,351
  • 30
  • 83
  • 110
  • I am not asking for usual pager, but for dynamical pager that depends of content length and browser screen size. Example: for big screen it will show no pager option, for medium screen 5 pages and for small screen 15 pages; without content refresh, just dynamical pager. – Binyamin Dec 22 '10 at 17:06
  • Thank you for the clarification, you need to include all this information in your question. I was offering an idea on how to create the scroller. Now what you need is: 1) a way to detect what type of browser (see http://api.jquery.com/jQuery.browser/ , or google "browser detection") and 2) a way to count the number of words in a post (there are many plugins for jQuery that do just that). – superUntitled Dec 22 '10 at 17:16
  • I'm not asking how to detect browser agent. Check http://www.nytimes.com/chrome/ to understand my question. – Binyamin Dec 22 '10 at 17:19
  • @superUntitled - why are downvotes lame. Even if you are trying to help, if your answer is wrong, it should be downvoted. Now, of course, his question was incredibly vague so he probably shouldn't have downvoted your answer since you did provide a valid answer to what could be determined from the question, but that doesn't mean that downvotes are lame or the wrong thing to do. – Charles Boyung Dec 22 '10 at 19:00
  • @charles. agreed. my answer should have been down voted, as it did not answer the question. In retrospect, I should have down voted the question, as it was not well formed. – superUntitled Dec 22 '10 at 19:33