JQuery - Jquery se ejecuta al cargar la pagina.

   
Vista:

Jquery se ejecuta al cargar la pagina.

Publicado por Tomas (8 intervenciones) el 26/09/2015 14:46:28
Muy buenas, tengo una funcion donde le digo que cuando se haga clic en el logo, aparezca la barra de navegación (versión movil). Pero aparece nada mas cargar la pagina, sin hacer nada..los iconos tampoco se ven, el icono de "menú" que esta al costado del logo(una imagen) sí que se ve.
El css lo cargue al principio, el script jquery y la librería al final. Pueden dar por hecho que la direccion de los archivos están bien.

https://jsfiddle.net/0utf236v/



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
<body>
  		<header id="header-principal" >
		<div id="logo">
		<a><img id="img2" src="logo-mobile.png"></img><img id="img3" src="menu.png"></img></a>
		</div>
		<nav>
			<ul>
				<li><a href="">link0<img class="icon" src="img1.png"></img></a></li>
				<li><a href="">link1<img class="icon" src="img2.png"></img></a></li>
				<li><a href="">link2<img class="icon" src="img3.png"></img></a></li>
				<li><a href="">link3<img class="icon" src="img4.png"></img></a></li>
			</ul>
		</nav>
 
		</header>
			<div id="main">
			 <article id="articulo-uno">
			 		<header class="articulo-header">
							<h2>titilo1</h2>
					</header>
							<p class="articulo">text1</p>
			</article>
 
			<article id="articulo-dos">
					 <header class="articulo-header">
							<h2>titulo2</h2>
					</header>
							<p class="articulo">texto2</p>
			</article>
		</div>
 
		<footer style="position:absolute;bottom:0;">
		<p><font color="grey";>footer </font></p>
		</footer>
		<!-- Librerias Jquery -->
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<!--script mobile-bar-->
		<script src="menu.js" type="text/jscript"></script>
  </body>
</html>

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
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
body{
margin:0px;
font-family:'Questrial';
height:100%;
 }
 
 
/********************************************* HEADER ******/
#header-principal{
 
}
 
 
/****************imagenes**********/
 
#img2{
display:inline-block;
z-index:1;
margin-top:5px;
margin-left:2%;
height:50px;
width:80%;
float:left;
 
 }
 
 #img3{
 display:inline-block;
float:right;
margin-top:12px;
margin-right:2%;
 }
 #img4{ display:none;}
/******************************** Logo ************/
#logo{
  margin-top:0px;
  height:55px;
  background: green url('fondo.png') repeat;
 }
 
/***************************************************Navigation bar *****/
nav{
width:100%;
height:auto;
background-color:green;
font-size:20px;
position: absolute;
}
nav li a{
list-style:none;
text-decoration:none;
color:black;}
 
nav ul li.active a{
color: #FFF;
box-shadow: 0px 0px 0px 0px;
padding:0em 0em;
float:left;
}
 
nav ul li{
margin-top:20px;
margin-bottom:20px;
 
}
 
nav ul{
display:inline-flex;
flex-direction:column;
margin-left:0px;
padding-left:2%;
 }
.icon{
float:right;
}
 
 /*************************************************************** Footer ******/
footer{
width:100%;
 
height:100px;
text-align:center;
text-align:center;
background: #1C1C1C url('fondo.png') repeat;
 }
footer p {
position:relative;
padding: 2em 0em;
 }
/*********************************************************** Banner *********/
#banner{
 }
 
/****************************************************** Container *************/
#main{
width:100%;
display:inline.flex;
flex-direction:column;
height:auto;
}
.articulo-header{
text-align:center; }
 
#articulo-uno{
width:100%;
height:auto;
margin-bottom:0px;
text-align:justify;
margin-left:5px;
margin-right:5px;
}
#articulo-dos{
width:100%;
height:auto;
text-align:justify;
margin-left:5px;
margin-right:5px;}
.articulo{
padding-left:px;
padding-right:10px;
 }

JQUERY
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(main);
 
var contador = 1;
 
function main(){
$('#logo').click(function(){
		if(contador == 1){
			$('nav').animate({
		        left: '0'
			});
		contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
			left: '-100%'
			});
			}
 
			 });
 
};
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 Vainas

Jquery se ejecuta al cargar la pagina.

Publicado por Vainas (96 intervenciones) el 30/09/2015 21:41:13
Buenas:

A mi me funciona incluso probando en el movil (no cargan las imagenes por la ruta claro):

http://jsfiddle.net/0utf236v/3/

Saludos.
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

Jquery se ejecuta al cargar la pagina.

Publicado por Tomas (8 intervenciones) el 03/10/2015 19:30:17
No, no funciona como debería, el menu debería estar escondido al cargar la web. Ya lo solucione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
$("nav").css("left", "-100%");
var contador = 1;
main(contador);
});
function main(valor_contador){
contador = valor_contador;
$('#logo').click(function(e){
 
		e.preventDefault();
		if(contador == 1){
		$('nav').animate({ left: '0'});
		contador = 0;
		}
		else {
		$('nav').animate({left: '-100%'});
		contador = 1;
		}
		 });
};
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 xve

Jquery se ejecuta al cargar la pagina.

Publicado por xve (557 intervenciones) el 04/10/2015 08:50:44
Gracias por compartirlo!!!
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