Foros del Web » Programando para Internet » Jquery »

Header JQuery

 Estas en el tema de Header JQuery en el foro de Jquery en Foros del Web. Que tal, alguien sabra como hacer este header http://www.elegantthemes.com/preview/TheSource/, pero para web php o html, ese theme es para wordpress, pero me llamo la atencion ...
  #1 (permalink)  
Antiguo 19/05/2011, 02:59
 
Fecha de Ingreso: octubre-2010
Ubicación: Mexico
Mensajes: 19
Antigüedad: 14 años
Puntos: 0
Header JQuery
Que tal, alguien sabra como hacer este header http://www.elegantthemes.com/preview/TheSource/, pero para web php o html, ese theme es para wordpress, pero me llamo la atencion el header y me gustaria poner uno similar en mi web, lo que se es que es JQuery, espero puedan ayudarme.
  #2 (permalink)  
Antiguo 19/05/2011, 08:56
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Header JQuery
te cree una guia/explicación

basicamente es hacer un loop y trabajar con un div para ocultarlo, mover al siguiente y mostrarlo, dejando una bandera que en este caso seria el de la clase .visible por eso el addClass y removeClass

Código Javascript: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Ejemplo</title>
  4.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  5.  
  6.         <script>
  7.  
  8.     $(function() {
  9.         //Opacidad 0 a los div que no tenga clase .visible
  10.         $('#slider .seccion.visible').siblings('.seccion').animate({opacity: 0}, 0);
  11.  
  12.         //Ejecuto funcion slider
  13.         slider();
  14.  
  15.         function slider(){
  16.             //Selecciono el div con clase .visible
  17.             $('#slider .seccion.visible')
  18.             //Para que permanezca visible la seccion hago un delay con la cantidad de segundos que se quiera mantener
  19.             .delay(3000)
  20.             //Luego del delay realizo la animación que es darle una opacidad a 0
  21.             .animate({opacity: 0}, 500, function(){
  22.                 //Cuando termina la animación le borro la clase visible
  23.                 $(this).removeClass('visible');
  24.                 //Selecciono el div que se encuentra a continuación del div con el que se está trabajando
  25.                 siguiente = $(this).next();
  26.                 //Si no encuentra un div es porque se está trabajando soble el último div, entonces selecciono el primero
  27.                 if (!siguiente.length)
  28.                     siguiente = $('#slider .seccion:eq(0)');
  29.                 //Le agrego la clase visible y le doy opacidad para que se muestre
  30.                 siguiente.addClass('visible').animate({opacity: 1}, 500);
  31.                 //Vuelvo a ejecutar la función slider();
  32.                 slider();
  33.             });
  34.         }
  35.  
  36.     });
  37.  
  38.  
  39.         </script>
  40.  
  41.     <style>
  42.         #slider { background:#000; position:relative }
  43.         #slider, .seccion{ height:100px;}
  44.         .seccion{ position:absolute; width:100&#37;}
  45.         .uno { background:red }
  46.         .dos { background:blue }
  47.         .tres { background:green }
  48.         .cuatro{ background:yellow}
  49.         h1{margin:0}
  50.     </style>
  51.  
  52. </head>
  53. <body>
  54.  
  55.  
  56.     <div id="slider">
  57.         <div class="seccion uno visible">
  58.             <h1>Secci&#243;n Uno</h1>
  59.         </div>
  60.         <div class="seccion dos">
  61.             <h1>Secci&#243;n Dos</h1>
  62.         </div>
  63.         <div class="seccion tres">
  64.             <h1>Secci&#243;n Tres</h1>
  65.         </div>
  66.         <div class="seccion cuatro">
  67.             <h1>Secci&#243;n Cuatro</h1>
  68.         </div>
  69.     </div>
  70.  
  71. </body>
  72. </html>


Pero puedes buscar algún plugin si no lo puedes adaptar a tus necesidades
Última edición por Dany_s; 19/05/2011 a las 09:03
  #3 (permalink)  
Antiguo 19/05/2011, 20:15
 
Fecha de Ingreso: octubre-2010
Ubicación: Mexico
Mensajes: 19
Antigüedad: 14 años
Puntos: 0
Respuesta: Header JQuery
Cita:
Iniciado por Dany_s Ver Mensaje
te cree una guia/explicación

basicamente es hacer un loop y trabajar con un div para ocultarlo, mover al siguiente y mostrarlo, dejando una bandera que en este caso seria el de la clase .visible por eso el addClass y removeClass

Código Javascript: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Ejemplo</title>
  4.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  5.  
  6.         <script>
  7.  
  8.     $(function() {
  9.         //Opacidad 0 a los div que no tenga clase .visible
  10.         $('#slider .seccion.visible').siblings('.seccion').animate({opacity: 0}, 0);
  11.  
  12.         //Ejecuto funcion slider
  13.         slider();
  14.  
  15.         function slider(){
  16.             //Selecciono el div con clase .visible
  17.             $('#slider .seccion.visible')
  18.             //Para que permanezca visible la seccion hago un delay con la cantidad de segundos que se quiera mantener
  19.             .delay(3000)
  20.             //Luego del delay realizo la animación que es darle una opacidad a 0
  21.             .animate({opacity: 0}, 500, function(){
  22.                 //Cuando termina la animación le borro la clase visible
  23.                 $(this).removeClass('visible');
  24.                 //Selecciono el div que se encuentra a continuación del div con el que se está trabajando
  25.                 siguiente = $(this).next();
  26.                 //Si no encuentra un div es porque se está trabajando soble el último div, entonces selecciono el primero
  27.                 if (!siguiente.length)
  28.                     siguiente = $('#slider .seccion:eq(0)');
  29.                 //Le agrego la clase visible y le doy opacidad para que se muestre
  30.                 siguiente.addClass('visible').animate({opacity: 1}, 500);
  31.                 //Vuelvo a ejecutar la función slider();
  32.                 slider();
  33.             });
  34.         }
  35.  
  36.     });
  37.  
  38.  
  39.         </script>
  40.  
  41.     <style>
  42.         #slider { background:#000; position:relative }
  43.         #slider, .seccion{ height:100px;}
  44.         .seccion{ position:absolute; width:100%}
  45.         .uno { background:red }
  46.         .dos { background:blue }
  47.         .tres { background:green }
  48.         .cuatro{ background:yellow}
  49.         h1{margin:0}
  50.     </style>
  51.  
  52. </head>
  53. <body>
  54.  
  55.  
  56.     <div id="slider">
  57.         <div class="seccion uno visible">
  58.             <h1>Sección Uno</h1>
  59.         </div>
  60.         <div class="seccion dos">
  61.             <h1>Sección Dos</h1>
  62.         </div>
  63.         <div class="seccion tres">
  64.             <h1>Sección Tres</h1>
  65.         </div>
  66.         <div class="seccion cuatro">
  67.             <h1>Sección Cuatro</h1>
  68.         </div>
  69.     </div>
  70.  
  71. </body>
  72. </html>


Pero puedes buscar algún plugin si no lo puedes adaptar a tus necesidades
Justo eso es Dany, pero como se agrega lo de atras o adelante, para yo poder mover a la seccion que yo quiera?
  #4 (permalink)  
Antiguo 19/05/2011, 21:22
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 19 años
Puntos: 87
Respuesta: Header JQuery
Aqui se esta para aprender, asi que unas pequeñas criticas sobre el codigo de Dany_s.


--''----''----''----''----''----''----''--

Cita:
$('#slider .seccion.visible').siblings('.seccion').animate({o pacity: 0}, 0);
Esta volviendo invicible los divs con una funcion que no fue destinada para ello; y ya que lo esta haciendo con javascript (jQuery) si la pagina se demora en cargar las imagenes se van a ver hay "tiradas".

Lo mejor es hacerlo en CSS y asi evitar esto.

Código CSS: 
Ver original
  1. .seccion{
  2.     filter: alpha(opacity=0); 
  3.     -moz-opacity: 0;       
  4.     opacity: 0;          
  5. }
  6.  
  7. .visible{
  8.     filter: alpha(opacity=100); 
  9.     -moz-opacity: 1;       
  10.     opacity: 1;          
  11. }

--''----''----''----''----''----''----''--

Si llega a colocar un boton en cada div el boton NO funcionara (bueno, solo uno) ya que el elemento html sigue presente ya que bajo la opacidad a cero pero todavia esta activo. lo que debio hacer era un "display:none" (o en jQuery .hide())

--''----''----''----''----''----''----''--

Esta usando .delay para hacer el retraso por lo que la personalizacion/modificacion de tiempos y demas es casi nula. Lo mejor es usar setTimeout o setInterval
Última edición por InKarC; 19/05/2011 a las 22:02
  #5 (permalink)  
Antiguo 19/05/2011, 22:03
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 19 años
Puntos: 87
Respuesta: Header JQuery
Ahora mi version:

Código Javascript: 
Ver original
  1. $(function(){
  2.     rotacion()  
  3. })
  4.  
  5. function rotacion(){
  6.     setInterval(
  7.         function(){
  8.             $("#slider div").hide()
  9.             $("#slider div:first")
  10.                 .show()
  11.                 .css("opacity",0)
  12.                 .animate({opacity:1},400)
  13.                 .appendTo("#slider")
  14.     },2000)
  15. }

Lo puede ver funcionando aca http://jsfiddle.net/Ju48Z/
Última edición por InKarC; 19/05/2011 a las 22:10
  #6 (permalink)  
Antiguo 20/05/2011, 09:39
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Header JQuery
está bien pero es solamente un ejemplo para darle un comienzo, no me pongo a plantearme cosas que pueden pasar

en realidad nunca quiero postear código cuando piden "como puedo hacer esto" porque a ese "esto" luego preguntan y como hago para agregar "otra cosa" como un botón para mostrar el anterior, después de ese anterior viene como pongo pausa, luego otro botón play para reanudar o como pongo numeritos para que vaya a cada sección, solo para darle una ideita, después no doy soporte je hay que tomarlo como seudicódigo, aparte esta todo estático, porque al final hay muchas formas


en cuanto al delay lo que hace es retrasar la ejecución de animate de forma que antes de ocultar espere x cantidad de tiempo, cuando se cumpla que empiece la animación, cuando termina la animación se realiza la otra para mostrar. De esa forma no importa cuanto tiempo seteo en cada animate, porque por ahi quiero que la duración de la animación para opacidad a 0 sea de 5 segundos, y la de opacidad a 1 sea de 4 segundos, pero que antes de que comience la primera esperar 10 segundos. El método delay viene perfecto, si usaba setInterval tengo que tener en cuenta cuanto tiempo va a tardar en hacer las animaciones y para que permanezca visible voy a tener que sumar segundos a eso, con delay no hay que tener en cuenta eso

aclaracion: no es que esté en contra o no, solo que para mi opción me viene bien, porque delay y setInterval son distintas cosas
Última edición por Dany_s; 20/05/2011 a las 10:05
  #7 (permalink)  
Antiguo 18/04/2012, 10:33
Avatar de sarumanice  
Fecha de Ingreso: mayo-2008
Ubicación: Lima, Peru
Mensajes: 103
Antigüedad: 16 años, 6 meses
Puntos: 4
Respuesta: Header JQuery
Cita:
Iniciado por InKarC Ver Mensaje
Ahora mi version:

Código Javascript: 
Ver original
  1. $(function(){
  2.     rotacion()  
  3. })
  4.  
  5. function rotacion(){
  6.     setInterval(
  7.         function(){
  8.             $("#slider div").hide()
  9.             $("#slider div:first")
  10.                 .show()
  11.                 .css("opacity",0)
  12.                 .animate({opacity:1},400)
  13.                 .appendTo("#slider")
  14.     },2000)
  15. }

Lo puede ver funcionando aca http://jsfiddle.net/Ju48Z/
Buenas tardes, disculpen la ignoracia, pero acabo de ingresar al link que muestras y veo 4 secciones, la html, el Css, la de Java, y el ejemplo.

Mi pregunta es como inserto el java? Lo guardo como un archivo .js? lo pongo directamente en el index?

No entiendo como hacerlo. gracias.

Etiquetas: header, javascript
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:50.