navegación Ajax (dynamicpage.js) y uso de addClass

quico6 · #1 (**permalink**) 10/02/2013, 20:49

lo que intento es mediante ("addClass") cambiar el CSS

http://cateringasmeigas.es/2K13/index.php ("Aqui funciona")
http://cateringasmeigas.es/2K13/#index.php ("pero donde debería funcionar falla")

gracias

index.php

Código:

<script>
	$(document).ready(function(){
		$("section").addClass("silver");
		//$('section').attr("class", "green");
	});
</script>

header.php

Código:

<!DOCTYPE html>
<html lang="es-ES">
	<head>
	    <meta charset="utf-8">
	    <title>Title</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<!--<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>-->
		<script type="text/javascript" src="js/dynamicpage.js"></script>
		<link rel='stylesheet' type='text/css' href='css/style.css'>
	</head>
	<body>
		<header><?php echo"\n"; include "php/menu.php"; echo"\n"; ?>		</header>
		<article><section><div><div><div><div>

ipraetoriux · #2 (**permalink**) 10/02/2013, 21:27

..bien mirándolo por encima, lo primero que noto en la consola un error, es que en el head estas usando el objeto jquery antes de incluir la libreria, entonces te da un error....tu tienes así..

Código Javascript:

Ver original<script>
    $(document).ready(function(){
        $("section").addClass("silver");
        //$('section').attr("class", "green");
    });
</script>
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <!--<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>-->
        <script type="text/javascript" src="js/dynamicpage.js"></script>

...y tendria que ir al reves, para que no te de error...

..luego en el body, tienes esto

Código Javascript:

Ver original<script>
    $(document).ready(function(){
        $("section").addClass("green");
        $('section').attr("class", "green");
    });
</script>

...porque?...lo mejor seria que trates de ser mas ordenado e incluyas todo en un solo archivo externo, particularmente a mi me gusta poner todo antes del cierre de la etiqueta body, salvoo que se necesite un script antes..entonces yo lo ordenaría así...y en ultimo archivo, miscript.js, pondria mis codigo de Javascript

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <link rel='stylesheet' type='text/css' href='css/style.css'>
</head>
<body>
  
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <!--<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>-->
  <script type="text/javascript" src="js/dynamicpage.js"></script>
  <script type="text/javascript" src="js/miscript.js"></script>
</body>
</html>

...luego usandolo, tienes este error...en cada link que le das click, aca por ejemplo un error en informacion

Código Javascript:

Ver originalUncaught Error: Syntax error, unrecognized expression: nav a[href=informacion.php]

el poblema es que tienes que pasar "informacion", no "informacion.php"...entonces en todos los link, debes quitar el ".php", y no te dará error...

quico6 · #3 (**permalink**) 11/02/2013, 06:39

hice los cambios que me aconsejaste, aunque me llama la atención, pues los SCRIPTS los suelo ver al principio

header.php

Código:

<!DOCTYPE html>
<html lang="es-ES">
	<head>
	    <meta charset="utf-8">
	    <title>Title</title>
		<link rel='stylesheet' type='text/css' href='./css/style.css'>
	</head>
	<body id="page-wrap">
		<header><?php echo"\n"; include "./php/menu.php"; echo"\n"; ?>		</header>
		<article id="main-content"><section id="guts"><div><div><div><div>

footer.php

Código:

			</div></div></div></div></section></article>
		<footer></footer>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<!--<script type="text/javascript" src="./js/jquery.ba-hashchange.min.js"></script>-->
		<script type="text/javascript" src="./js/dynamicpage.js"></script>
		<script type="text/javascript" src="./js/csspag.js"></script>
	</body>
</html>

csspag.js

Código:

	$(document).ready(function(){
		$("#guts").addClass("green");
		//$('section').attr("class", "green");
	});

Respecto a quitar ".php" en este ejemplo http://css-tricks.com/examples/DynamicPage/#index.php no da error porque usan unos ID en las ETIQUETAS, me he dado cuenta que el error que comentas desaparece al ser mas fiel a ese ejemplo, no había visto esos errores, y me acabo de dar cuenta que google chrome los menciona usando F12, le miro utilidad a conservar la extensión a los enlaces, evitando que se generen enlaces rotos como por ejemplo www.algo.com/index

la idea del JS es aplicar CSS diferentes en algunas secciones de la web, ejemplo, si estoy en galeria.php aplicar un estilo personalizado a una etiqueta del header.php

gracias