Como controlar scroll do <textarea>

[Danilo Pessoa 0]

Olá pessoal!

Preciso de mais uma ajuda. Eu tenho um textarea no meu código que eu atualizo ele a cada 5 segundo por ajax.

Só que eu preciso que no momento que eu atualize ele o scroll esteja rolado até o fim por default.

Alguém sabe como faço isso com javascript, css ou qualquer outro método?

Agradeço a todos que puderem ajudar.

Abraços!

 

Segue o código:

 

<div id=textperguntas><textarea cols="68" rows="6" readonly="readonly" id="perguntas" name="perguntas" ></textarea></div><input type="text" id="pergunta" name="pergunta" maxlength="200" size="55" >

<input type="button" onclick="ajaxSetPerguntaExpectador();ajaxGetPerguntasUsuario();" value="Enviar" >

<script type="text/javascript">

self.setInterval("ajaxGetSlideAtualExpec()",1000);

self.setInterval("ajaxGetPerguntasUsuario()",5000);


</script>

 

[Ricardo Binns 0]

Olá pessoal!

Preciso de mais uma ajuda. Eu tenho um textarea no meu código que eu atualizo ele a cada 5 segundo por ajax.

Só que eu preciso que no momento que eu atualize ele o scroll esteja rolado até o fim por default.

Alguém sabe como faço isso com javascript, css ou qualquer outro método?

Agradeço a todos que puderem ajudar.

Abraços!

 

Segue o código:

 

<div id=textperguntas><textarea cols="68" rows="6" readonly="readonly" id="perguntas" name="perguntas" ></textarea></div><input type="text" id="pergunta" name="pergunta" maxlength="200" size="55" >

<input type="button" onclick="ajaxSetPerguntaExpectador();ajaxGetPerguntasUsuario();" value="Enviar" >

<script type="text/javascript">

self.setInterval("ajaxGetSlideAtualExpec()",1000);

self.setInterval("ajaxGetPerguntasUsuario()",5000);


</script>

 

 

 

Tenta usar este evento e veja se te ajuda:

 

nada mais é que, voce busca a altura do textarea e seta no scrollTo()

 

$(elemento).scrollTop($(alemento)[0].scrollHeight);​

[Danilo Pessoa 0]

Opa! Como eu implemento este seu código no meu javascript?

 

Não ficou claro pra mim.

 

Obrigado!

[Rafael Fernandes_150844 2]

Usando jQuery

[Ricardo Binns 0]

Opa! Como eu implemento este seu código no meu javascript?

 

Não ficou claro pra mim.

 

Obrigado!

 

 

O codigo esta em jQuery, caso voce não use, tente em javascript nativo:

 

var textarea = document.getElementById(elemento);
textarea.scrollTop = textarea.scrollHeight;​

[Danilo Pessoa 0]

Eu já usei o nátivo do javascript dessa forma:

function scrollBox(){[/size][/font][font=arial][size=2]var elem = document.getElementById('perguntas');

elem.scrollTop = elem.scrollHeight;

}

 

 

Mas quando o ajax atualiza o meu elemento ele faz um movimento que fica feio.

 

Tipo ele pisca, carrega o textarea e por último rola de uma vez pro fim, para o usuário isso é péssimo não acha?

 

Tem alguma forma dele vir já rolado até o fim sem antes carregar para depois rolar?

[Ricardo Binns 0]

Voce atualiza o textarea inteiro ou somente o conteudo dentro dele ?

[Danilo Pessoa 0]

Voce atualiza o textarea inteiro ou somente o conteudo dentro dele ?

 

Opa!

Eu atualizo o meu textarea inteiro que vem com o conteúdo de um foreach php do meu Controller (desenvolvimento para CMS Joomla).

[Ricardo Binns 0]

Opa!

Eu atualizo o meu textarea inteiro que vem com o conteúdo de um foreach php do meu Controller (desenvolvimento para CMS Joomla).

 

ideal então seria você atualizar o conteúdo do textarea via ajax.

[Danilo Pessoa 0]

ideal então seria você atualizar o conteúdo do textarea via ajax.

 

Bom dia Ricardo!

 

Pensei nisso ontem ontem a noite, mas ainda não fiz, esperei sua resposta pra ver se tinha uma ideia melhor que a minha, mas vamos lá, vou fazer dessa forma e ver se da certo.

 

Obrigado pela atenção e ajuda.

 

Um abraço!

 

Qualquer coisa eu volto aqui!

 

Opa! Estuou de volta.

 

Esse é o meu IF que controla a atualização do conteúdo do textarea.

 

Como deve ficar para que ele atualize somente o conteúdo e não o textarea inteiro?

 

if(! empty($perguntas)){			echo "<textarea cols='68' rows='6' readonly='readonly' id='perguntas' name='perguntas'>";

		foreach ($perguntas as $pg){



			echo "$pg->name:  $pg->pergunta\n";

		}

		echo "</textarea>";


}

 

 

Aqui meu Ajax que chamo da página:

function ajaxGetPerguntasUsuario(){	

var eventoid = document.getElementById('id').value;



jQuery.ajax({

	url : 'index.php?option=com_web&task=web.getperguntasusuario&eventoid=' + eventoid

			+'&tmpl=raw',

	context : document.body,

	success : function(response) {

		var rel = document.getElementById('textperguntas');

		rel.innerHTML = response;

	}

});


}

 

 

E por último meu código HTML na página principal:

<div id=textperguntas><textarea cols="68" rows="6" readonly="readonly" id="perguntas" name="perguntas"></textarea></div><script type="text/javascript">


self.setInterval("ajaxGetPerguntasUsuario()",5000);</script>

 

Valeu!