Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Diego Macêdo

[Resolvido] Passar arquivo CSS pelo JQuery - load()

Por , em Javascript

Recommended Posts

Diego Macêdo    6

Diego Macêdo
Postado

Criei essa página de exemplo para testar a função do load(), que eu achei mto interessante e possivelmente útil.

 

Minha idéia era montar o menu do site e fazer com que cada link carregasse o conteúdo na div principal.

 

O código está fazendo o load da página (modelo2.php) dentro da DIV. O problema é que a CSS dessa página não está sendo carregada (ela puxa de um arquivo CSS a parte pela tag <link>) e fica aquela coisa horrível de um site sem "estilo", no duplo sentido da palavra. Mas se eu abrir a página (modelo2.php) diretamente, a CSS funciona normalmente e o site fica lindo pra dedeu. :P

 

Abaixo os códigos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu_inferior {
	margin: 0; 
	clear: both;
}

#menu_inferior li { 
	float: left;
	list-style: none;
}

#menu_inferior li a {
	background:url(estatico/imagens/menu_inferior.gif) no-repeat; 
	display: block; 
	height: 40px;
	text-indent:-150000px;
}

#menu_inferior li a span { display: none; }

#menu_inferior li .home {width:144px; background-position:0 0;}
#menu_inferior li .home:hover {background-position:0 -40px;}
#menu_inferior li .flash_eventos {width:232px; background-position:-144px 0;}
#menu_inferior li .flash_eventos:hover {background-position:-144px -40px;}
#menu_inferior li .flash_videos {width:213px; background-position:-376px 0;}
#menu_inferior li .flash_videos:hover {background-position:-376px -40px;}
#menu_inferior li .contato {width:184px; background-position:-588px 0;}
#menu_inferior li .contato:hover {background-position:-588px -40px;}
#menu_inferior li .orkut {width:177px; background-position:-772px 0;}
#menu_inferior li .orkut:hover {background-position:-772px -40px;}

#content {border:1px solid #ccc; height:300px; overflow:auto; padding:10px; width:334px}

</style>
<script src="estatico/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.home').click(function(){
		$('#content').load('modelo2.php');
		return false;
	});
});
</script>
</head>

<body>
<ul id="menu_inferior">
	<li><a href="#" class="home">Home</a></li>
    <li><a href="#" class="flash_eventos">Flash Eventos</a></li>
    <li><a href="#" class="flash_videos">Flash Vdeos</a></li>
    <li><a href="#" class="contato">Contato</a></li>
    <li><a href="#" class="orkut">Orkut</a></li>    
</ul>
<div id="content"></div>
</body>
</html>

Alguém sabe como resolver essa bronca?



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Verifique os caminhos, o teu erro é provavelmente ai.


 



Mas uma boa prática, é sempre colocar chamadas de arquivos .js e .css no <head> do documento.



Faça isso. Não faz sentido você 'dividir' tanto assim o CSS. Ele entra em cache.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Diego Macêdo
			  

	
		
	
			 6
	
		
	

		

		

			


	
		Diego Macêdo
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Realmente era o caminho, estava esquecendo do "../"  http://forum.imasters.com.br/public/style_emoticons/default/blush.gif 


 


É complicado a pessoa desenvolver com cabeça cansada já.. :P


 


OBS.: Meu CSS e JS estão entre a tag <HEAD>  :huh:


 


Obrigado William! Resolvido! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

tranquilo!  http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif 


 




O problema é que a CSS dessa página não está sendo carregada (ela puxa de um arquivo CSS a parte pela tag <link>)


 


É que por esse trecho, imaginei que você tava colocando a tag link, nessa página à ser carregada. E como ela está no <body> do documento, então esse CSS 'carregado', está fora da tag <head> ^_^

			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito