Foros del Web » Programando para Internet » Javascript »

Tener una sección dinamica

Estas en el tema de Tener una sección dinamica en el foro de Javascript en Foros del Web. Hola me gustaria saber como puedo hacer esto: http://www.especializadosenaviarios.com/ La parte de oferats me gustaria saber como se hace, cada 5 segundos se cambia de ...
  #1 (permalink)  
Antiguo 29/04/2011, 04:31
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años, 9 meses
Puntos: 21
Tener una sección dinamica

Hola me gustaria saber como puedo hacer esto:

http://www.especializadosenaviarios.com/

La parte de oferats me gustaria saber como se hace, cada 5 segundos se cambia de oferta

Gracias
  #2 (permalink)  
Antiguo 29/04/2011, 07:35
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 228
Antigüedad: 13 años
Puntos: 27
Respuesta: Tener una sección dinamica

Definitivamente es JQUERY.
Si ves el codigo fuente de la página hay fragmentos de codigo como:

Código Javascript:
Ver original
  1. <style type="text/css">
  2. #special_slider ul, #special_slider li{
  3.     margin:0;
  4.     padding:0;
  5.     list-style:none;
  6.     }
  7. #special_slider, #special_slider li{
  8.     width:174px;
  9.     height:80px;
  10.     overflow:hidden;
  11.     }
  12. </style>
  13.  
  14. <script type="text/javascript">
  15. $(document).ready(function(){
  16.     var special_slider = new olcSlider({
  17.             speed: 800,
  18.             duration: 5000});
  19.      special_slider.init("special_slider");
  20. });
  21. </script>

Intentalo... si no puedes, buscaremos la manera....

Saludos,
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #3 (permalink)  
Antiguo 29/04/2011, 11:17
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años, 9 meses
Puntos: 21
Respuesta: Tener una sección dinamica

Hola, muchas gracias por tu respuesta mira he probado esto, me he bajado el .js de jquery y los tengo al mismo nivel del html

Código HTML:
Ver original
  1.  
  2. <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
  3. <style type="text/css">
  4. #special_slider ul,
  5. #special_slider li{    margin:0;    padding:0;    list-style:none;    }
  6. #special_slider,
  7. #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
  8. </style>
  9.  
  10. <script type="text/javascript">
  11. $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
  12. special_slider.init("special_slider");});
  13. </head>
  14.  
  15.  
  16. <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
  17. <a href="http://www.especializadosenaviarios.com/prices-drop.php" title="Ofertas">Ofertas</a></h4>
  18.  
  19. <div class="block_content">
  20.     <div  id="special_slider">
  21.         <ul style="">
  22.     <li style="padding: 3px 0px 3px 0px;">
  23.                  <a style="float:left" href="http://www.especializadosenaviarios.com/product.php?id_product=38"><img src="http://www.especializadosenaviarios.com/img/p/38-92-medium.jpg" alt="Incubadora Mg-70/100" title="Incubadora Mg-70/100" /></a>
  24.                    
  25. <div><h5><a href="http://www.especializadosenaviarios.com/product.php?id_product=38" title="Incubadora Mg-70/100">Incubadora Mg-70/100</a></h5>
  26.                    
  27.                                                     <div class="price-discount">720,00 </div>                    
  28.                             <div class="reduction">(-60.00&euro;)
  29.                         </div>  
  30.                      
  31.                     <span class="price">660,00 </span>
  32.         </div>
  33.                 </li>
  34.                 <li style="padding: 3px 0px 3px 0px;">
  35.                     <a style="float:left" href="http://www.especializadosenaviarios.com/product.php?id_product=41"><img src="http://www.especializadosenaviarios.com/img/p/41-108-medium.jpg" alt="Incubadora VRT- Manual" title="Incubadora VRT- Manual" /></a>
  36.                     <div><h5><a href="http://www.especializadosenaviarios.com/product.php?id_product=41" title="Incubadora VRT- Manual">Incubadora VRT- Manual</a></h5>
  37.                    
  38.                                                     <div class="price-discount">155,00 </div>                    
  39.                             <div class="reduction">(-25.00&euro;)
  40.                         </div>  
  41.                      
  42.                     <span class="price">130,00 </span></div>
  43.                 </li>
  44.                 <li style="padding: 3px 0px 3px 0px;">
  45.                     <a style="float:left" href="http://www.especializadosenaviarios.com/product.php?id_product=15"><img src="http://www.especializadosenaviarios.com/img/p/15-71-medium.jpg" alt="Bateria deJaulas de cria de 1 metro 4 alturas" title="Bateria de Jaulas de cria de 1 metro 4 alturas" /></a>
  46.                     <div><h5><a href="http://www.especializadosenaviarios.com/product.php?id_product=15" title="Bateria de Jaulas de cria de 1 metro 4 alturas">Bateria de Jaulas de cria de 1...</a></h5>
  47.                    
  48.                                                     <div class="price-discount">295,00 </div>                    
  49.                             <div class="reduction">(-15.00&euro;)
  50.                         </div>
  51.                        
  52.                      
  53.                     <span class="price">280,00 </span></div></li>
  54.  
  55.     </ul>
  56.         </div>
  57.         <p>
  58.             <a href="http://www.especializadosenaviarios.com/prices-drop.php" title="Ver Todas" class="button">Ver Todas</a>
  59.         </p>
  60.     </div>
  61. </div>
  62.  
  63.  
  64.  
  65. </body>
  66.  
  67. </html>

Me aparece la primera imagen pero no cambia

Saludos

Última edición por sirdaiz; 29/04/2011 a las 11:23
  #4 (permalink)  
Antiguo 30/04/2011, 06:36
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años, 9 meses
Puntos: 21
Respuesta: Tener una sección dinamica

alguna ayuda ¿?
  #5 (permalink)  
Antiguo 02/05/2011, 07:17
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 228
Antigüedad: 13 años
Puntos: 27
Respuesta: Tener una sección dinamica

Hola, perdon... fines de semana no toco la compu y hasta ahora vi tu msj.

Ya analice tu codigo y te falto esto:
<script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>


Tambien, si puedes cambiar esta linea:
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>

Por esta otra:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>

Saludos!!!!
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #6 (permalink)  
Antiguo 04/05/2011, 02:07
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años, 9 meses
Puntos: 21
Respuesta: Tener una sección dinamica

Hola Pablo al final probe eso pero no funciono, estoy probando algo mas sencillo, tengo textos metidos dentro de un div, pero quiero que cada cierto tiempo cambie pero sigue sin funcionarme el codigo es este

Código HTML:
Ver original
  1.  
  2.       <head>
  3.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
  4.  
  5.  
  6.       <style type="text/css">
  7.  
  8.       #special_slider ul,
  9.  
  10.       #special_slider li{    margin:0;    padding:0;    list-style:none;    }
  11.  
  12.       #special_slider,
  13.  
  14.       #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
  15.  
  16.       </style>
  17.  
  18.       <script type="text/javascript">
  19.  
  20.       $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
  21.  
  22.       special_slider.init("special_slider");});
  23.  
  24.       </script>
  25.  
  26.       </head>
  27.  
  28.       <body>
  29.  
  30.       <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
  31.  
  32.         <div class="block_content">
  33.  
  34.             <div  id="special_slider">
  35.  
  36.               <ul style="">
  37.                     <li style="padding: 3px 0px 3px 0px;">
  38.                         <div class="price-discount">Hola el precio final es:200,00 </div>  
  39.                     </li>
  40.  
  41.                     <li style="padding: 3px 0px 3px 0px;">
  42.                         <div class="price-discount">Hola el precio inicial es:155,00 </div>                    
  43.                     </li>
  44.  
  45.                     <li style="padding: 3px 0px 3px 0px;">
  46.                         <div class="price-discount">Hola el medio es:185,00 </div>      
  47.                     </li>
  48.                 </ul>
  49.  
  50.              </div>
  51.  
  52.           </div>
  53.  
  54.       </div>
  55.  
  56.       </body>
  57.  
  58.       </html>

Muchas gracias por tu ayuda

Saludos
  #7 (permalink)  
Antiguo 04/05/2011, 15:20
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 228
Antigüedad: 13 años
Puntos: 27
Respuesta: Tener una sección dinamica

Seguro?......
Yo copie tu codigo y lo probe... y si me funciono sin ningun problema....
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #8 (permalink)  
Antiguo 04/05/2011, 15:25
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años, 9 meses
Puntos: 21
Respuesta: Tener una sección dinamica

Hola Ayala nuevamnt mil gracias, el ultimo codigo q escribi tengo 3 divs con textos diferentes dentro de otro div, si quiero que cambie cada cierto tiempo el contenido del div principal, no se si m entiendes lo q te quiero decir, probe el codigo ultimo y no m funciona ni en ie ni firefox

Saludos
  #9 (permalink)  
Antiguo 04/05/2011, 20:03
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 12 años, 10 meses
Puntos: 87
Respuesta: Tener una sección dinamica

Ese es uno de los efectos mas faciles de hacer en jQuery

Código Javascript:
Ver original
  1. setInterval(function(){
  2. var moverse =  $("#contenedor").height() * -1;
  3. $("#contenedor .cuadro:first").animate( {"margin-top":moverse},     300,    function(){$(this).css("margin-top",0).appendTo($(this).parent())}) }
  4. ,3000)

Si lo quieren ver funcionando con el CSS/HTML y con comentarios aqui esta:
http://jsfiddle.net/jhBPW/
  #10 (permalink)  
Antiguo 04/05/2011, 20:14
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 12 años, 10 meses
Puntos: 87
Respuesta: Tener una sección dinamica

Si quieren que sea una bola en vez de un cuadrado simplemente cambien el css

Código CSS:
Ver original
  1. #contenedor {
  2.     width:300px;
  3.     height:300px;
  4.     overflow:hidden;
  5.     -webkit-border-radius: 150px;
  6.     -moz-border-radius: 150px;
  7.     border-radius: 150px;
  8. }
  9.  
  10. .cuadro {
  11.     width:100&#37;;
  12.     padding-top:40%;
  13.     height:60%;
  14.     font-family:Arial, Helvetica, sans-serif;
  15.     overflow:hidden;
  16.     text-align:center;
  17. }

jajaja Una rumba! http://jsfiddle.net/jhBPW/1/

Sirve en todos los ultimos exploradores! (si quieren que sirva en viejos solo es usar css3pie)

mmm... experimentando me doy cuenta que esto puede llegar a ser bastante interesante http://jsfiddle.net/3usGC/!

Última edición por InKarC; 04/05/2011 a las 20:35
  #11 (permalink)  
Antiguo 05/05/2011, 06:25
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 228
Antigüedad: 13 años
Puntos: 27
Respuesta: Tener una sección dinamica

Hola probe el código de InKarC y tb me funciono... puedes tomar cualquier alternativa... si tomas la mia....

