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

dierre · 07-02-2007, 22:08

Codice:

<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

Quote:

Originariamente inviato da dierre

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

Quote:

Originariamente inviato da dierre

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

Quote:

Originariamente inviato da andbin

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.

07-02-2007, 22:59	#3
dierre Senior Member Iscritto dal: Sep 2004 Città: Interamnia Urbs Messaggi: 2125	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. __________________ Un wormhole (buco di tarlo, in italiano), detto anche Ponte di Einstein-Rosen, è una ipotetica caratteristica topologica dello spaziotempo che è essenzialmente una "scorciatoia" da un punto dell'universo a un altro, che permetterebbe di viaggiare tra di essi più velocemente di quanto impiegherebbe la luce a percorrere la distanza attraverso lo spazio normale. Go to a Wormhole

07-02-2007, 23:12	#4
dierre Senior Member Iscritto dal: Sep 2004 Città: Interamnia Urbs Messaggi: 2125	http://developer.mozilla.org/en/docs...ment.scrollTop quindi in pratica lo scrollTop nel caso della pagina mia di esempio corrisponderebbe al limite superiore del browser? __________________ Un wormhole (buco di tarlo, in italiano), detto anche Ponte di Einstein-Rosen, è una ipotetica caratteristica topologica dello spaziotempo che è essenzialmente una "scorciatoia" da un punto dell'universo a un altro, che permetterebbe di viaggiare tra di essi più velocemente di quanto impiegherebbe la luce a percorrere la distanza attraverso lo spazio normale. Go to a Wormhole

Strumenti
Mostra una versione stampabile Invia questa pagina per email