+ Rispondi alla Discussione
Risultati da 1 a 14 di 14

Div bottom load

Ultimo Messaggio di gayspace il:
  1. #1
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135

    Div bottom load

    Salve a tutti... Ho questa pagina

    Codice:
    <div id="messaggi" style="width:796px; overflow-y:scroll; overflow-x:hidden; padding:2px; float:left; height:">  
    	<script src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    	<script type="text/JavaScript">
    	Event.observe(window, 'load', function(){ 
       new Ajax.PeriodicalUpdater('messaggi', 'messaggi.php', { 
          method: 'post', frequency: 1
       }); 
       })
    	</script>
    	<?
    	@include '../include/script/connessione.php';
    	@include '../include/script/variabili.php';
    	@include '../include/script/contatori.php';
    		
    	$mia_room = @mysql_fetch_array(mysql_query("select room from chat_online where lower(nickname)='".strtolower($cookie)."'"));
    	$txt = @mysql_query("select nickname, messaggio from chat_messaggi where room = '".$mia_room['room']."' order by id asc");
    	while ($ele = mysql_fetch_array($txt)) {
    	$ele['messaggio'] = preg_replace('/!{1,}/', '!', $ele['messaggio']);
    	$ele['messaggio'] = preg_replace('/\?{1,}/', '?', $ele['messaggio']);
    	$ele['messaggio'] = preg_replace('/\.{3,}/', '...', $ele['messaggio']);
    	$ele['messaggio'] = str_replace('è','&egrave;',$ele['messaggio']);
    	?>
        <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><? $nickname = $ele['nickname']; include '../include/thumb/users_chat_20x20.php'; ?></div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10"><? echo ucfirst(strtolower($ele['nickname'])) ?>:</font></div>
    	<div style="padding-top:5px; width:665px; float:left"><font class="b10"><? echo ucfirst(strtolower($ele['messaggio'])) ?></font></div>
        </div>
        <? } ?>
        </div>
    L'altezza del div è determinata dalla risoluzione dello schermo...

    Come posso fare affinche se il div è troppo alto, al caricamento dello stesso la pagina scrolli automaticamente alla fine (bottom per intenderci)?

    Grazie
    Italian gay community

  2. #2
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135
    Uppo
    Italian gay community

  3. #3
    User L'avatar di lucabartoli
    Data Registrazione
    Feb 2010
    Località
    Torino
    Messaggi
    511
    Ciao,
    Innanzitutto vorrei segnalarti che il bump delle discussioni su questo forum non è consentito dal regolamento. Comunque hai postato ieri sera alle 23.25 e può anche essere normale che alle 8.20 di stamattina non ti avesse ancora risposto nessuno, non sei d'accordo? Qui ci sono professionisti e non che mettono a disposizione il proprio tempo e la propria conoscenza gratuitamente, si cerca di rispondere a tutti, ma ci vuole un po' di pazienza perché tutti abbiamo solo 24 ore al giorno.

    Comunque per fare lo scroll in basso puoi utilizzare javascript
    Codice:
    window.scrollBy(document_height, 0);
    Non ho capito cosa intendi con "div troppo alto", quindi non riesco a completarti il codice, ma non dovrebbe essere troppo difficile.

  4. #4
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135
    Scusami ma ero e sono in un vicolo cieco...

    il div in questione racchiude i messaggi di una chat, quindi + messaggi = + alto il div... ma vorrei lasciare una cronologia dei messaggi, quindi far scrollare il div su o giù, ma di default visualizzare il bottom del div, dove appare l'ultimo messaggio...

    ora provo e ti so dire se funziona
    Italian gay community

  5. #5
    User L'avatar di lucabartoli
    Data Registrazione
    Feb 2010
    Località
    Torino
    Messaggi
    511
    Citazione Originariamente Scritto da gayspace Visualizza Messaggio
    Scusami ma ero e sono in un vicolo cieco...

    il div in questione racchiude i messaggi di una chat, quindi + messaggi = + alto il div... ma vorrei lasciare una cronologia dei messaggi, quindi far scrollare il div su o giù, ma di default visualizzare il bottom del div, dove appare l'ultimo messaggio...

    ora provo e ti so dire se funziona
    Avevo capito male... ti ho scritto il codice per scrollare una pagina, non un div.
    Usa questo, sembra fatto apposta per te:
    Codice:
    var objChat = document.getElementById("divChat");
    objChat.scrollTop = objChat.scrollHeight;
    Per citare la fonte: ho trovato questo codice sul blog di Eric Pascarello.

  6. #6
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135
    Purtroppo non funziona... tutta la pagina si "sposta" oltre il margine superiore dello schermo e vedo solo un 50% della stessa..

    Se ti serve ti allego il codice e uno screen della situazione...
    Italian gay community

  7. #7
    User L'avatar di lucabartoli
    Data Registrazione
    Feb 2010
    Località
    Torino
    Messaggi
    511
    sarebbe meglio se avessi una versione online della pagina, oppure il codice completo (non gli script php, ma proprio l'html che esce sul browser)...
    ho paura che ci sia un overflow hidden che disturba, perché di solito è lui a fare danni con gli scroll.

  8. #8
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135
    Il div che vorrei far scrollare al bottom ha come id "messaggi"

    Codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="http://91.194.90.196/~gs9b/css/main.css" rel="stylesheet" type="text/css" />
    <link href="http://91.194.90.196/~gs9b/css/b/font.css" rel="stylesheet" type="text/css" />
    <link href="http://91.194.90.196/~gs9b/css/b/form.css" rel="stylesheet" type="text/css" /><script>
    window.onload=function C(){
    var varH = document.body.offsetHeight-10;
    document.getElementById('page').style.height=varH+'px';
    var varA = document.body.offsetHeight-10;
    document.getElementById('utenti').style.height=varA+'px';
    var varB = document.body.offsetHeight-86;
    document.getElementById('messaggi').style.height=varB+'px';
    }
    </script>
    <link href="http://91.194.90.196/~gs9b/immagini/sfondo/favicon.ico" rel="shortcut icon">
    <title>Gestisci il tuo profilo in Gayspace</title>
    <meta name="keywords" content="gay community gay glbt community chat gay sito gay gratis incontri gay forum gratuito" />
    <meta name="description" content="La pi&ugrave; grande gay community italiana completamente gratis... Oltre 122.000 utenti ti stanno aspettando" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="googlebot" content="index,follow" />
    <meta name="robots" content="ALL" />
    <meta name="revisit-after" content="1 days" />
    
    <meta http-equiv="expires" content="0" />
    <meta name="verify-v1" content="k4Gfd+QPH+r7hShS9zxz/dX7crSP1zDFjJbTWL0b+CE=" />
    <link rel="shortcut icon" href="http://91.194.90.196/~gs9b/immagini/background/favicon.ico" />
    <link rel="apple-touch-icon" href="http://91.194.90.196/~gs9b/immagini/background/icona_iphone.png">
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-16874530-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script><script type="text/JavaScript">
    var objChat = document.getElementById("messaggi");
    objChat.scrollTop = objChat.scrollHeight;
    </script>
    </head>
    
    <body class="body_b">
    
    <div class="container" style="overflow:hidden">
    			<div class="page_text">
    	   		<div class="page" style="width:1002px; background-color:#066333">
    
    			<div id="page" style="margin:2px 0px 0px 4px; width:800px; float:left; height:">
    			<div id="area_messaggi" class="chat_ok_b" style="margin-bottom:5px; width:800px; clear:both; height:">
    
                 <div id="messaggi" style="width:796px; overflow-y:scroll; overflow-x:hidden; padding:2px; float:left; height:">  
    	<script src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    	<script type="text/JavaScript">
    	Event.observe(window, 'load', function(){ 
       new Ajax.PeriodicalUpdater('messaggi', 'messaggi.php', { 
          method: 'post', frequency: 1
       }); 
       })
    	</script>
    	    <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Ciao</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Come va?</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Prova</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Prova 2</font></div>
        </div>
            <div style="clear:both">
    
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo...</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo... questo &egrave; un testo lungo, lungo lungo...</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Ok</font></div>
        </div>
            <div style="clear:both">
    
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Prova</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Continua</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Continua</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Ok</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">1</font></div>
        </div>
            <div style="clear:both">
    
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">2</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">3</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">4</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">1</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">2</font></div>
        </div>
            <div style="clear:both">
    
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">3</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">4</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">5</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">6</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">7</font></div>
        </div>
            <div style="clear:both">
    
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Ok</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Ciao</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Ok</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">123</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">123</font></div>
        </div>
            <div style="clear:both">
    
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">00</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">999</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">000</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">123</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Aaa</font></div>
        </div>
            <div style="clear:both">
    
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Aaa</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">12</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">122</font></div>
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">000</font></div>
    
        </div>
            <div style="clear:both">
        <div style="clear:both; height:2px"></div>
    	<div style="height:20px; width:20px; float:left; border:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:13px; padding:5px 0px 0px 2px; width:97px; float:left"><font class="c10">Marco1986:</font></div>
    	<div style="padding-top:5px; width:650px; float:left"><font class="b10">Ciao</font></div>
        </div>
            </div>
    
    	             
    			</div>
                <div class="chat_ok_b" style="width:796px; height:61px; clear:both; padding:2px">
    			<iframe class="chat_ok_b" style="border:hidden" width="796" height="61" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" src="testo.php"></iframe>
    			</div>
    			</div>
                <div id="utenti" class="chat_ok_b" style="margin:2px 0px 0px 5px; width:191px; float:left; height:">
    					
                 	<div id="utenti" style="width:40px; height:40px; float:left">  
    	<script src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    
    	<script type="text/JavaScript">
    	Event.observe(window, 'load', function(){ 
       new Ajax.PeriodicalUpdater('utenti', 'utenti.php', { 
          method: 'post', frequency: 5
       }); 
       })
    	</script>
    	
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Stanza Principale</strong></font></div>
    	    <div style="width:191px; clear:both">
    	<div style="height:20px; margin:0px 2px 0px 2px; width:15px; float:left; background-image:url(http://91.194.90.196/~gs9b/immagini/chat/ruolo_1.png)"></div>	
    	<div style="height:20px; width:20px; float:left; border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" />
    </div>	
    	<div style="height:14px; width:144px; padding:3px; float:left; border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; background-image:url(http://91.194.90.196/~gs9b/immagini/chat/ruolo_bg_1.png)"><font class="b10">Marco1986</font></div>	
    	</div>
    	    <div style="width:9px; height:3px; clear:both; overflow:hidden"></div>
    
        <div style="width:191px; height:1px; background-color:#ffffff; clear:both; overflow:hidden"></div>
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Sex Room</strong></font></div>
    	    <div style="width:9px; height:3px; clear:both; overflow:hidden"></div>
        <div style="width:191px; height:1px; background-color:#ffffff; clear:both; overflow:hidden"></div>
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Junior Room</strong></font></div>
    	    <div style="width:9px; height:3px; clear:both; overflow:hidden"></div>
        <div style="width:191px; height:1px; background-color:#ffffff; clear:both; overflow:hidden"></div>
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Staff Room</strong></font></div>
    
    	    </div>			
                </div>            
    			</div>
    			</div>
    </div>
    </body>
    </html>
    Italian gay community

  9. #9
    User L'avatar di lucabartoli
    Data Registrazione
    Feb 2010
    Località
    Torino
    Messaggi
    511
    Il problema era semplicissimo... praticamente assegnavi l'altezza al div dopo il load della pagina, mentre facevi lo scroll durante il caricamento. Ovviamente questo non va bene

    Per risolvere, togli lo script che ti ho dato io, poi modifica quello che assegna l'altezza del div in questo modo:
    Codice:
    <script type="text/javascript">
    window.onload=function C(){
    var varH = document.body.offsetHeight-10;
    document.getElementById('page').style.height=varH+'px';
    var varA = document.body.offsetHeight-10;
    document.getElementById('utenti').style.height=varA+'px';
    var varB = document.body.offsetHeight-86;
    document.getElementById('messaggi').style.height=varB+'px';
    
    var objChat = document.getElementById("messaggi");
    objChat.scrollTop = objChat.scrollHeight;
    }
    </script>
    Comunque, mi raccomando, cerca sempre di caricare pochi javascript (ad esempio la libreria prototype la carichi ogni volta, mentre ne basta una sola) e soprattutto fai diventare esterni tutti gli script e caricali alla fine della pagina (prima della chiusura del body). Puoi anche caricarli all'inizio, ma devi assicurarti di caricarli in modo asincrono.
    Tutto questo influisce molto sulla velocità e sul consumo della banda, che è sempre importante, ma nel tuo caso specifico ancora di più visto che si tratta di una chat.
    Ultima modifica di lucabartoli; 17-06-10 alle 16:43 Motivo: Ho corretto il codice, conteneva ancora gli alert di debug

  10. #10
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135
    Quindi ne approfitto... come posso migliorare il protoype? inserendolo al di fuori del div richiamato?
    Italian gay community

  11. #11
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135
    Allora la situazione è molto migliorata.. il problema ora è il seguente

    All'apertura della chat, il div è al bottom...

    ma all'inserimento di un'ulteriore riga e/o messaggio, il div non scrolla ancora giù, ma resta al precedente limite, impostato al caricamento della pagina..

    ti riporto il codice aggiornato:

    Codice:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <link href="http://91.194.90.196/~gs9b/css/main.css" rel="stylesheet" type="text/css" /> 
    <link href="http://91.194.90.196/~gs9b/css/b/font.css" rel="stylesheet" type="text/css" /> 
    <link href="http://91.194.90.196/~gs9b/css/b/form.css" rel="stylesheet" type="text/css" /><script> 
    window.onload=function C(){
    var varH = document.body.offsetHeight-10;
    document.getElementById('page').style.height=varH+'px';
    var varA = document.body.offsetHeight-10;
    document.getElementById('utenti').style.height=varA+'px';
    var varB = document.body.offsetHeight-86;
    document.getElementById('messaggi').style.height=varB+'px';
    var objChat = document.getElementById("messaggi");
    objChat.scrollTop = objChat.scrollHeight;}
    </script> 
    <link href="http://91.194.90.196/~gs9b/immagini/sfondo/favicon.ico" rel="shortcut icon"> 
    <title>Gestisci il tuo profilo in Gayspace</title> 
    <meta name="keywords" content="gay community gay glbt community chat gay sito gay gratis incontri gay forum gratuito" /> 
    <meta name="description" content="La pi&ugrave; grande gay community italiana completamente gratis... Oltre 122.000 utenti ti stanno aspettando" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <meta name="googlebot" content="index,follow" /> 
    <meta name="robots" content="ALL" /> 
    <meta name="revisit-after" content="1 days" /> 
    <meta http-equiv="expires" content="0" /> 
    <meta name="verify-v1" content="k4Gfd+QPH+r7hShS9zxz/dX7crSP1zDFjJbTWL0b+CE=" /> 
    <link rel="shortcut icon" href="http://91.194.90.196/~gs9b/immagini/background/favicon.ico" /> 
    <link rel="apple-touch-icon" href="http://91.194.90.196/~gs9b/immagini/background/icona_iphone.png"> 
     
    <script type="text/javascript"> 
     
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-16874530-1']);
      _gaq.push(['_trackPageview']);
     
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
     
    </script><script src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script> 
    </head> 
     
    <body class="body_b"> 
     
    <div class="container" style="overflow:hidden"> 
    			<div class="page_text"> 
    	   		<div class="page" style="width:1002px; background-color:#066333"> 
    			<div id="page" style="margin:2px 0px 0px 4px; width:800px; float:left; height:"> 
    			<div id="area_messaggi" class="chat_ok_b" style="margin-bottom:5px; width:800px; clear:both; height:"> 
     
                 <div id="messaggi" style="width:796px; overflow-y:scroll; overflow-x:hidden; padding:2px; float:left; height:">  
    	    
            [...]
            
            </div> 
    	             
    			</div> 
                <div class="chat_ok_b" style="width:796px; height:61px; clear:both; padding:2px"> 
    			<iframe class="chat_ok_b" style="border:hidden" width="796" height="61" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" src="testo.php"></iframe> 
    			</div> 
    			</div> 
                <div id="utenti" class="chat_ok_b" style="margin:2px 0px 0px 5px; width:191px; float:left; height:"> 
    					
                 	<div id="utenti" style="width:40px; height:40px; float:left">  
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Stanza Principale</strong></font></div> 
    	    <div style="width:191px; clear:both"> 
    	<div style="height:20px; margin:0px 2px 0px 2px; width:15px; float:left; background-image:url(http://91.194.90.196/~gs9b/immagini/chat/ruolo_1.png)"></div>	
    	<div style="height:20px; width:20px; float:left; border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; overflow:hidden"><img style="margin-top:-5px; margin-left:-0px; overflow:hidden" src="http://www.************/foto_profilo/M/marco1986/thumb/103785.png" width="20" height="29" /> 
    </div>	
    	<div style="height:14px; width:144px; padding:3px; float:left; border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; background-image:url(http://91.194.90.196/~gs9b/immagini/chat/ruolo_bg_1.png)"><font class="b10">Marco1986</font></div>	
    	</div> 
    	    <div style="width:9px; height:3px; clear:both; overflow:hidden"></div> 
        <div style="width:191px; height:1px; background-color:#ffffff; clear:both; overflow:hidden"></div> 
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Sex Room</strong></font></div> 
    	    <div style="width:9px; height:3px; clear:both; overflow:hidden"></div> 
        <div style="width:191px; height:1px; background-color:#ffffff; clear:both; overflow:hidden"></div> 
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Junior Room</strong></font></div> 
    	    <div style="width:9px; height:3px; clear:both; overflow:hidden"></div> 
        <div style="width:191px; height:1px; background-color:#ffffff; clear:both; overflow:hidden"></div> 
    		<div style="height:13px; padding:5px; width:181px; clear:both; border-bottom:1px solid #ffffff; background-color:#7b9dc4"><font class="b12"><strong>Staff Room</strong></font></div> 
    	    </div>			
                </div>            
    			</div> 
    			</div> 
    </div> 
    	<script type="text/JavaScript"> 
    	Event.observe(window, 'load', function(){new Ajax.PeriodicalUpdater('messaggi', 'messaggi.php', {method: 'post', frequency: 0.5});})
    	Event.observe(window, 'load', function(){new Ajax.PeriodicalUpdater('utenti', 'utenti.php', {method: 'post', frequency: 0,5});})
    	</script> 
    </body> 
    </html>
    Italian gay community

  12. #12
    User L'avatar di lucabartoli
    Data Registrazione
    Feb 2010
    Località
    Torino
    Messaggi
    511
    allora basta rimodificare lo scroll e farlo anziché quando viene caricata la pagina, quando viene eseguito l'aggiornamento dei messaggi.

    Questo torna così:
    Codice:
    <script> 
    window.onload=function C(){
    var varH = document.body.offsetHeight-10;
    document.getElementById('page').style.height=varH+'px';
    var varA = document.body.offsetHeight-10;
    document.getElementById('utenti').style.height=varA+'px';
    var varB = document.body.offsetHeight-86;
    document.getElementById('messaggi').style.height=varB+'px';
    }
    </script>
    E lo script di aggiornamento lo modifichiamo così:
    Codice:
    <script type="text/JavaScript">
    var objChat = document.getElementById("messaggi");
       Event.observe(window, 'load', function(){
          new Ajax.PeriodicalUpdater('messaggi', 'messaggi.php', {
             method: 'post',
             frequency: 0.5,
             onUpdateComplete: function() {
                objChat.scrollTop = objChat.scrollHeight;
             }
          });
       });
        Event.observe(window, 'load', function(){new Ajax.PeriodicalUpdater('utenti', 'utenti.php', {method: 'post', frequency: 0,5});});
    </script>

  13. #13
    User L'avatar di lucabartoli
    Data Registrazione
    Feb 2010
    Località
    Torino
    Messaggi
    511
    Quanto scritto nel post precedente aveva un errore e non funzionava. Ho aggiunto la classe che mancava e cambiato funzione.

    In definitiva

    Questo torna così:
    Codice:
    <script type="text/javascript"> 
    window.onload=function C(){
    var varH = document.body.offsetHeight-10;
    document.getElementById('page').style.height=varH+'px';
    var varA = document.body.offsetHeight-10;
    document.getElementById('utenti').style.height=varA+'px';
    var varB = document.body.offsetHeight-86;
    document.getElementById('messaggi').style.height=varB+'px';
    }
    </script>
    E lo script di aggiornamento lo modifichiamo così:
    Codice:
    <script type="text/javascript">
    Ajax.NewPeriodicalUpdater = Class.create(Ajax.PeriodicalUpdater, {
      updateComplete: function($super, response) {
        $super(response); // Call Ajax.PeriodicalUpdater.updateComplete
        (this.options.onUpdateComplete || Prototype.emptyFunction).apply(this, arguments);
      }
    });
    var objChat = document.getElementById('messaggi');
    Event.observe(window, 'load', function(){
    new Ajax.NewPeriodicalUpdater('messaggi', 'messaggi.php', {
             method: 'post',
             frequency: 0.5,
               onUpdateComplete: function() {
                objChat.scrollTop = objChat.scrollHeight;
              }
    });
    });
    Event.observe(window, 'load', function(){new Ajax.PeriodicalUpdater('utenti', 'utenti.php', {method: 'post', frequency: 2}); })   
    </script>

  14. #14
    Utente Premium L'avatar di gayspace
    Data Registrazione
    Apr 2008
    Messaggi
    135
    Funziona perfettamente
    Italian gay community

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.