• L
    User Attivo •

    @gayspace said:

    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:

    var objChat = document.getElementById("divChat");
objChat.scrollTop = objChat.scrollHeight;

    Per citare la fonte: ho trovato questo codice sul blog di Eric Pascarello.

    0
  • G
    User Attivo •

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

    0
  • L
    User Attivo •

    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.

    0
  • G
    User Attivo •

    Il div che vorrei far scrollare al bottom ha come id "messaggi"

    
<!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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; border-bottom:1px solid; 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; border-bottom:1px solid; 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; 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; 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; background-color:#7b9dc4"><font class="b12"><strong>Staff Room</strong></font></div>

	    </div>			
            </div>            
			</div>
			</div>
</div>
</body>
</html>
    0
  • L
    User Attivo •

    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:

    <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. ;)
    0
  • G
    User Attivo •

    Quindi ne approfitto... come posso migliorare il protoype? inserendolo al di fuori del div richiamato?

    0
  • G
    User Attivo •

    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:

    
 
<!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; border-bottom:1px solid; 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; border-bottom:1px solid; 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; 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; 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; 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>
    0
  • L
    User Attivo •

    allora basta rimodificare lo scroll e farlo anziché quando viene caricata la pagina, quando viene eseguito l'aggiornamento dei messaggi.

    Questo torna così:```
    <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>

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

    0
  • L
    User Attivo •

    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ì:```
    <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ì:

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

    0
  • G
    User Attivo •

    Funziona perfettamente 😄

    0
Effettua l'accesso per rispondere