SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: odp77 en Domingo 20 de Abril de 2008, 22:26

Título: Objeto En Movimiento
Publicado por: odp77 en Domingo 20 de Abril de 2008, 22:26
Muy buenas gente del foro.

Estoy en desarrollo de un software contable y la cuestion es que quiero dejarle al alumno una calculadora cuando la necesite, la cosa es que necesito que la calculadora no se quede en un solo lugar, sino que sigua mientras se desplaza por la pagina.

Espero me puedan colaborar con un ejemplo.

Desde ya, muchas gracias.
Título: Re: Objeto En Movimiento
Publicado por: Mollense en Martes 22 de Abril de 2008, 03:42
Cita de: "odp77"
Muy buenas gente del foro.

Estoy en desarrollo de un software contable y la cuestion es que quiero dejarle al alumno una calculadora cuando la necesite, la cosa es que necesito que la calculadora no se quede en un solo lugar, sino que sigua mientras se desplaza por la pagina.

Espero me puedan colaborar con un ejemplo.

Desde ya, muchas gracias.
Se me ocurren un par de cosas pero no son muy prácticas.
¿No serviría una ventanita emergente? :think:
Título: Re: Objeto En Movimiento
Publicado por: odp77 en Martes 22 de Abril de 2008, 05:11
B) , no lo había pensado... puede ser también una buena solución...

Pero mi idea era dejarle una calculadora que lo sigua mientras desarrolla el ejercicio. Además de dejarla oculta que cuando la necesite, con un simple click aparezca.

pero tu idea como la implementaria? me podrias ayudar con un ejemplo?
Título: Re: Objeto En Movimiento
Publicado por: venedan en Martes 22 de Abril de 2008, 07:45
WTF  :o que ventana emergente ni que nada pana, para eso que pides hay un par de metodos en javascript que te lo permitira hacer y son estos dos:

objeto.style.top = document.body.scrollTop;
objeto.style.left = document.body.scrollLeft;


con eso hara que al mover el scroll de la pagina hacia abajo o hacia la derecha el objeto que en tu caso sera la calculadora siempre se mantendre visible en la posicion que le coloques
Título: Re: Objeto En Movimiento
Publicado por: Mollense en Martes 22 de Abril de 2008, 15:39
Esteeeeeeeee...
Claro, entendí mal, creí que necesitaba que estuviese disponible al moverse entre distintas páginas, no me di cuenta de que era al moverse por la misma página.

En fin, siendo así, existe una propiedad CSS para tal fin:
Código: Text
  1. position:fixed
  2.  
Pero recuerdo que había problemas relacionados a esta con Internet Explorer, no se como andarán con sus nuevas versiones.

EJ:
http://www.howtocreate.co.uk/fixedPosition.html (http://www.howtocreate.co.uk/fixedPosition.html)
Título: Re: Objeto En Movimiento
Publicado por: odp77 en Martes 22 de Abril de 2008, 17:21
Gracias muchachos por sus aportes.

Voy a aplicarlos y les comento como me fue.
Título: Re: Objeto En Movimiento
Publicado por: odp77 en Jueves 24 de Abril de 2008, 23:45
Cita de: "venedan"
WTF  :o que ventana emergente ni que nada pana, para eso que pides hay un par de metodos en javascript que te lo permitira hacer y son estos dos:

objeto.style.top = document.body.scrollTop;
objeto.style.left = document.body.scrollLeft;


con eso hara que al mover el scroll de la pagina hacia abajo o hacia la derecha el objeto que en tu caso sera la calculadora siempre se mantendre visible en la posicion que le coloques
Te cuento que me fue mal  :(

Tengo la calculadora en un tag div cuyo id lo llamo calculadora.

al principio de la pagina coloco lo que me dijiste asi:

Código: Text
  1.  
  2. calc = document.getElementById('calculadora');
  3. calc.style.top = document.body.scrollTop;
  4. calc.style.left = document.body.scrollLeft;
  5.  
  6.  
  7.  

Pero no ocurre nada  :blink:

No se que pueda estar haciendo mal, ojala me puedas colaborar.

Gracias.
Título: Re: Objeto En Movimiento
Publicado por: venedan en Viernes 25 de Abril de 2008, 00:41
por supuesto que no te va a ocurrir nada primero por lo que veo no estas llamando a la funcion tendrias que colocar algo como lo siguiente

<script language="javascript">

function calculadoraVisible() {
  var calc= document.getElementById("calculadora");
  calc.style.top = document.body.scrollTop;
  calc.style.left = document.body.scrollLeft;
}

window.onscroll = calculadoraVisible;

</script>
Título: Re: Objeto En Movimiento
Publicado por: odp77 en Sábado 26 de Abril de 2008, 00:52
Cita de: "venedan"
por supuesto que no te va a ocurrir nada primero por lo que veo no estas llamando a la funcion tendrias que colocar algo como lo siguiente

<script language="javascript">

function calculadoraVisible() {
  var calc= document.getElementById("calculadora");
  calc.style.top = document.body.scrollTop;
  calc.style.left = document.body.scrollLeft;
}

window.onscroll = calculadoraVisible;

</script>


Casi no me falto nada, jiji  :D

Pero ahora le cuento que cuando muevo la pagina, la calculadora se va automaticamente para arriba y la izquierda pero se queda ahí cuando muevo el scroll :blink: , lo probre en mozilla y en Explorer y nanai.
Título: Re: Objeto En Movimiento
Publicado por: venedan en Sábado 26 de Abril de 2008, 01:58
exactamente ese codigo hace que el objeto (en este caso la calculadora) se mantenga arriba y a la izquierda todo el tiempo incluso haciendo scroll en la pagina si quieres que se pocisione en otra direccion dale valores de suma o de resta por ejemplo document.body.scrolltop + 50; si en todo caso se te hace muy engorroso para colocarlo en la posicion que quieres haz lo que te dijo mollense le fijas un nombre al id y luego con css le colocas el atributo position a fixed
Título: Re: Objeto En Movimiento
Publicado por: odp77 en Lunes 19 de Mayo de 2008, 04:36
Cita de: "Mollense"
Esteeeeeeeee...
Claro, entendí mal, creí que necesitaba que estuviese disponible al moverse entre distintas páginas, no me di cuenta de que era al moverse por la misma página.

En fin, siendo así, existe una propiedad CSS para tal fin:
Código: Text
  1. position:fixed
  2.  
Pero recuerdo que había problemas relacionados a esta con Internet Explorer, no se como andarán con sus nuevas versiones.

EJ:
http://www.howtocreate.co.uk/fixedPosition.html (http://www.howtocreate.co.uk/fixedPosition.html)
Hey!  :whistling:

Gracias por tu aporte, era justo lo que necesitaba.  :comp:

10/10  :kicking:

 :smartass:  :lol: