Tema: Como se hace esta ventana
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 13/04/2011, 06:50
saul123
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 13 años, 8 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. <body>
  2. <div id="container">
  3. <h1>Ejemplo ventana flotante con movimineto</h1>
  4.     <div id="content">
  5.         <div id="box">
  6.         </div>
  7.     
  8.         <div id="vps_fixed_box">
  9.         <h2> Tu compra</h2>
  10.         <div class="box box-grey"><br />
  11.          <p>Camiseta : 300 €</p>
  12.         </div>
  13.         </div>
  14. </div>
  15.     </div>
  16. </div>
  17. </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