javascript - Loading contents when scrolling -


i have below html table 

<table id="label" style="width: 100%;">  	<tr id="tr">  		<td class='td'>  			<div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>the internet connection has</strong></div>  			<iframe src="http://www.youtube.com/embed/w9dtujrptd0?wmode=opaque" frameborder="0" allowfullscreen  width="100%" height="100%" ></iframe>  		</td>  		<td class='td'>  			<div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>arsenal vs man city <br> 3-2 <br>	23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/adbdowu_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  	</tr>  	<tr id="tr">  		<td class='td'>    			<div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>communications' second year</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  		<td class='td'>  			<div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>hello world</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  	</tr>  	<tr id="tr">  		<td class='td'><div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>hello world</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  		<td class='td'><div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>hello world</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  	</tr>  	<tr id="tr">  		<td class='td'><div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>hello world</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  		<td class='td'><div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>hello world</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  	</tr>  	<tr id="tr">  		<td class='td'><div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>hello world</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  		<td class='td'><div  class="layout" style="position: absolute;  z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>hello world</strong></div>  			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/toace9btsca?wmode=opaque" frameborder="0" allowfullscreen></iframe>  		</td>  	</tr>  </table>

i don't want render rows @ once. need display 10 rows @ time , when user scrolls, vertical scroll bar again need add 10 more rows existing 10 rows , on.

basically have static html rows , need render few , add few more on scroll. how can that?

well, since it's static page think can display first 10 rows , hide others.. using js/jquery, need check whether scroll bar reaches bottom of page. using this:

$(window).scroll(function() {    if($(window).scrolltop() + $(window).height() == $(document).height()) {        alert("bottom!");        //shows next 10 rows here    } });

Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more