Foros del Web » Programando para Internet » Jquery »

enlace incorrecto del javascript?

Estas en el tema de enlace incorrecto del javascript? en el foro de Jquery en Foros del Web. Hola a todos. No se ya que es lo que estoy haciendo mal y me estoy volviéndome loco. Estoy trasteando con un menu desplegable en ...
  #1 (permalink)  
Antiguo 29/11/2015, 05:52
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
enlace incorrecto del javascript?

Hola a todos. No se ya que es lo que estoy haciendo mal y me estoy volviéndome loco.

Estoy trasteando con un menu desplegable en jquey. que he encontrado en codepen: http://codepen.io/jrelwell/pen/tnpcf

El caso es que la página tal cual me la he bajado para jugar con ella. Y no soy capaz de hacer funcionar la acción de jQuery de sacar el desplegable.

No se que estoy haciendo algo mal. Alguien puede echarme una mano porfavor.

Os dejo el código:

Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>

<style>
a:link {text-decoration: none; color: #bdc3c7;}
a:visited {text-decoration: none; color: #bdc3c7;}
a:hover {text-decoration: none; color: #bdc3c7;}
a:active {text-decoration: none; color: #bdc3c7;}

body {
  background-color: #2c3e50;
  font-family: Helvetica;
  font-size: 22pt;
}

.menu {
  position: absolute;
  display: block;
  height: 100%;
  top: 0px;
  left: -200px;
  background-color: #34495e;
  box-shadow: 5px 5px 10px;
}

#links {
  position: relative;
  float: left;
}

#link_list {
  list-style-type: none;
  width: 100%;
  padding: 0px 50px 0px 0px;
}

#link_list li {
  display: block;
  width: 100%;

}

#link_list li:hover {
  background-color: #e74c3c;
}

#toggle {
  float: right;
  position: relative;
  top: 50%;
  right: -19px;
  width: 20px;
  height: 20px;
  background-color: #7f8c8d;
  border: 2px solid #ecf0f1;
  border-radius: 20px;
  text-align: center;
  padding: 5px;
  box-shadow: 1px 5px 20px #333333 inset;
}
</style>
</head>
<body>
	<div id="sidebar" class="menu">

		<div id="links">
		    <ul id="link_list">
		      <a href=""><li>Example</li></a>
		      <a href=""><li>Example</li></a>
		      <a href=""><li>Example</li></a>
		    </ul>
		</div>

		<div id="toggle">
	    </div>

	</div>

<!-- script -->

	<script>
		$("#toggle").click(function(){
	  var w = $('#sidebar').width();
	  var pos = $('#sidebar').offset().left;

	  if(pos == 0){
	  $("#sidebar").animate({"left": -w}, "slow");
	  }
	  else
	  {
	  $("#sidebar").animate({"left": "0"}, "slow");
	  }

	});
	</script>


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</body>

</html> 
  #2 (permalink)  
Antiguo 29/11/2015, 11:11
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: enlace incorrecto del javascript?

sacar el Desplegable? yoo no veo ningun desplegable, a que te refieres exactamente o que quieres hacer?
  #3 (permalink)  
Antiguo 29/11/2015, 13:23
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 9 años, 8 meses
Puntos: 131
Respuesta: enlace incorrecto del javascript?

Cita:
Iniciado por AngelKrak Ver Mensaje
sacar el Desplegable? yoo no veo ningun desplegable, a que te refieres exactamente o que quieres hacer?
Dale click en la bolita y se oculta el menu, yo tambien no veia el desplegable

Ayer en la noche se me descompuso mi lap y no puedo probar el codigo, pero lo probe en jsfiddle.net y si funciona, lo mas seguro es que falla porque incluyes dos versiones de jquery, deberias dejar solo una(la ultima)

Un tip para buena experiencia de usuario es que le pongas un cursor:pointer; a la bolita

Saludos
  #4 (permalink)  
Antiguo 29/11/2015, 13:25
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 9 años, 8 meses
Puntos: 131
Respuesta: enlace incorrecto del javascript?

No vi que son jquery y jquery-ui, entonces trata de incluirlos desde otro CDN, o descargalos para probarlos localmente
  #5 (permalink)  
Antiguo 29/11/2015, 16:23
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

Gracias Jose, pues no sabía lo de jQuery-ui. Que quieres decir con incluirlos con otro CDN?.

Lo he descargado y lo he enlazado en la página como si fuera otro javascript y nada. Sigue sin funcionarme.

No se si tengo que seguir un orden concreto a la hora de enlazarlo.

Por cierto lo que no me queda también muy claro es porque aparte de enlazar los jQuery (el de google) y el otro que dices de jQuery-ui, tengo que poner ademas ese trocito de código que pongo al final. (todo esto es lo que he visto de la persona que lo creo en el codepen)


Gracias por ayudarme jose.
  #6 (permalink)  
Antiguo 29/11/2015, 16:55
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

Me lo he descargado y lo he enlazado como otro script cualquiera.

Lo único que lo he renombrado, no se si sera correcto (le he llamado script-menu):

Código HTML:
<script src="script/script-menu.js"></script> 
  #7 (permalink)  
Antiguo 29/11/2015, 17:16
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

No entiendo nada. Acabo de hacer lo que me dices pero en lugar de probar como he probado hace un rato de descargármelo, he buscado en google el que se está enlazado de jQuery-ui.

Y tampoco funciona.

Los he puesto así:

Código HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
no se que estoy haciendo mal ya.
  #8 (permalink)  
Antiguo 29/11/2015, 17:51
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

Sigo sin entender nada. He cambiado en CODEPEN el enlace que tiene a la biblioteca de jQuery, lo que os he puesto en el último post y funciona. pero si lo descargo en mi ordenador no va.

Sigo sin entenderlo
  #9 (permalink)  
Antiguo 29/11/2015, 21:57
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: enlace incorrecto del javascript?

Uffff, maldito FDW, me borro el mensaje que te habia escrito, asi que te dire nomas el codigo que ahi que poner para local

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.     <meta charset="UTF-8">
  4.     <title>Hide Menu</title>
  5.     <link rel="stylesheet" type="text/css" href="est.css"> <!-- Los Estilos del Menu -->
  6.     <script src="http://code.jquery.com/jquery-2.1.4.js"></script> <!-- La libreria de Jquery -->
  7. </head>
  8. <!-- la Estructura del Menu -->
  9. <div id="sidebar">
  10.   <div id="links">
  11.     <ul id="link_list">
  12.       <a href=""><li>Example</li></a>
  13.       <a href=""><li>Example</li></a>
  14.       <a href=""><li>Example</li></a>
  15.     </ul>
  16.   </div>
  17.   <div id="toggle">
  18.    
  19.   </div>
  20. </div>
  21. <script src="ind.js"></script> <!-- El codigo Personal que abre y Cierra el Menu -->
  22. </body>
  23. </html>

ind.js:
Código Javascript:
Ver original
  1. $("#toggle").click(function(){
  2.   var w = $('#sidebar').width();
  3.   var pos = $('#sidebar').offset().left;
  4.  
  5.   if(pos == 0){
  6.   $("#sidebar").animate({"left": -w}, "slow");
  7.   }
  8.   else
  9.   {
  10.   $("#sidebar").animate({"left": "0"}, "slow");
  11.   }
  12.  
  13. });

est.css:
Código CSS:
Ver original
  1. a:link {text-decoration: none; color: #bdc3c7;}
  2. a:visited {text-decoration: none; color: #bdc3c7;}
  3. a:hover {text-decoration: none; color: #bdc3c7;}
  4. a:active {text-decoration: none; color: #bdc3c7;}
  5.  
  6. body {
  7.   background-color: #2c3e50;
  8.   font-family: Helvetica;
  9.   font-size: 22pt;
  10. }
  11.  
  12. #sidebar {
  13.   position: absolute;
  14.   display: block;
  15.   height: 100%;
  16.   top: 0px;
  17.   left: 0px;
  18.   background-color: #34495e;
  19.   box-shadow: 5px 5px 10px;
  20. }
  21.  
  22. #links {
  23.   position: relative;
  24.   float: left;
  25. }
  26.  
  27. #link_list {
  28.   list-style-type: none;
  29.   width: 100%;
  30.   padding: 0px 50px 0px 0px;
  31. }
  32.  
  33. #link_list li {
  34.   display: block;
  35.   width: 100%;
  36.  
  37. }
  38.  
  39. #link_list li:hover {
  40.   background-color: #e74c3c;
  41. }
  42.  
  43. #toggle {
  44.   float: right;
  45.   position: relative;
  46.   top: 50%;
  47.   right: -19px;
  48.   width: 20px;
  49.   height: 20px;
  50.   background-color: #7f8c8d;
  51.   border: 2px solid #ecf0f1;
  52.   border-radius: 20px;
  53.   text-align: center;
  54.   padding: 5px;
  55.   box-shadow: 1px 5px 20px #333333 inset;
  56. }
  #10 (permalink)  
Antiguo 30/11/2015, 03:56
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

Muchisimas gracias Jose.

que alivio!!

por cierto ahora viene lo bueno. Explicame que estaba haciendo mal porque aunque no lo he hecho así. No pensé que era incorrecto el mio.

P.D.: Por cierto esto me funcionará igual cuando lo suba a internet tal y como está?

nuevamente muchas gracias.
  #11 (permalink)  
Antiguo 30/11/2015, 05:28
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

ya me contesto yo a lo de si funciona arriba. Y funciona perfectamente. Genial!!
  #12 (permalink)  
Antiguo 30/11/2015, 05:58
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

Por cierto hay algo que me estoy dando cuenta que me resulta molesto. Cuando pulsas varias veces el boton para probar el menú. Me doy cuenta que se selecciona como parte de texto invisible.

Eso se puede evitar?
  #13 (permalink)  
Antiguo 30/11/2015, 11:54
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: enlace incorrecto del javascript?

si, eso puedes hacer con la Propiedad de user select ;)
-webkit-user-select: none;

http://jsfiddle.net/AngelKrak/L4tfrzyv/
  #14 (permalink)  
Antiguo 30/11/2015, 13:29
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

Mil gracias de nuevo Angel.

un saludo.
  #15 (permalink)  
Antiguo 30/11/2015, 13:30
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

por cierto me sigue intrigando porque no me funcionaba como lo hacia yo?

que me dices?
  #16 (permalink)  
Antiguo 30/11/2015, 16:10
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: enlace incorrecto del javascript?

Talvez es porque ponias mal los enlaces, yo tambien tenia problemas al principio cuando colocaba los enlace a Jquery por ejemplo, ahi veces que necesitan estar al principio, Final o entre el código que usaras o no funciona jejeje xD
  #17 (permalink)  
Antiguo 30/11/2015, 16:34
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: enlace incorrecto del javascript?

Gracias angel. La verdad que necesito ponerme las pilas con jquery.

Etiquetas: desplegable
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 13:21.