Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Cambiar background-image de div que despliega otro div con toggle()

Estas en el tema de Cambiar background-image de div que despliega otro div con toggle() en el foro de Jquery en Foros del Web. Buen día, mi nombre es Edwing, y soy novato en esto del desarrollo web, he estado creando una página web que contenga un header con ...
  #1 (permalink)  
Antiguo 15/10/2014, 16:10
Avatar de Lord_Edoval  
Fecha de Ingreso: octubre-2014
Ubicación: Colombia
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 1
Cambiar background-image de div que despliega otro div con toggle()

Buen día, mi nombre es Edwing, y soy novato en esto del desarrollo web, he estado creando una página web que contenga un header con "position: fixed"; el caso es que quiero que cuando el usuario haga scroll hacia abajo tenga la posibilidad de esconder (o mostrar si es el caso) dicha cabecera si así lo desea, dando click sobre el área de un div que uso como "botón" el cual aparece solo a cierta cantidad de pixeles recorridos al hacer el scroll, en ese ejercicio me di cuenta que lo pertinente sería que si el usuario vuelve a arriba haciendo scroll sin hacer aparecer de nuevo la cabecera con el botón, esta (la cabecera) debía aparecer automáticamente en el instante que desaparezca el botón en el limite de pixeles establecido, es decir, que en la parte top de la página esta siempre sea visible, bueno pues todo eso ya lo logré con la función toggle(), pero se me ha ocurrido que el botón que es un div, cambie su background-image de una flecha hacia arriba a una hacia abajo o viceversa para indicar la acción que se ejecutaría si se le da click, y logré hacerlo hasta cuando escondo el header, pero cuando le vuelvo a dar click para que se despliegue de nuevo la flecha se queda sin cambiar de nuevo el background-image, y no he logrado solucionarlo, debo decir que cuando se hace automáticamente con el scroll hacia arriba SI me cambia el background-image, pero con el botón no he sido capaz (NOTA: Uso un "if" en el scpript de Jquery para intentar hacer eso) .... voy adjuntar los códigos y un link para ver el demo de mi ejercicio....agradezco a quien me ayude a encontrar como solucionarlo... (NOTA 2: En el código uso un div con id="fixed-container" haciendo las veces del "header".)

el linK: [URL="http://www.variedades-captain-eoa.comocreartuweb.es/ejercicio_fixed/index.html"]http://www.variedades-captain-eoa.comocreartuweb.es/ejercicio_fixed/index.html[/URL]

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <title> Analsis Position fixed </title>
  5. <meta charset="utf-8" />
  6. <link rel="stylesheet" href="styles.css" />
  7. </head>
  8. <body>
  9. <div id="main-wrap">
  10. <div id="fixed-container">
  11. <div id="container-a">
  12. <div id="container-b">
  13. </div>
  14. <div id="container-c">
  15. </div>
  16. </div>
  17. </div>
  18. <div id="showcase">
  19. </div>
  20. </div>
  21. <div id='btn-toggle'>
  22. </div>
  23. <!-- Scripts .js.-->
  24. <script src="jQuery-v211.js"> </script>
  25. <script src="mi-script.js"> </script>
  26. </body>
  27. </html>

Código CSS:
Ver original
  1. #btn-toggle
  2. {
  3. position: fixed; bottom: 30px; /* Distancia desde abajo */
  4. right: 30px; /* Distancia desde la derecha */
  5. width: 60px; /* Ancho del botón */
  6. height: 60px; /* Alto del botón */
  7. display: block; background: url(flecha-arriba.png) no-repeat center center;
  8. }
  9.  
  10. #container-a
  11. {
  12. width: 80%; /* también puede ser el 100% total */
  13. background: green;
  14. height: 300px;
  15. margin: 0 auto;
  16. }
  17.  
  18. #container-b
  19. {
  20. width: 50%;
  21. background: brown;
  22. height: 200px;
  23. margin: 0 auto;
  24. float: left;
  25. margin-top: 45px;
  26. }
  27.  
  28. #container-c
  29. {
  30. width: 50%;
  31. background: yellow;
  32. height: 200px;
  33. margin: 0 auto;
  34. float: left;
  35. margin-top: 45px;
  36. }
  37.  
  38. #main-wrap
  39. {
  40. background: blue;
  41. width: 100%;
  42. }
  43.  
  44. #showcase
  45. {
  46. width: 80%;
  47. background: pink;
  48. height: 5000px;
  49. margin: 0 auto;
  50. }

Código Javascript:
Ver original
  1. // boton para hacer "toggle" con el '#fixed-container' $(document).ready(function(){
  2. $('#btn-toggle').on('click',function(){
  3. $('#fixed-container').slideToggle('slow');
  4. if ($('#fixed-container').show()) {
  5. $('#btn-toggle').css('background-image', 'url(flecha-abajo.png)'); }
  6. else
  7. { $('#btn-toggle').css('background-image', 'url(flecha-arriba.png)'); // OJO ESTE ES LO QUE NO ME HACE, VOLVER A MOSTRAR LA FLECHA HACIA ARRIBA } });
  8. // hacer aparecer el boton al hacr scroll hacia abajo'
  9. $("#btn-toggle").hide(); $(function () { $(window).scroll(function () {
  10. if ($(this).scrollTop() > 2000) { $('#btn-toggle').fadeIn(); }
  11. else
  12. { $('#btn-toggle').fadeOut();
  13. }
  14. });
  15. });
  16. // hacer aparecer (si esta oculto) el div '#fixed-container' al hacer scroll hacia arriba'
  17. $(window).scroll(function () {
  18. if ($(this).scrollTop() < 2000) {
  19. $('#fixed-container').slideDown();
  20. $('#btn-toggle').css('background-image', 'url(flecha-arriba.png)');
  21. } }

Gracias

Última edición por Lord_Edoval; 15/10/2014 a las 16:16
  #2 (permalink)  
Antiguo 17/10/2014, 18:51
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 8 años, 7 meses
Puntos: 17
Respuesta: Cambiar background-image de div que despliega otro div con toggle()

Bueno aca te dejo el codigo pero funciona a medias xq no entendi q deberia hacer cuando hace scroll, pero el toggle del boton funciona, probalo y me avisas.
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $('#btn-toggle').click(function(){
  3.         console.log($('#fixed-container').is(':hidden'));  
  4.         if($('#fixed-container').is(':hidden')){
  5.             $('#btn-toggle').css('background-image', 'url(flecha-arriba.png)');
  6.         }else{
  7.             $('#btn-toggle').css('background-image', 'url(flecha-abajo.png)');         
  8.         }
  9.         $('#fixed-container').slideToggle('slow');
  10.        
  11.     });
  12.    
  13.     $(window).scroll(function () {
  14.         if ($(this).scrollTop() > 2000) {
  15.             $('#btn-toggle').fadeIn();
  16.         }else{
  17.             $('#btn-toggle').fadeOut();
  18.         }
  19.     });
  20.    
  21.     $(window).scroll(function () {
  22.         if ($(this).scrollTop() < 2000) {
  23.             $('#fixed-container').slideDown();
  24.             $('#btn-toggle').css('background-image', 'url(flecha-arriba.png)');
  25.         }
  26.     });
  27. });
  #3 (permalink)  
Antiguo 17/10/2014, 22:51
Avatar de Lord_Edoval  
Fecha de Ingreso: octubre-2014
Ubicación: Colombia
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Cambiar background-image de div que despliega otro div con toggle()

Hola! si funcionó perfecto! , lo de el scroll ya funcionaba,(aunque me hiciste también caer en cuenta que una parte del código que yo puse sobraba, la parte de "$("#btn-toggle").hide(); $(function () {" ) que era que apareciera y desapareciera a cierta cantidad de pixeles, pero lo de la flecha me tenía loco, muchas gracias por tu ayuda!

Última edición por Lord_Edoval; 17/10/2014 a las 23:03
  #4 (permalink)  
Antiguo 18/10/2014, 08:38
Avatar de Lord_Edoval  
Fecha de Ingreso: octubre-2014
Ubicación: Colombia
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Cambiar background-image de div que despliega otro div con toggle()

Cita:
Iniciado por Lord_Edoval Ver Mensaje
(aunque me hiciste también caer en cuenta que una parte del código que yo puse sobraba, la parte de "$("#btn-toggle").hide(); $(function () {" )


NO! mentira, si es necesario porque la idea es también que el boton aparezca al hacer scroll a la cierta cantidad de pixeles establecida, y sin eso siempre esta visible...

Etiquetas: background-image
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 23:14.