JQuery - Cambiar background-image de div que despliega otro div con toggle()

   
Vista:
Imágen de perfil de Edwing

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

Publicado por Edwing (11 intervenciones) el 15/10/2014 22:10:53
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: http://www.variedades-captain-eoa.comocreartuweb.es/ejercicio_fixed/index.html

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

el css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
*
{
   border:0;
   box-sizing: border-box; /* El padding y border del elemento no incrementan su ancho */
      -moz-box-sizing: border-box; /* moz = prefijo para mozilla firefox */
        -ms-sizing: border-box; /* ms = prefijo para Internet Explorer */
        -o-box-sizing: border-box; /* o = prefijo para mozilla Opera */
        -webkit-box-sizing: border-box; /* webkit = prefijo Chrome y Safari */
   margin: 0;
   outline: none;
   padding: 0;
   text-indent: 0;
}
 
#btn-toggle 
{
   position: fixed;
   bottom: 30px; /* Distancia desde abajo */
   right: 30px; /* Distancia desde la derecha */
   width: 60px; /* Ancho del botón */
   height: 60px; /* Alto del botón */
   display: block;
   background: url(flecha-arriba.png) no-repeat center center;
}
 
#container-a
{
   width: 80%; /* también puede ser el 100% total */
   background: green;
   height: 300px;
   margin: 0 auto;
}
 
#container-b
{
   width: 50%;
   background: brown;
   height: 200px;
   margin: 0 auto;
   float: left;
   margin-top: 45px;
}
 
#container-c
{
   width: 50%;
   background: yellow;
   height: 200px;
   margin: 0 auto;
   float: left;
   margin-top: 45px;
}
 
#main-wrap
{
   background: blue;
   width: 100%;
}
 
#showcase
{
   width: 80%;
   background: pink;
   height: 5000px;
   margin: 0 auto;
}

y el script Jquery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// boton para hacer "toggle" con el '#fixed-container'
$(document).ready(function(){
   $('#btn-toggle').on('click',function(){
      $('#fixed-container').slideToggle('slow');
 
   if ($('#fixed-container').show())
            {
            $('#btn-toggle').css('background-image', 'url(flecha-abajo.png)');
            }
            else
            {
            $('#btn-toggle').css('background-image', 'url(flecha-arriba.png)'); // OJO ESTE ES LO QUE NO ME HACE, VOLVER A MOSTRAR LA FLECHA HACIA ARRIBA
            }
   });
// hacer aparecer el boton al hacr scroll hacia abajo'
   $("#btn-toggle").hide();
      $(function () {
         $(window).scroll(function () {
            if ($(this).scrollTop() > 2000)
            {
            $('#btn-toggle').fadeIn();
            }
            else
            {
            $('#btn-toggle').fadeOut();
            }
      });
   });
// hacer aparecer (si esta oculto) el div '#fixed-container' al hacer scroll hacia arriba'
   $(window).scroll(function () {
      if ($(this).scrollTop() < 2000)
      {
      $('#fixed-container').slideDown();
      $('#btn-toggle').css('background-image', 'url(flecha-arriba.png)');
      }
   });
});

Gracias....
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

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

Publicado por xve (557 intervenciones) el 16/10/2014 08:35:41
Hola Edwin, ante todo decir que tu código esta muy bien, lo único a decirte, es que en vez de utilizar CSS para las imágenes, yo utilizaría clases de estilos, de esta manera, es mas sencillo de utilizar...

Aquí te adjunto tu código que modifica la flecha de subida por el de bajada y así sucesivamente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
<!-- 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> -->
 	<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
 
	<script>
    // boton para hacer "toggle" con el '#fixed-container'
    $(document).ready(function(){
        $('#btn-toggle').on('click',function(){
            $('#fixed-container').slideToggle('slow');
 
            if ($('#fixed-container').show())
            {
                if($('#btn-toggle').hasClass("up"))
                {
                    $('#btn-toggle').removeClass("up");
                    $('#btn-toggle').addClass("down");
                }
                else
                {
                    $('#btn-toggle').removeClass("down");
                    $('#btn-toggle').addClass("up");
                }
             }
        });
        // hacer aparecer el boton al hacr scroll hacia abajo'
        $("#btn-toggle").hide();
            $(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop() > 2000)
                    {
                    $('#btn-toggle').fadeIn();
                    }
                    else
                    {
                    $('#btn-toggle').fadeOut();
                    }
            });
        });
        // hacer aparecer (si esta oculto) el div '#fixed-container' al hacer scroll hacia arriba'
        $(window).scroll(function () {
            if ($(this).scrollTop() < 2000)
            {
            $('#fixed-container').slideDown();
            $('#btn-toggle').addClass("up");
            }
        });
    });
    </script>
 
	<style>
*
{
   border:0;
   box-sizing: border-box; /* El padding y border del elemento no incrementan su ancho */
      -moz-box-sizing: border-box; /* moz = prefijo para mozilla firefox */
        -ms-sizing: border-box; /* ms = prefijo para Internet Explorer */
        -o-box-sizing: border-box; /* o = prefijo para mozilla Opera */
        -webkit-box-sizing: border-box; /* webkit = prefijo Chrome y Safari */
   margin: 0;
   outline: none;
   padding: 0;
   text-indent: 0;
}
 
#btn-toggle 
{
   position: fixed;
   bottom: 30px; /* Distancia desde abajo */
   right: 30px; /* Distancia desde la derecha */
   width: 48px; /* Ancho del botón */
   height: 48px; /* Alto del botón */
   display: block;
}
#btn-toggle.down {
background-image:url(flecha-abajo.png);
}
#btn-toggle.up {
background-image:url(flecha-arriba.png);
}
 
#container-a
{
   width: 80%; /* también puede ser el 100% total */
   background: green;
   height: 300px;
   margin: 0 auto;
}
 
#container-b
{
   width: 50%;
   background: brown;
   height: 200px;
   margin: 0 auto;
   float: left;
   margin-top: 45px;
}
 
#container-c
{
   width: 50%;
   background: yellow;
   height: 200px;
   margin: 0 auto;
   float: left;
   margin-top: 45px;
}
 
#main-wrap
{
   background: blue;
   width: 100%;
}
 
#showcase
{
   width: 80%;
   background: pink;
   height: 5000px;
   margin: 0 auto;
}
	</style>
</head>
 
<body>
 
   <body>
      <div id="main-wrap">
         <div id="fixed-container">
            <div id="container-a">
               <div id="container-b">
               </div>
 
               <div id="container-c">
               </div>
            </div>
         </div>
 
         <div id="showcase">
 
         </div>
      </div>
 
      <div id='btn-toggle' class="up">
      </div>
   </body>
</html>

Ya nos comentaras si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Edwing

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

Publicado por Edwing (11 intervenciones) el 16/10/2014 14:49:04
Excelente! si que funcionó! si señor, ese es el camino mas pertinente, usar clases de estilos, muchas gracias por tu ayuda, un abrazo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

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

Publicado por xve (557 intervenciones) el 16/10/2014 20:02:26
Me alegro que te haya servido de ayuda!!! Gracias por el comentario!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar