Anuncio

Anuncio Módulo
Colapsar
No hay anuncio todavía.

No funcionan librerías JQueryUI con JQuery

Título de Página Módulo
Transferir Eliminar Colapsar
X
Detalle Conversación Módulo
Colapsar
  • Filtrar
  • Tiempo
  • Mostrar
Limpiar Todo
nuevos mensajes

  • No funcionan librerías JQueryUI con JQuery

    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:
    <?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">Anar cap a la dreta</h5>
                <h5 id="ex02">Explotar</h5>
                <h5 id="ex03">Amagar-se</h5>
                <h5 id="ex04">Rebotar tres cops</h5>
                <h5 id="ex05">Convertir-se en rectangle</h5>
                <h5 id="ex06">Pels costats</h5>
            	<h5 id="ex07">Va cap aball transparent</h5>
            	<h5 id="ex08">Es doblega com un paper</h5>
            	<h5 id="ex09">Treu opacitat</h5>
            </div>
            <div class="elem_div"></div>
            
        
        
        
    <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:
    // 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("Wow! Such excitement...");
        $("#div_css b").append(document.createTextNode("!!!"))
                  .css("color", "red");
    });

  • #2
    No entiendo mucho de javascript pero te puedo orientar lo que veo.

    1-. lo tienes metido en la carpeta scripts del raiz ¿verdad? y tienes permisos de lectura en dicha carpeta ¿no?

    2.- Puedes probar a incluir tu javascript directamente delante del </head> de tu html a ver si lo coje.

    Comentario


    • #3
      ¿Se muestra algún mensaje de error al cargar a página?

      Si no es así, abre la página con Chrome, luego oprime Ctrl+Shift+J para abrir la consola de JavaScript y envíanos una captura en pantalla de lo que aparece o copia y pega el texto que allí aparece.

      Comentario


      • #4
        acabo de probar el script en el head, y me he dado cuenta de que tenía mal los <script>.

        Estoy cargando el script.js antes de cargar los archivos de jquery!!

        Código:
        <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>

        Comentario


        • #5
          Eso quiere decir que ya te funciono?

          Puedes usar la consola de Javascript da chrome para encontrar con mas rapidez ese tipo de errores.

          Comentario


          • #6
            Gracias Andrés, normalmente uso el "Firebug" de Firefox para encontrar errores en javascript, pero a veces no se en qué jquery.js mirar, por ejemplo..

            Y tmpoco había pensado en usarlo T_T

            Saludos!!

            Comentario

            Trabajando...
            X