No funcionan librerías JQueryUI con JQuery

luna690 · #1 (**permalink**) 03/05/2012, 03:58

Hola,

tengo que hacer unos ejemplos con JQuery y no se cargan las librerías. Podríais decirme que tengo mal en el código?

index.html

Código HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">   
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>DWC</title>
        <meta name="author" content="Laia L." />
        <meta name="date" content="2012" />
        <meta name="keywords" content="javascript" />
        <meta name="description" content="DWC" />
        <link href="scripts/estil.css" rel="stylesheet" type="text/css" />
        <link href="jquery/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
        
		<script src="scripts/script.js" type="text/javascript"></script>
        <script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="jquery/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
       	
    </head>
    
    <body>
    	
	<h3>Efectes (11) (5 d'una pràctica i 6 de l'altre pràctica)</h3>
    	<div class="theMenu">
        	<h5 id="ex01"><a href="">Anar cap a la dreta</a></h5>
            <h5 id="ex02"><a href="">Explotar</a></h5>
            <h5 id="ex03"><a href="">Amagar-se</a></h5>
            <h5 id="ex04"><a href="">Rebotar tres cops</a></h5>
            <h5 id="ex05"><a href="">Convertir-se en rectangle</a></h5>
            <h5 id="ex06"><a href="">Pels costats</a></h5>
        	<h5 id="ex07"><a href="">Va cap aball transparent</a></h5>
        	<h5 id="ex08"><a href="">Es doblega com un paper</a></h5>
        	<h5 id="ex09"><a href="">Treu opacitat</a></h5>
        </div>
        <div class="elem_div"></div>
      
    <br /><h3>Estil CSS (5)</h3>
    	<div id="div_css"></div>
 
    </body>       
</html>

estil.css

Código:

.elem_div { margin: 0px; width: 100px; padding: 2px; text-align: center; font-weight: bold; height: 80px; background-color: green; border: 1px solid black; }

script.js

Código HTML:

// JavaScript Document
$(document).ready(function() {
	$("#ex01").click(function () { $(".elem_div").hide("slide", { direction: "right" }, 1000); });
	$("#ex02").click(function () { $(".elem_div").hide("explode", 1000); });
	$("#ex03").click(function () { $(".elem_div").hide("scale", {}, 1000); });
	$("#ex04").click(function () { $(".elem_div").effect("bounce", { times:3 }, 300); });
	$("#ex05").click(function () { $(".elem_div").effect("size", { to: {width: 200,height: 60} }, 1000); });
	$("#ex06").click(function () { $(".elem_div").hide("clip", { direction: "horizontal" }, 1000); });
	$("#ex07").click(function () { $(".elem_div").hide("drop", { direction: "down" }, 1000); });
	$("#ex08").click(function () { $(".elem_div").hide("fold", {}, 1000); });
	$("#ex09").click(function () { $(".elem_div").hide("fade", {}, 1000); });
	
	$("#div_css").html("<b>Wow!</b> Such excitement...");
    $("#div_css b").append(document.createTextNode("!!!"))
              .css("color", "red");
});

kikeking1 · #2 (**permalink**) 03/05/2012, 07:44

A simplemente vista diria que el problema esta en que llamas al archivo script.js antes de cargar la biblioteca jquery. Aunque uses $(document).ready... , si no has cargado previamente jquery, esa declaración no se ejecutara y seguramente te este arrojando un error en la consola similar a este.

$ is not defined

Pon el archivo script.js despues de haber cargado jquery

Código HTML:

<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="scripts/script.js" type="text/javascript"></script>

Asegurate tambien que la carpeta que tiene los archivos Jquery, esta al mismo nivel que la carpeta scripts, si la tienes dentro, no estas referenciandola bien (deberia ser entonces scripts/jquery/...)

Támbien te recomendaria que actualizaras tu Jquery que va ya por la version 1.7.2. Todas las funcionabilidades de Jquery UI, te van a funcionar sin problemas con esa version que usas actualmente, pero sin duda han habido bastante cambios interesante desde esa version hasta la actual, que seguro agradeces tener disponible.

Espero que todo fuera eso, y puedas seguir avanzado, si no es asi, comentalo y seguimos indagando en el problema.

luna690 · #3 (**permalink**) 03/05/2012, 08:37

Muchas gracias!!
Sí, era que no cargaba el script.js bien porqué estaba delante de todos los archivos JQuery.