Problema al mover elemento

[_cronos2]

Otra duda Ahora estoy haciendo una función que me mueva un elemento desde un lugar (left, top, right o bottom) n px. En principio no hay problema cuando el parámetro es left o top, pero con los otros dos sí. Posteo el código y os pediría que lo probaráis porque no sé explicar muy bien el problema XD :

Código Javascript:

// ...
  posicion : function(donde){
   var left = this.offsetLeft, top = this.offsetTop, padre = this.offsetParent, body = P(document.body);
   while(!/(body|html)/i.test(padre.tagName)){
    left += padre.offsetLeft;
    top += padre.offsetTop;
    padre = padre.offsetParent;
   }
   return {
    'left' : left,
    'right' : body.getStyle('width').match(/\d+/)[0]-left,
    'top' : top,
    'bottom' : body.getStyle('height').match(/\d+/)[0]-top
   }[donde];
  },
  // el problema está en mover
  mover : function(desde, cuanto){
   var obj = { 'left' : 'right', 'top' : 'bottom', 'right' : 'left', 'bottom' : 'top' };
   var estilo = P(this).css('height', P(this).getStyle('height')).css('width', P(this).getStyle('width')).posicion(desde);
   return P(this).css('position', 'absolute').css(obj[desde], 'auto').css(desde, parseFloat(estilo + cuanto) + 'px');
  },
// ...
 

Saludos y gracias :D

[ocp001a]

La verdad me da pereza hacer un código que llame a tu función para probar qué está mal, preferiría que lo explicaras aunque creas que lo explicas mal.

Pero imagino que se trata de que el objeto cuando lo mueves abajo o a la derecha no aparece donde quieres exactamente. De ser así, recuerda que debes saber cuánto mide el objeto de ancho y alto, y restar dichas medidas cuando lo vas a posicionar en uno de estos lugares.

[_cronos2]

Te paso la página para que lo veas.
Saludos y gracias :D

[ocp001a]

Pues tal como esta el código, es normal que haga cosas raras.
Con el onmouseover lo mueve hacia el top, pero otra instrucción dice que en el onmouseout se mueva al bottom. Técnicamente son contradictorias ambas instrucciones.

¿Qué es lo que quieres hacer? por que así en el ejemplo la imagen no dejaría de brincar

[_cronos2]

Bueno ya conseguí solucionarlo para FF y Chrome, pero como siempre IE da problemas
El código está así:

Código Javascript:

// Le añadí la opción de ponerle tiempo
  mover : function(desde, cuanto, tiempo){
   var obj = { 'right' : 'left', 'bottom' : 'top' }, str = desde in obj ? obj[desde] : desde, multip = str == desde ? 1 : -1;
   var resta = { 'left' : 'width', 'top' : 'height' }[str];
   var n = cuanto - P(this).getStyle(resta).Numeros();
   var estilo = P(this).css('position', 'absolute').css(resta, P(this).getStyle(resta)).posicion(str);
   if(!tiempo){
    return P(this).css(str, parseFloat(estilo + cuanto * multip) + 'px');
   }else{
    var incr = cuanto / (tiempo / 20), obj = P(this), timer = setInterval(function(){
     if(obj.posicion(str) >= estilo + cuanto){
      timer = clearInterval(timer);
      return obj;
     }else{
      obj.css(str, parseFloat(obj.posicion(str) + incr * multip) + 'px');
     }
    }, 20);
   }
  },
// ...
 

Sin embargo, en IE me da error en la función posicion :

Código Javascript:

// ...
  posicion : function(donde){
   var left = this.offsetLeft, top = this.offsetTop, padre = this.offsetParent, body = P(document.body);
   while(!/(body|html)/i.test(padre.tagName)){
    left += padre.offsetLeft;
    top += padre.offsetTop;
    padre = padre.offsetParent;
   }
   return {
    'left' : left,
    'right' : body.getStyle('width').match(/\d+/)[0]-left,
    'top' : top,
    'bottom' : body.getStyle('height').match(/\d+/)[0]-top
   }[donde];
  },
// ...
 

Haciendo pruebas resulta que el error está en

Código Javascript:

'right' : body.getStyle('width').match(/\d+/)[0]-left,
 

porque devuelve auto.
¿Cómo puedo averiguar cuánto mide el body (y todos los demás porque siempre me devuelve auto -.-') ?
Saludos (:

[zerokilled]

que tal...

desgraciadamente iexplorer tiene el inconveniente de que al leer el valor computado -cuando no se le asigna un valor- devuelve auto. en realidad auto es el valor por defecto en algunas propiedades pero lo que uno espera es el valor computado no el valor por defecto. intenta con la propiedad offsetWidth.

[_cronos2]

Muchas gracias @ZK, conseguí solucionarlo como dijiste:

Código Javascript:

// ...
  mover : function(desde, cuanto, tiempo){
   var obj = { 'right' : 'left', 'bottom' : 'top' }, str = desde in obj ? obj[desde] : desde, multip = str == desde ? 1 : -1;
   var resta = { 'left' : 'width', 'top' : 'height' }[str], tam = P(this)['offset' + resta.capitalize()];
   var n = cuanto - tam;
   var estilo = P(this).css('position', 'absolute').css(resta, tam).posicion(str);
   if(!tiempo){
    return P(this).css(str, parseFloat(estilo + cuanto * multip) + 'px');
   }else{
    var incr = cuanto / (tiempo / 20), obj = P(this), timer = setInterval(function(){
     if(obj.posicion(str) >= estilo + cuanto){
      timer = clearInterval(timer);
      return obj;
     }else{
      obj.css(str, parseFloat(obj.posicion(str) + incr * multip) + 'px');
     }
    }, 20);
   }
  },
// ...
 

Sin embargo ahora se me plantea otra duda. ¿Cómo puedo hacer que al moverlo, rebote y vuelve hacia atrás? Algo como esto (al pasar por encima de los items del menú). He probado así pero ni se acerca XD

Código Javascript:

// ...
  rebote : function(desde, cuanto, tiempo){
   var este = P(this), inverso = {'left' : 'right', 'top' : 'bottom' };
   var obj = { 'right' : 'left', 'bottom' : 'top' }, str = desde in obj ? obj[desde] : desde;
   var resta = { 'left' : 'width', 'top' : 'height' }[str], tam = P(this)['offset' + resta.capitalize()];
   var estilo = este.css('position', 'absolute').css(resta, tam).posicion(str);
   var incr = (cuanto * 1.1 / (tiempo * 11/12)) * 20, timer = setInterval(function(){
    if(este.posicion(str) >= estilo + cuanto * 1.1){ timer = clearInterval(timer); return este; }
    else{
     este.css(str, parseFloat(este.posicion(str) + incr) + 'px');
    }
   }, 20);
   incr = (cuanto * -0.1 / (tiempo * 1/12)) * 20, timer = setInterval(function(){
    if(este.posicion(inverso[desde] || obj[desde]) <= estilo + cuanto){ timer = clearInterval(timer); return este; }
    else{
     este.css(str, parseFloat(este.posicion(str) + incr) + 'px');
    }
   }, 20);
  },
// ...
 

Saludos!