Foros del Web » Creando para Internet » HTML »

Como se hace esta ventana

Estas en el tema de Como se hace esta ventana en el foro de HTML en Foros del Web. Como se hace la ventana que se desplaza sobre la pagina pricipal, alguno sabe hacerlo? http://www.estudieenelexterior.com.co/new/scripts/contenidos/cnt.php?page=33&i=3 Saludos y mil gracias de anteamo...
  #1 (permalink)  
Antiguo 02/04/2011, 13:11
Avatar de riven  
Fecha de Ingreso: junio-2005
Mensajes: 15
Antigüedad: 12 años, 6 meses
Puntos: 0
Como se hace esta ventana

Como se hace la ventana que se desplaza sobre la pagina pricipal, alguno sabe hacerlo?

http://www.estudieenelexterior.com.co/new/scripts/contenidos/cnt.php?page=33&i=3

Saludos y mil gracias de anteamo
  #2 (permalink)  
Antiguo 02/04/2011, 22:01
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Como se hace esta ventana

Eso se hace en javascript, hay muchos scripts que te hacen ese efecto, solo es cosa de buscarlos. Googlea "javascript ventana deslizante scroll navegador", por ahí debería estar.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #3 (permalink)  
Antiguo 12/04/2011, 19:07
Avatar de riven  
Fecha de Ingreso: junio-2005
Mensajes: 15
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Como se hace esta ventana

Gracias por tu ayuda
  #4 (permalink)  
Antiguo 12/04/2011, 23:30
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
Respuesta: Como se hace esta ventana

hacelo con javascript la libreria Jquery tiene muchas funciones para hacer esas cosas..


saludos
  #5 (permalink)  
Antiguo 13/04/2011, 07:50
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Como se hace esta ventana

Hola a todos

aqui les dejo un ejemplo de este tipo de ventanas espero que les ayude .

Primero definimos nuestro html.
Código HTML:
Ver original
  1. <div id="container">
  2. <h1>Ejemplo ventana flotante con movimineto</h1>
  3.     <div id="content">
  4.         <div id="box">
  5.         </div>
  6.    
  7.         <div id="vps_fixed_box">
  8.         <h2> Tu compra</h2>
  9.         <div class="box box-grey"><br />
  10.          <p>Camiseta : 300 </p>
  11.         </div>
  12.         </div>
  13. </div>
  14.     </div>
  15. </div>
  16. </body>[


Despues nuestra css
Código CSS:
Ver original
  1. body{
  2.     font-family:Arial, Helvetica, sans-serif;
  3. }
  4. #content{
  5.     height:1800px;
  6.     background:#333;
  7.     width:1000px;
  8.     margin:0 auto 0 auto;
  9. }
  10. #container h1{
  11.    
  12.    
  13.    
  14. }
  15. #container h1{
  16.     background:#333;
  17.     height:100px;
  18.     width:1000px;
  19.     color:#FFF;
  20.     font-size:24px;
  21.     margin:0 auto 0 auto;
  22.     text-align:center;
  23.     padding-top:20px;
  24.    
  25.    
  26.    
  27. }
  28. #box{
  29.      
  30.      width:550px;
  31.      height:800px;
  32.      background:url(prueba.jpg) no-repeat;
  33.      float:left;
  34.      margin-left:40px;
  35.  }
  36.  #vps_fixed_box{
  37.      float:left;
  38.      margin-left:650px;
  39.      height:150px;
  40.      width:300px;
  41.      background:#FFF;
  42.      border:#999 solid 2px;
  43.      padding:10px;
  44.  
  45.  }
  46.  #vps_fixed_box h2{
  47.      background:url(euro.jpg) no-repeat;
  48.      height:30px;
  49.      padding-left:40px;
  50.      line-height:30px;
  51.  }


Y por ultimo nuestras funciones con jquery , en la parte que dice var paddingtop=120; al ser la ventana en position absolute esta ventana siempre quedara en la parte superior de nuestra pagina y con esta variante podemos controlar la posición
Código Javascript:
Ver original
  1. $(document).ready(function () {
  2.  
  3.    
  4.     // make the vps_fixed_box stay on screen
  5.     var vps_fixed_box = $("#vps_fixed_box");
  6.    
  7.         var wrapper = vps_fixed_box.parent().parent();
  8.         var paddingTop =120;
  9.         var offsetTop = wrapper.offset().top;
  10.         vps_fixed_box.css('position', 'absolute');
  11.         var tweak = 0;
  12.         if (! jQuery.support.cssFloat)
  13.             tweak = 30;
  14.         var bottomPos = wrapper.height() - vps_fixed_box.height() - offsetTop - tweak;
  15.  
  16.         if (bottomPos < 0)
  17.             bottomPos = 0;
  18.  
  19.         $(window).scroll(function () {
  20.             vps_fixed_box.stop();
  21.  
  22.             var pastStart = $(document).scrollTop() > offsetTop;
  23.             var pastTopPos = vps_fixed_box.offset().top > offsetTop;
  24.             var boxFits = vps_fixed_box.outerHeight() < $(window).height();
  25.  
  26.             if ((pastStart || pastTopPos) && boxFits) {
  27.                 var newpos = $(document).scrollTop() - offsetTop + paddingTop;
  28.                 if (newpos > bottomPos)
  29.                     newpos = bottomPos;
  30.                 if ($(document).scrollTop() < offsetTop)
  31.                     newpos = paddingTop;
  32.                 vps_fixed_box.animate({top: newpos}, 800);
  33.             }
  34.         });
  35.    
  36.  
  37. })


Nota: no olviden de agregar jquery-1.3.2.min .


Si quieren ver el ejemplo aqui se los dejo tambien Ejemplo funcionando

Etiquetas: ventanas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:17.