Ir para conteúdo

Arquivado

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

ktinho

[Resolvido] mover div com jquery

Recommended Posts

ae galera eu queria saber como animar uma div ao invez de um css segue o codigo

 

CODE

<html>
       <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript" src="animacao.js"></script>
   </head>
   <body>
       <div id="animado">
           <h3>Este é uma DIV animada!!</h3>
       </div>
   </body>
</html>
<heady>
<style type="text/css">
body {
   background: #eee;
}
#animado {
   background: #008;
   position: absolute;
   width: 200px;
   height: 200px;
   border: 1px solid #00f;
}
#animado h3 {
   font-family: Verdana;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">

$(document).ready(function(msg) {
   $("#animado").animate({left: 300, top: 400}, 1500);
});

</script>
</heady>
<html>

 

não entendo bem de javascript mais sei que da pra fazer com css agora com div eu não sei oque devo mudar em relaçao a funçao?

$(document).ready(function(msg) {
$("#animado").animate({left: 300, top: 400}, 1500);
});

 

essa funçao move um css mais nao o div alguem ai sabe se tem como e como fazer?

Compartilhar este post


Link para o post
Compartilhar em outros sites
eu queria saber como animar uma div ao invez de um css

 

essa funçao move um css mais nao o div alguem ai sabe se tem como e como fazer?

você fez uma mistura de palavras desconexas nessas frases, não deu pra entender.

 

Veja, qualquer animação que você faça em páginas web, será manipulando propriedades CSS.

A linguagem que costumamos usar para isso, é javascript, mas ainda assim, não passa de 'js manipulando css'. (DHTML)

 

a DIV é um elemento HTML, que possui regras CSS aplicadas a ela. Alterando o CSS deste ou de outro elemento, você faz a tua animação.

Entendeu ?

 

Visto isso, e com estas palavras, as tuas frases não fazem sentido. Explique-se melhor.

Compartilhar este post


Link para o post
Compartilhar em outros sites

oque quiz dizer é o seguinte que esse código acima move uma imagem produzida pelo css.

 

oque eu quero é mover uma div com essa funçao:

 

$(document).ready(function(msg) {
$("#animado").animate({left: 300, top: 400}, 1500);
});

 

sendo que onde é colocado o id do css que é #animado, chamasse uma div com outro nome e nao um css.

 

 

razao que eu quero éssa funçao é porque tenho um servidor de socket que quando um usuario cria uma conexao com o servidor cria um div altomaticamente com um id diferente, mais se eu colocar a funçao que pega o id (+u+) dentro da funçao js nao move a div.

 

sei que o css é uma propriedade da div para atribuir em um quadro(div) coisas como cor domensao e posiçao, mais queria mover a div sem usar o css se é que isso é possivel.

 

 

obs: quero mover o div só com seu id, sem as protriedade css.

Compartilhar este post


Link para o post
Compartilhar em outros sites
se eu colocar a funçao que pega o id (+u+) dentro da funçao js nao move a div.
acho que você está fazendo algo errado nesse ponto. Mostre como tentou.

 

 

queria mover a div sem usar o css se é que isso é possivel.
impossível.

é oque eu disse, qq animação é js manipulando css.

 

O máximo que dá para você fazer, é encapsular isso:

function move_div( div ){
 $( div ).animate({left: 300, top: 400}, 1500);
}

e então você chama:

 

$(document).ready(function(msg) {
  move_div( $("#animado") );
});

passando pra função move_div(), um objeto jQuery que aponte para o elemento.

Compartilhar este post


Link para o post
Compartilhar em outros sites

veja o meu projeto quando eu movo o objeto com click do mouse ele move tranquilo mais se eu abrir duas janelas do navegador os aparece duas divs e move os dois nao sei porque você pode me ajudar?

 


<html> 
<head>

<title>HTML5 WebSocket Example with PHP5 Server</title> 


<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 

	var socket;

	function dump(data) {
		var content = '';
		for (user in data) {
			if (data[user].position) {
				var pos = data[user].position.split(',');
				content += '<li class="user"><div class="icon" style="background:' + data[user].color + ';"></div>' + data[user].ip + ': ' + pos[0] + 'x' + pos[1] + '</li>';
				$(document).ready(function(msg) {
                   $(".cursor").animate({left: pos[0], top: pos[1]}, 1500);
                    });

			}
		}
		$('#console ul').html(content);
	}
//--------------------------------------------------------------------------------------------------------------
	function renderPosition(u, x, y, c) {
		if ($('#'+u).length == 0) {
			$('<div class="cursor" id="' + u + '"></div>').appendTo('body');
		}


	//	$('#'+u).css('left', x+'px');
	//	$('#'+u).css('top', y+'px');
	//	$('#'+u).css('background', c);
	}
//---------------------------------------------------------------------------------------------------------------	
	function send(x, y) {
		var msg = x + ',' + y;
		socket.send(msg);
	}
//---------------------------------------------------------------------------------------------------------------		

//----------------------------------------------------------------------------------------------------------------		
	function init() {
		var host = "ws://localhost:8000/sockethtml5/server.php";
		try {
			socket = new WebSocket(host); 
			socket.onopen = function(msg){ };
			socket.onmessage = function(msg){
				if (msg.data) {
					eval('var data = ' + msg.data + ';');
					for (user in data) {
						if (data[user].position) {
							var pos = data[user].position.split(',');
							var color = data[user].color;
							renderPosition(user, pos[0], pos[1], color); 



						}
					}
					dump(data);
				}
			};
			socket.onclose = function(msg){ };
		} catch(ex){ alert(ex); }

		$('body').click(function(evt){
			if (evt.clientX && evt.clientY) {
				send(parseInt(evt.clientX), parseInt(evt.clientY));

			}
		});
	}
//----------------------------------------------------------------------------------------------------------------	

</script> 
<style type="text/css"> 

	.cursor { position:absolute; left:0; top:0; width:100px; height:100px; background-image: url(321.gif); background-repeat: no-repeat; }
	.icon { float:left; width:10px; height:10px; margin-right:5px; }
	#console, #info { font:12px arial,helvetica,sans-serif; margin:20px; padding:20px; background:#f1f1f1; width:250px; }
	#console { background:url(http://www.easevents.com/pdacamps/kamila/funny-cat.jpg) no-repeat center center; font-size:10px; height:250px; overflow:auto; }
	#console ul { margin:0; padding:0; }
	.user { background:#fff; padding:5px; list-style-type:none; }
	h1 { font-size:20px; margin:0; }
	h2 { margin:0 0 10px 0; }
	button { position:absolute; right:0; bottom:0; font-size:20px; padding:5px 10px; margin:40px; }
</style> 
</head> 
<body id="body" onLoad="init()"> 
<div id="info"> 
	<h1>HTML5 Websockets Test</h1> 
	<a href="http://bohuco.net/blog/2010/07/html5-websockets-example/">More Infos at bohuco.net/blog</a> 
</div> 
<div id="console"> 
	<h2>Current Users ...</h2> 
	<ul></ul> 
</div> 
<button onClick="document.location = 'http://bohuco.net/blog/2010/07/html5-websockets-example/';">More Infos »</button> 
</body> 
</html> 

 

se eu clicar na janela a move os dois div se eu cliar na janela b tambem mesmo com ids diferentes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@ktinho, não crie tópicos repetidos.

 

o seu outro foi apagado. Leia as regras do forum para uma melhor participação.

http://forum.imasters.com.br/index.php?app=core&module=help

Compartilhar este post


Link para o post
Compartilhar em outros sites

muito obrigado voce me ajudou muito dinovo desculpa ter criado tópicos repetidos, soluçao encontrada se voces quiserem usar o código podem ver como ficou abaixo:

 

<html> 
<head>

<title>HTML5 WebSocket Example with PHP5 Server</title> 


<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 

	var socket;

	function dump(data) {
		var content = '';
		for (user in data) {
			if (data[user].position) {
				var pos = data[user].position.split(',');
				content += '<li class="user"><div class="icon" style="background:' + data[user].color + ';"></div>' + data[user].ip + ': ' + pos[0] + 'x' + pos[1] + '</li>';



			}
		}
		$('#console ul').html(content);
	}


//--------------------------------------------------------------------------------------------------------------
	function renderPosition(u, x, y, c) {
		if ($('#'+u).length == 0) {
			$('<div class="cursor" id="' + u + '"></div>').appendTo('body');
		}

$(document).ready(function(evt) {
   $('#'+u).animate({left: x, top: y}, 1500);
   });
	//	$('#'+u).css('left', x+'px');
	//	$('#'+u).css('top', y+'px');
	//	$('#'+u).css('background', c);
	}
//---------------------------------------------------------------------------------------------------------------	
	function send(x, y) {
		var msg = x + ',' + y;
		socket.send(msg);
	}
//---------------------------------------------------------------------------------------------------------------		

//----------------------------------------------------------------------------------------------------------------		
	function init() {
		var host = "ws://10.1.1.3:8000/sockethtml5/server.php";
		try {
			socket = new WebSocket(host); 
			socket.onopen = function(msg){ };
			socket.onmessage = function(msg){
				if (msg.data) {
					eval('var data = ' + msg.data + ';');
					for (user in data) {
						if (data[user].position) {
							var pos = data[user].position.split(',');
							var color = data[user].color;
							renderPosition(user, pos[0], pos[1], color); 

               document.getElementById("vx").innerHTML = user;
               document.getElementById("vy").innerHTML = pos[1];


						}
					}
					dump(data);
				}
			};
			socket.onclose = function(msg){ };
		} catch(ex){ alert(ex); }

		$('body').click(function(evt){
			if (evt.clientX && evt.clientY) {
				send(parseInt(evt.clientX), parseInt(evt.clientY));

			}
		});
	}
//----------------------------------------------------------------------------------------------------------------	

</script> 
<style type="text/css"> 

	.cursor { position:absolute; left:0; top:0; width:100px; height:100px; background-image: url(321.gif); background-repeat: no-repeat; }
	.icon { float:left; width:10px; height:10px; margin-right:5px; }
	#console, #info { font:12px arial,helvetica,sans-serif; margin:20px; padding:20px; background:#f1f1f1; width:250px; }
	#console { background:url(http://www.easevents.com/pdacamps/kamila/funny-cat.jpg) no-repeat center center; font-size:10px; height:250px; overflow:auto; }
	#console ul { margin:0; padding:0; }
	.user { background:#fff; padding:5px; list-style-type:none; }
	h1 { font-size:20px; margin:0; }
	h2 { margin:0 0 10px 0; }
	button { position:absolute; right:0; bottom:0; font-size:20px; padding:5px 10px; margin:40px; }
</style> 
</head> 
<body id="body" onLoad="init()"> 
<div id="info"> 
<div id="x">X <span id="vx"></span></div><br>
   <div id="y">Y  <span id="vy"></span></div>
	<h1>HTML5 Websockets Test</h1> 
	<a href="http://bohuco.net/blog/2010/07/html5-websockets-example/">More Infos at bohuco.net/blog</a> 
</div> 
<div id="console"> 
	<h2>Current Users ...</h2> 
	<ul></ul> 
</div> 
<button onClick="document.location = 'http://bohuco.net/blog/2010/07/html5-websockets-example/';">More Infos »</button> 
</body> 
</html> 

 

pode colocar como "resolvido" ate +

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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