jQuery: Wie man `Echtzeit-Pager` abhängig von der Browser-Bildschirmgröße macht, ohne dass` content` aktualisiert wird?

Question

jQuery: Wie macht man real-time pager abhängig von Browser-Bildschirmgröße ohne content erfrischend?

Beispiel dafür kann man in http://www.nytimes.com/chrome/

HTML und 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> 

Answer 1

nun sehen, dass ich verstehe Ihre Frage, lassen Sie mich 2cents geben.

Die Seite nty chrome ist mit Tabellen aufgebaut. Ihre benutzerdefinierte jquery App namens "solo" erkennt die Größe des Fensters und aktualisiert die Anzahl der <tr> und <td> basierend auf der Größe eines Fensters.

Wenn beispielsweise die Fensterbreite klein ist, wird die Tabelle mit jQuery neu erstellt, sodass nur die Werte angezeigt werden. Wenn die Fensterhöhe groß genug ist, um zwei Zeilen anzuzeigen, wird die Tabelle neu formatiert und mit den zusätzlichen Storys ausgefüllt (ich nehme an, dass mit aJax der Inhalt auf der Seite wenig kostet und die Stories nach Bedarf ein- und ausgeblendet werden).