(Resolvido) movimento da div estranho.

ktinho · Março 14, 2011

ai é o seguinte eu tenho o seguinte codigo:

<html> 
<head>

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

    &lt;script type="text/javascript" src="jquery.min.js"></script> 
    &lt;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://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); 
                                
                                
                            
                            }
                        }
                        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 &raquo;</button> 
</body> 
</html>

esssa pagina se conecta via socket tcp com um servidor e quando se conecta cria um div com id aleatorio até ai tudo bem mas se um novo usuario entra na pagina ele move todos os divs não sei oque esta acontecendo. se eu mover o usuario ( A ) tambem move o usuario ( B ) sendo que a mesma variavel das posiçoes é a mesma pos[0], pos[1] para todas as divs. quero saber como posso fazer para que eu movo minha div e os outros movao a suas divs. funçao que move os divs são:

$(document).ready(function(msg) {
                   $(".cursor").animate({left: pos[0], top: pos[1]}, 1500);
                     });

Editado Março 14, 2011 por ktinho

ktinho · Março 18, 2011

bom gente revirando o código por algumas horas eu vi que estava fazendo algo errado então consegui resolver o problema agora cada um move sua imagem para o lado que quiser, segue o código:

<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 &raquo;</button> 
</body> 
</html>

podem colocar como resolvido éra só umas mudancinhas que faltava para ficar 100% obrigado e até mais.

Entrar

(Resolvido) movimento da div estranho.

Pergunta

ktinho

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

ktinho

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades