Es imposible?

ana_ramirez · #1 (**permalink**) 06/12/2008, 13:33

Hola a todos

Quiero mover un div en la pantalla y para ello dispongo del siguiente codigo, que funciona correctamente en FF y en IE pero cuando incorporo un vinculo dentro del Div al pararme soble el vinculo la velocidad del movimiento del div varia y yo no quiero que esta se afecte.
Alguien puede ayudarme? Alguien sabe como hacerlo?
con saludos y respeto
Ana

El codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.propiedades {
position:absolute;
top:10px;
left:10px;
width:322px;
height:198px;
border:1px solid #000;
background-color:#f00;
}
</style>

<script type="text/javascript">

var c=10; /* intial starting position - equal to set css value */
var distance=400; /* a higher value produces a greater distance */
var speed=10; /* a higher value produces a slower speed */

function movediv(){
document.getElementById('mydiv').style.left=c+'px' ;
if(c>distance) {
clearTimeout(move);
return;
}
c++;
move=setTimeout('movediv()',speed);
}
</script>

</head>
<body>

<div class="propiedades" id="mydiv" onMouseOver="movediv()"><a href="#">aaaaaaa</a></div>

</body>
</html>

Panino5001 · #2 (**permalink**) 06/12/2008, 13:40

No es por el vínculo. Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
 
<style type="text/css"> 
.propiedades { 
position:absolute; 
top:10px; 
left:10px; 
width:322px; 
height:198px; 
border:1px solid #000; 
background-color:#f00; 
} 
</style> 
 
<script type="text/javascript"> 
 
var c=10; /* intial starting position - equal to set css value */ 
var distance=400; /* a higher value produces a greater distance */ 
var speed=10; /* a higher value produces a slower speed */ 
 
 
function movediv(){ 
document.getElementById('mydiv').onmouseover=function(){} 
document.getElementById('mydiv').style.left=c+'px' ; 
if(c>distance) { 
clearTimeout(move); 
return; 
} 
c++; 
move=setTimeout('movediv()',speed); 
} 
onload=function(){ 
    document.getElementById('mydiv').onmouseover=movediv; 
} 
</script> 
 
</head> 
<body> 
 
<div class="propiedades" id="mydiv"><a href="#">aaaaaaa</a></div> 
 
 
</body> 
</html>

ana_ramirez · #3 (**permalink**) 06/12/2008, 13:50

Gracias....!!! me funciona perfecto
Si quisiera regresar el div a su posicion original cuando el mause esta fuera del div... que tendria que hacer?
disculpa que te responda con otra pregnta.

Panino5001 · #4 (**permalink**) 06/12/2008, 13:53

Podrías asignar en el mismo onload un evento onmouseout que llame a otra función que reste en lugar de sumar a la propiedad left o bien (en caso de que no necesites que sea animado el regreso) que establezca directamente la propiedad left en un sólo paso al valor que necesites.

ana_ramirez · #5 (**permalink**) 06/12/2008, 14:03

Me gustaria que fuera animado pero... algo asi no me esta funcionando

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.propiedades {
position:absolute;
top:10px;
left:10px;
width:322px;
height:198px;
border:1px solid #000;
background-color:#f00;
}
</style>

<script type="text/javascript">

var c=10; /* intial starting position - equal to set css value */
var distance=400; /* a higher value produces a greater distance */
var speed=10; /* a higher value produces a slower speed */

function movediv(){
document.getElementById('mydiv').onmouseover=funct ion(){}
document.getElementById('mydiv').style.left=c+'px' ;
if(c>distance) {
clearTimeout(move);
return;
}
c++;
move=setTimeout('movediv()',speed);
}

function movedivre(){
document.getElementById('mydiv').onmouseout=functi on(){}
document.getElementById('mydiv').style.left=c+'px' ;
if(c>distance) {
clearTimeout(move);
return;
}
c--;
move=setTimeout('movediv()',speed);
}
onload=function(){
document.getElementById('mydiv').onmouseover=moved iv;
document.getElementById('mydiv').onmouseout=movedi vre;
}
</script>

</head>
<body>

<div class="propiedades" id="mydiv" onMouseOver="movediv()" onMouseOut="movedivre()"><a href="#">aaaaaaa</a></div>

</body>
</html>

que estoy haciendo mal?

Panino5001 · #6 (**permalink**) 06/12/2008, 15:08

Fijate si es esto lo que necesitás:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.propiedades {
position:absolute;
top:10px;
left:10px;
width:322px;
height:198px;
border:1px solid #000;
background-color:#f00;
}
</style>

<script type="text/javascript">

var c=10; /* intial starting position - equal to set css value */
var distance=400; /* a higher value produces a greater distance */
var speed=10; /* a higher value produces a slower speed */
var move,move2;
function movediv(){
clearTimeout(move2);
document.getElementById('mydiv').onmouseover=function(){}
document.getElementById('mydiv').onmouseout=movediv2;
document.getElementById('mydiv').style.left=c+'px' ;
if(c>distance) {
clearTimeout(move);
return;
}
c++;
move=setTimeout(movediv,speed);
}
function movediv2(){
clearTimeout(move);
document.getElementById('mydiv').onmouseout=function(){}
document.getElementById('mydiv').onmouseover=movediv;
document.getElementById('mydiv').style.left=c+'px' ;
if(c<10) {
clearTimeout(move2);
return;
}
c--;
move2=setTimeout(movediv2,speed);
}
onload=function(){
    document.getElementById('mydiv').onmouseover=movediv;
    document.getElementById('mydiv').onmouseout=movediv2;
}
</script>

</head>
<body>

<div class="propiedades" id="mydiv"><a href="#">aaaaaaa</a></div>


</body>
</html>

Edito por error en explorer

ana_ramirez · #7 (**permalink**) 06/12/2008, 15:19

SIIIIIIIIIIIIIII....
Graciasssssssssssssssss
Eres un barbaro
que la buena suerte te acompanes siempre