Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Dian Carlos

Marquee com jQuery somente quando o texto passa do tamanho da div

Por , em Javascript

Recommended Posts

Dian Carlos    29

Dian Carlos
Postado

Olá amigos do iMasters o/ ^^ :thumbsup:

 

Estou num projeto em que preciso de que quando uma frase ultrapasse o tamanho que coloquei na div, em vez de ter uma quebra de linha ter um marque para a frase ficar passando..

 

Vi vários marquee's em jquery, mas nenhum deles atendem minha necessidade, pois quero que o marquee fique ativo somente quando a frase ultrapassar o 'width'..

 

Não entendo muito de javacript, mas sei que tem um jeito..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Ola, fiz o que você pediu...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var textoin = 0;
var texto = 0;
$(document).ready(function(){
$(document).each(function(){
	textoin = $('#textoin').width();
	texto = $('#texto').width();
	if (textoin>texto) {
		animacao();
	};						 					 
});						   						   
});
function animacao(){
$('#textoin').animate({'margin-left':texto-textoin+'px'}, textoin*5, function(){
	setTimeout("$('#textoin').css('margin-left', '0');", 500);
	setTimeout("animacao()", 1000);
});
};
</script>
<style type="text/css">
#texto {
width: 200px;
height: 200px;
background-color: #333;
border: solid 2px #000;
overflow: hidden;
}
#textoin {
color: #fff;
font-weight: normal;
}
</style>
</head>
<body>
<div id="texto">
<b id="textoin">djisjdoisadasodidhsohdoasjdsaoidjasdisafhduohajdisadisdjoijsdiaidjds</b>
</div>
</body>
</html>

Neste código eu usei uma DIV e um B, porque o B tem um width automático, tipo, se você quiser usar apenas uma DIV para fazer isso, não vai dar certo, pois a DIV ela não se adapta com o tamanho do seu conteúdo, e sim com o externo, ou seja, se você simplesmente criar uma DIV no seu body, essa DIV irá ocupar 100% da tela, enquanto o B não, ele ocupa 0px, mas se você digitar qualquer coisa dentro do B, ele irá se adaptar :)

Isto que eu fiz aí foi apenas um exemplo, agora você pode adaptar da maneira que quizer

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Neste código eu usei uma DIV e um B, porque o B tem um width automático, tipo, se você quiser usar apenas uma DIV para fazer isso, não vai dar certo, pois a DIV ela não se adapta com o tamanho do seu conteúdo, e sim com o externo, ou seja, se você simplesmente criar uma DIV no seu body, essa DIV irá ocupar 100% da tela, enquanto o B não, ele ocupa 0px, mas se você digitar qualquer coisa dentro do B, ele irá se adaptar :)

Isto que eu fiz aí foi apenas um exemplo, agora você pode adaptar da maneira que quizer

Ismael, você testou colocar texto com espaço? Desta forma, aqui não funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Ismael, você testou colocar texto com espaço? Desta forma, aqui não funcionou.

Então você tenta procurar aí sobre como identificar uma quebra de linha em um texto, e depois aumentar a largura do B (que neste caso pode ser trocado por DIV).

Compartilhar este post

Link para o post
Compartilhar em outros sites

wertycs    0

wertycs
Postado

-->

 

Erro ao gravar msg. Segue abaixo.

 

Basta colocar um position: absolute; no css do #textoin.

 

#textoin {
       color: #fff;
       font-weight: normal;
position: absolute;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito