[javascript + dhtml] aiuto con l'uso di scrollTop e affini. [Archivio]

dierre

07-02-2007, 22:08

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<script type="text/javascript">

function setup(){

display=document.getElementById('display');
scrn=document.getElementById('scr');
ciao=document.getElementById('ciao');

}

function scroller(){

diff = (scrn.scrollTop + scrn.offsetHeight);
if((scrn.scrollHeight - diff) > 24){
scrn.scrollTop += 24;
setTimeout('scroller();', 10);
}else{
scrn.scrollTop = scrn.scrollHeight - scrn.offsetHeight;
}
}
function provami(){
display.innerHTML += ciao.innerHTML;
display.innerHTML += "<table><tbody><tr onclick=\"showpost('6')\"><td>6</td><td class=\"linky\">fdgdfgdfg</td><td>2006-11-25 21:23:34</td></tr><tr onclick=\"showpost('7')\"><td>7</td><td class=\"linky\">dfsdfsdfdsfdsfdsf</td>" +
+ "<td>2006-11-26 16:55:23</td></tr><tr onclick=\"showpost('8')\"><td>8</td><td class=\"linky\"/><td>2006-11-26 22:54:47</td></tr><tr onclick=\"showpost('9')\"><td>9</td><td class=\"linky\"/>"
+ "<td>2006-11-26 22:55:09</td></tr><tr onclick=\"showpost('10')\"><td>10</td><td class=\"linky\">dfsfsdfsd</td><td>2006-11-28 17:08:11</td></tr><tr onclick=\"showpost('11')\"><td>11</td><td class=\"linky\">ciao</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "<td>2006-11-28 17:20:00</td></tr><tr onclick=\"showpost('12')\"><td>12</td><td class=\"linky\">da blog</td><td>2006-11-28 20:40:20</td></tr><tr onclick=\"showpost('13')\"><td>13</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:41:06</td></tr><tr onclick=\"showpost('14')\"><td>14</td><td class=\"linky\">da blog</td><td>2006-11-28 20:42:49</td></tr><tr onclick=\"showpost('15')\"><td>15</td><td class=\"linky\">da blog</td>"
+ "<td>2006-11-28 20:44:01</td></tr><tr onclick=\"showpost('16')\"><td>16</td><td class=\"linky\">da blog 2</td><td>2006-11-28 20:44:57</td></tr><tr onclick=\"showpost('17')\"><td>17</td><td class=\"linky\">blog 3</td>"
+ "<td>2006-11-28 20:50:48</td></tr><tr onclick=\"showpost('18')\"><td>18</td><td class=\"linky\">erwerwer</td><td>2006-11-28 20:53:21</td></tr><tr onclick=\"showpost('19')\"><td>19</td><td class=\"linky\">dfgdfgdfg</td>"
+ "<td>2006-11-28 20:53:54</td></tr><tr onclick=\"showpost('20')\"><td>20</td><td class=\"linky\">dfgdfgdfg</td><td>2006-11-28 20:54:22</td></tr><tr onclick=\"showpost('21')\"><td>21</td><td class=\"linky\">blog 4</td>"
+ "</tbody></table>";
scroller();

}
</script>
<title>prova bash</title>
</head>
<body onLoad="setup();">
<div style="overflow: auto; height: 100%;" id="scr">
<div id="display"><h1>Progetto Programmazione Web</h1>
<noscript>
<p style="height:100%">Sorry, the CLI requires JavaScript to work. Please turn on JavaScript.</p>
</noscript>
<p>Welcome. Type 'help' for assistance.</p></div>
<div id="ciao"><span id="prompt">guest@progetto-programmazione-web:/$ <a href="#" onClick="provami();">cliccami</a></span></pre></div>
</div>
</body>
</html>

fondamentalmente scroller() serve a dare l'effetto bash all'output. Ma sinceramente non riesco a capire perché per un motivo molto semplice, lo scroller non viene eseguito una sola volta ma finché non finisce la roba da mostrare...sinceramente non riesco a capire come funziona.

andbin

07-02-2007, 22:50

fondamentalmente scroller() serve a dare l'effetto bash all'output. Ma sinceramente non riesco a capire perché per un motivo molto semplice, lo scroller non viene eseguito una sola volta ma finché non finisce la roba da mostrare...sinceramente non riesco a capire come funziona.Ogni volta che clicchi su 'cliccami' viene aggiunto un blocco di codice nel div #display. Quindi viene chiamata la funzione scroller() (che richiama se stessa in modo temporizzato fino alla fine dello scroll).
Lo scrolling viene fatto sul div #src che ha al suo interno tutto il contenuto generato/aggiunto.
Lo scrolling parte dal punto in cui si è, fino a quando scrn.scrollTop ha raggiunto il valore massimo possibile, cioè quanto tutta la pagina è al fondo.

dierre

07-02-2007, 22:59

il punto è che, almeno per come provo io...teoricamente la prima volta dovrebbe beccare sempre l'else quindi non dovrebbe richiamarsi. Però provo a fare una cosa prima, poi dico meglio.

dierre

07-02-2007, 23:12

http://developer.mozilla.org/en/docs/DOM:element.scrollTop

quindi in pratica lo scrollTop nel caso della pagina mia di esempio corrisponderebbe al limite superiore del browser?

andbin

07-02-2007, 23:16

il punto è che, almeno per come provo io...teoricamente la prima volta dovrebbe beccare sempre l'else quindi non dovrebbe richiamarsi. Però provo a fare una cosa prima, poi dico meglio.Il fatto è che quando con l'innerHTML viene aggiunto del codice alla pagina, scrn.scrollTop non cambia ma scrn.scrollHeight sì ... ed è quello che fa scatenare lo scroll.
L'else serve solo quando lo scrolling è quasi in prossimità del fondo, visto che lo scrolling va di 24 in 24, lo "aggiusta" in modo che sia proprio al fondo.

dierre

07-02-2007, 23:30

Il fatto è che quando con l'innerHTML viene aggiunto del codice alla pagina, scrn.scrollTop non cambia ma scrn.scrollHeight sì ... ed è quello che fa scatenare lo scroll.
L'else serve solo quando lo scrolling è quasi in prossimità del fondo, visto che lo scrolling va di 24 in 24, lo "aggiusta" in modo che sia proprio al fondo.

più o meno credo di aver capito, grazie. Dopo qualche prova la cosa mi è più chiara.