Problema con javascript, cambiar contenido div

[zaphiel]

Buenas gente.

Primero decir que soy nuevo en el foro y no he mirado todo, aunque he buscado un poco pero no he encontrado exactamente lo que quiero.

Estoy intentado usar este ejemplo

[URL="http://jsfiddle.net/6QJJp/1/"]http://jsfiddle.net/6QJJp/1/[/URL]

en mi pagina web, que yo sepa las librerias son con

Código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	
<script type="text/javascript">
funcion que sea
</script>

La parte del menu de mi web tendrá este formato:

[URL="http://jsfiddle.net/zaphiel/t6GcP/"]http://jsfiddle.net/zaphiel/t6GcP/[/URL]


Pero no consigo adaptar mi pagina, y no se porque...

Alguna idea?

Gracias.

[jonni09lo]

Has incluido jquery ui?

Saludos

[zaphiel]

Lo unico que tengo en la cabecera es el codigo que he puesto antes...creia que ya lo incluia, tengo esto:

Código:

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	
	<script type="text/javascript">
		Omito, que es muy larga, si quereis la posteo, incluyendo el css por si acaso es el problema.
	</script>

Como se haría para incluir jquery UI?, en lo que es jquery y javascript soy un poco novato.

[Alexis88]

Iniciado por zaphiel

Como se haría para incluir jquery UI?

De la misma forma en que incluiste jQuery:

Código HTML:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 

Saludos

[zaphiel]

Me sigue sin funcionar... tengo esto:

Código HTML:

CSS
	<style> 
		body{
			font-family:sans-serif;
			padding:0;
			margin:0;
		}
		.right
		{
			
			float:right;
			width:100%;
			padding-left:250px;
		}
		.top
		{
			float:left;
			
			width:100%;
			height:50px;
			position:fixed;
			top:0;
			
			background-color:red;
			box-shadow:0px 0px 10px rgba(0, 0, 0, 0.7);
		}
		.menu-item
		{
			position:relative;
			float:left;
			
			padding: 10px 15px 0 15px;
			height:40px;
			
		}
		.menu-item:hover
		{
			background-color:#ffc72e;
			cursor:pointer;
		}
		.menu-item-selected
		{
			background-color:black;
			color:white;
		}
			
		#panel-frame
		{
			width:100%;
			position:fixed;
			height:50px;
		}
		.panel
		{
			background-color:#f2f2f2;
			position:relative;
			width:100%;
			height:50px;
			box-shadow:0px 0px 10px rgba(0, 0, 0, 0.7);
			top:0px;	 
		}
		
	</style> 

Código HTML:

SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	
	
	<script type="text/javascript">
		function loadContent()
		{
			
		}

	   $('.block').click
	   (
			function()
			{
				
				var id= $(this).attr('dataid');
				var did="#" + id;
				var data_id= $(did).html();
				var panel= $('.panel');
				var panel_width=$('.panel').css('top');		
				var pixels = parseInt(panel_width,0);
				
				
				//close the element if it was already selected
				if($(this).hasClass("menu-item-selected"))
				{
					//remove css class
					$(this).removeClass("menu-item-selected");
					
					//close the item
					panel.animate({top: 0});
				}
				//open it up if not selected or changing element
				else
				{
					//remove all selected tags
					$('.block').removeClass("menu-item-selected");
					
					//add it to the current one
					$(this).addClass("menu-item-selected");
					
					//if opened, close open and open it up again
					if(pixels > 0)
					{
						panel.animate({top: 0},function()
						{
							//empty data
							$('.data').html('');
						})
						.animate({top: panel.outerHeight() },
							function()
							{
								//AJAX CALL OR COPY ELEMENT TO .data using loadContent(toElement,fromWhere); 
								// toElement -> CSS selector, fromWhere, CSSSelector
								$('.data').html(data_id);		
							}
						);
					}
					//open/close	panel
					else
					{
						panel.animate({top: pixels == 0 ? +panel.outerHeight() : 0},
						function()
						{
								//AJAX CALL OR COPY ELEMENT TO .data using loadContent(toElement,fromWhere); 
								// toElement -> CSS selector, fromWhere, CSSSelector	
								$('.data').html(data_id);	
						}
						);
					}
					
				}
				
				return false;												
			}
		);
	  
		$('.close').click
		(
			function() 
			{
				var panel= $('.panel');
				panel.animate({top: parseInt(panel.css('top'),0) == 0 ? +panel.outerHeight() : 0});
				return false;
			}
		);  

	</script> 

Código HTML:

<div id="container"> 
		
		<div id="panel-frame"> 
			<div class="panel"> 
				<!-- Content to load in slide-in menu	-->
				
				<div class="data" >
				
				</div>
			</div> 
		</div> 
 		<div class="top"> 
			<div class="menu-item block" dataid="1">Item1</div> 			
			<div class="menu-item block" dataid="2">Item2</div> 
			<div class="menu-item block" dataid="3">Item3</div> 
		</div> 
		<div style="display:none">
				<div id="1">Test</div> 	
				<div id="2">Asdf</div> 	
				<div id="3">asdasdad</div> 	
		</div>
	</div> 

Algo se me esta pasando o he puesto mal.

Gracias.

[Alexis88]

Acabo de probar con el código que pusiste y el resultado es el mismo que el del ejemplo que señalaste.

[zaphiel]

J***, lo siento que llevo mucho lio.

De todas formas yo he probado y no me funciona, ahora pondré el mio adaptado, pero ni me funciona el ejemplo en mi propio ordenador.

Ya esta. Aqui pongo la parte de mi pagina, el script y el css son iguales por que estoy probando, aunque en mi ordenador (con una pagina index.html en mi propio escritorio no me funciona, no se la razón)

[URL="http://jsfiddle.net/zaphiel/aAr7E/16/"]Ejemplo de mi pagina[/URL]

Para que funcione el script unicamente hay que añadir la libreria y jquery ui verdad?, asi:

Código HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	
<script type="text/javascript">
  funcion...
</script> 

O necesito algo mas? instalado en mi propio ordenador?.

En el ejemplo de todas formas esta mal, ya que el div header no aparece, y el footer aparece entre medio, pero tengo que cambiar el css de footer pero no consigo que quede siempre debajo.


He descargado el paquete jquery-ui de [URL="http://jqueryui.com/download/#!version=1.10.3&components=1111101001111111111111 111111111111"]Jquery UI[/URL]

He extraido el zip en una carpeta y tengo las carpetas css y js con los respectivos archivos.

He puesto en el head:

Código HTML:

<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
	<script src="js/jquery-1.8.3.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.js"></script>
	 <script>
                ...funcion...
               </script> 

Y todo lo demas igual y me sigue sin ir, pensaría que el problema esta en el script, pero en el ejemplo de la web de jsfiddle funciona...


P.D: porque me salen los enlaces asi? yo veo todo el codigo.