Asi debe quedar tu pagina:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.       <head>
  5.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
  6. <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>
  7.  
  8.       <style type="text/css">
  9.  
  10.       #special_slider ul,
  11.  
  12.       #special_slider li{    margin:0;    padding:0;    list-style:none;    }
  13.  
  14.       #special_slider,
  15.  
  16.       #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
  17.  
  18.       </style>
  19.  
  20.       <script type="text/javascript">
  21.  
  22.       $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
  23.  
  24.       special_slider.init("special_slider");});
  25.  
  26.       </script>
  27.  
  28.       </head>
  29.  
  30.       <body>
  31.  
  32.       <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
  33.  
  34.         <div class="block_content">
  35.  
  36.             <div  id="special_slider">
  37.  
  38.               <ul style="">
  39.                     <li style="padding: 3px 0px 3px 0px;">
  40.                         <div class="price-discount">Hola el precio final es:200,00 </div>  
  41.                     </li>
  42.  
  43.                     <li style="padding: 3px 0px 3px 0px;">
  44.                         <div class="price-discount">Hola el precio inicial es:155,00 </div>                    
  45.                     </li>
  46.  
  47.                     <li style="padding: 3px 0px 3px 0px;">
  48.                         <div class="price-discount">Hola el medio es:185,00 </div>      
  49.                     </li>
  50.                 </ul>
  51.  
  52.              </div>
  53.  
  54.           </div>
  55.  
  56.       </div>
  57.  
  58.       </body>
  59.  
  60.       </html>

PD falta darle orden... jejeje
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #12 (permalink)  
Antiguo 05/05/2011, 08:01
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años, 9 meses
Puntos: 21
Respuesta: Tener una sección dinamica

wow fabuloso, he probado los 2 y van perfectos, excepto falta un matiz pablo,es decir,te falto en el codigo agregar:

<li style="padding: 3px 0px 3px 0px;">

y sobra :

<script src="http://www.especializadosenaviarios.com/modul/blockspecialscarouseljsolcSlider.js" type="text/javascript"></script>

pero muchas gracias por tu ayuda pablo con eso ya puedo poner lo que quiera en el div,sin ti no se q hubiera hecho xD

Con la respuesta de Inkarc, otra respuesta muy buena y sobre todo los link muy buenos e intersantes para hacer cosas con jquery, muchas gracias

PD:ahi unos karma por vuestra ayuda

Saludos
  #13 (permalink)  
Antiguo 05/05/2011, 13:01
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 12 años, 10 meses
Puntos: 87
Respuesta: Tener una sección dinamica

Si va a usar la version que posteo Pablo Ayala lo mejor es que descargue el archivo javascript y lo monte en su servidor, ya que ese lo pueden quitar/cambiar en cualquier

Me refiero a este:

Código HTML:
Ver original
  1. <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>

El objecto "olcSlider" esta en ese archivo por lo que si no lo linkea no funciona.
  #14 (permalink)  
Antiguo 05/05/2011, 22:28
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 228
Antigüedad: 13 años
Puntos: 27
Respuesta: Tener una sección dinamica

Cita:
Iniciado por InKarC Ver Mensaje
Si va a usar la version que posteo Pablo Ayala lo mejor es que descargue el archivo javascript y lo monte en su servidor, ya que ese lo pueden quitar/cambiar en cualquier

Me refiero a este:

Código HTML:
Ver original
  1. <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>

El objecto "olcSlider" esta en ese archivo por lo que si no lo linkea no funciona.

Tienes toda la razon....

Saludos!
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #15 (permalink)  
Antiguo 06/05/2011, 01:18
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 7 años, 9 meses
Puntos: 21
Respuesta: Tener una sección dinamica

Bueno os voy a poner el codigo de Pablo e Inkarc, de los cuales los 2 me funcionan perfectamente por si a alguien le sirve

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.       <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5.             <head>
  6.  
  7.               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
  8.  
  9.      <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>
  10.  
  11.             <style type="text/css">
  12.  
  13.             #special_slider ul,
  14.  
  15.             #special_slider li{    margin:0;    padding:0;    list-style:none;    }
  16.  
  17.             #special_slider,
  18.  
  19.             #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
  20.  
  21.             </style>
  22.  
  23.             <script type="text/javascript">
  24.  
  25.             $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
  26.  
  27.             special_slider.init("special_slider");});
  28.  
  29.             </script>
  30.  
  31.             </head>
  32.  
  33.             <body>
  34.  
  35.             <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
  36.  
  37.               <div class="block_content">
  38.  
  39.                   <div  id="special_slider">
  40.  
  41.                     <ul style="">
  42.  
  43.                           <li style="padding: 3px 0px 3px 0px;">
  44.  
  45.                               <div class="price-discount">Hola el precio final es:200,00 </div>  
  46.  
  47.                           </li>
  48.  
  49.                           <li style="padding: 3px 0px 3px 0px;">
  50.  
  51.                               <div class="price-discount">Hola el precio inicial es:155,00 </div>                    
  52.  
  53.                           </li>
  54.  
  55.                             <li style="padding: 3px 0px 3px 0px;">
  56.                               <div class="price-discount">Hola el medio es:185,00 </div>      
  57.  
  58.                           </li>
  59.  
  60.                       </ul>
  61.  
  62.                    </div>
  63.  
  64.                 </div>
  65.  
  66.             </div>
  67.  
  68.             </body>
  69.  
  70.             </html>


y el de Inkarc

Código HTML:
Ver original
  1.  
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
  3.  
  4.  <style type="text/css">
  5. #contenedor, .cuadro {
  6.     margin:0;
  7.     padding:0;
  8. }
  9.  
  10. #contenedor {
  11.     width:300px;
  12.     height:300px;
  13.     overflow:hidden;
  14. }
  15.  
  16. .cuadro {
  17.     width:100%;
  18.     height:100%;
  19.     font-family:Arial, Helvetica, sans-serif;
  20.     overflow:hidden;        
  21. }
  22.  </style>
  23.  
  24.             <script type="text/javascript">
  25.            
  26.             setInterval(function(){
  27. var moverse =  $("#contenedor").height() * -1 //Cuanto se tiene que mover cada cuadro, o sea el alto del #contenedor multiplicado por -1 (para que se mueva para arriba)
  28.  
  29.     $("#contenedor .cuadro:first").animate(
  30.         {"margin-top":moverse},  //que el margin-top sea el valor dado
  31.         300, // lo que dura la animacion en milisegundos = 0.3 segundos
  32.         function(){ // La funcion que se ejecuta cuando termina de animarse
  33.         $(this).css("margin-top",0).appendTo($(this).parent())})  // Que el margin-top vuelva a 0 al terminarse y que lo coloca al final del padre
  34.  
  35. },3000)
  36.  
  37.  
  38. </head>
  39. <div id="contenedor">
  40. <div class="cuadro" style="background-color:#F90">Contenido total</div>
  41. <div class="cuadro" style="background-color:#CCC">Contenido total</div>
  42. <div class="cuadro" style="background-color:#9C0">Contenido total</div>
  43. <div class="cuadro" style="background-color:#FC0">Contenido total</div>
  44. </div>
  45. </body>
  46. </html>


La única cuestión es que si algun dai la pagina donde aparece este codigo deja de funcionar,supongo que tampoco funcionaria la sección dinamica

Código HTML:
Ver original
  1. <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>
Podria obtener la libreria olcSlider de otra forma?,es decir susituir ese codigo,especialmente www.especializadosenaviarios ya q no es pagina mia ni nada


Gracias nuevamente por vuestra ayuda

Saludos
  #16 (permalink)  
Antiguo 06/05/2011, 02:32
Avatar de babri  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Tener una sección dinamica

yo estoy buscando algo parecido pero en vez de que vaya cambiando cada X segundos que lo haga cuando recargues la página, vaya que salga aleatoriamente pero lo que quiero que cambie es donde pone club coolaboro:

http://beta.coolaboro.com/pruebas/

que cambie la foto de la persona y su comentario.
a ver si me podéis echar un cablecito.
muchas gracias! :D

PD: ya la he hecho con jacascript ^^

Última edición por babri; 06/05/2011 a las 11:27

Etiquetas: dinamica
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 20:54.