Los scripts se anulan entre si

Serralta · #1 (**permalink**) 17/09/2011, 03:55

Hola a tod@s!

Aver si me podeis orientar sobre el orden en como incluir los scripts en el head.

Tengo un script de un menu animado, y luego otro script de un slider. Si pongo el del menu animado el ultimo, este me funciona y el slider no, si lo pongo al reves, el slider me funciona pero el menu no...

He buscado ante si encontraba algo, pero no he sacado nada en claro...

Bueno, agradezco su ayuda!

Gracias!

Código PHP:

  <!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>Proimdima - Projectes d'impressio i disseny</title> 
 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/anchor.jquery.js" type="text/javascript"></script> 
 
<!-- SLIDER --> 
        <script src="js/slider/jquery.js" type="text/javascript"></script> 
        <script src="js/slider/mobilyslider.js" type="text/javascript"></script> 
        <script type="text/javascript"> 
        $(function(){ 
             
            $('.slider').mobilyslider({ 
                content: '.sliderContent', 
                children: 'div', 
                transition: 'fade', 
                animationSpeed: 800, 
                autoplay: false, 
                autoplaySpeed: 3000, 
                pauseOnHover: false, 
                bullets: true, 
                arrows: true, 
                arrowsHide: false, 
                prev: 'prev', 
                next: 'next', 
                animationStart: function(){}, 
                animationComplete: function(){} 
         
            }); 
             
        }); 
        </script> 
<!-- SLIDER --> 
 
<!-- SCRIPT NAVIGATION_MENU --> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="js/nav/jquery.easing.1.3.js"></script> 
        <script type="text/javascript" src="js/nav/jquery.iconmenu.js"></script> 
        <script type="text/javascript"> 
            $(function() { 
                $('#sti-menu').iconmenu(); 
            }); 
        </script> 
<!-- SCRIPT NAVIGATION_MENU --> 
 
 
 
<link href="estils_backgroundC.css" rel="stylesheet" type="text/css" /> 
<link href="estils_containerC.css" rel="stylesheet" type="text/css" /> 
<link href="estils_text.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="css_nav/style.css" /> 
<link rel="stylesheet" type="text/css" href="css_nav/stimenu.css" /> 
<link href="estils_slider.css" rel="stylesheet" type="text/css" /> 
 
 
 
</head> 
 
<body>

KoswiDigital · #2 (**permalink**) 17/09/2011, 10:11

Hola.

Tienes un gran caos ahí. ¿Cuántas veces cargas jquery.js? Ya te digo yo, 3 veces.
Además, al utilizar jquery, para que funcione, la mejor manera es utilizando $(document).ready();. Y dentro de éste, tu código. Por otro lado, te recomiendo siempre cargar tus códigos desde un js externo en lugar de en la propia página. Te será más cómodo trabajarlo y podrás utilizarlo en distintos archivos.

Prueba de la siguiente forma, y fíjate en los cambios:

Código HTML:

Ver original<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/nav/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/nav/jquery.iconmenu.js"></script>
<script src="js/anchor.jquery.js" type="text/javascript"></script>
 
<!-- SLIDER -->
        <script src="js/slider/mobilyslider.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            
            $('.slider').mobilyslider({
                content: '.sliderContent',
                children: 'div',
                transition: 'fade',
                animationSpeed: 800,
                autoplay: false,
                autoplaySpeed: 3000,
                pauseOnHover: false,
                bullets: true,
                arrows: true,
                arrowsHide: false,
                prev: 'prev',
                next: 'next',
                animationStart: function(){},
                animationComplete: function(){}
            });
            
        });
        </script>
<!-- SLIDER -->
 
<!-- SCRIPT NAVIGATION_MENU -->
 
        <script type="text/javascript">
            $(document).ready(function() {
                $('#sti-menu').iconmenu();
            });
        </script>

pd: Echa un vistazo a este enlace: http://www.learningjquery.com/2006/0...document-ready

Un saludo.

Serralta · #3 (**permalink**) 17/09/2011, 11:00

Hola KoswiDigital,

gracias por la información. El código que me pasas no funciona, es más, el efecto slide de las anclas también quedan anuladas.

Me imaginaba que no era lo suyo cargar tantos archivos, la verdad que mi idea al principio de la web, no era exactamente esa.

A que te refieres cuando dices un archivo js externo? un archivo.js con el codigo de los demas suelto entre $(document).ready(); o en ese archivo los <script src="...></script>

Es mejor cargarlos desde el google?

Te agradeceria algun consejo.

Sobre los cambios que has echo en el codigo, por lo que veo primero es cargar las librerias, y luego las acciones?

Gracias de antemano.

Saludos.

KoswiDigital · #4 (**permalink**) 17/09/2011, 15:12

Ya imaginaba que no funcionaría, pero al menos tienes el código mejor estructurado.
Está claro que si no funciona, es por algo. Si usas firefox, abre la consola de errores (ctrl+shit+j) para comprobar qué dice y desde ahí podremos mirar. En la pestaña "Errores" verás los problemas relacionados con javascript.

Con un archivo js externo, me refiero a que igual que enlazas a librerías como jquery.js, también puedes hacerlo a otro archivo.js donde tengas el código que vayas a utilizar.
Por ejemplo:

Código javascript:

Ver original$(document).ready(function(){
           
            $('.slider').mobilyslider({
                content: '.sliderContent',
                children: 'div',
                transition: 'fade',
                animationSpeed: 800,
                autoplay: false,
                autoplaySpeed: 3000,
                pauseOnHover: false,
                bullets: true,
                arrows: true,
                arrowsHide: false,
                prev: 'prev',
                next: 'next',
                animationStart: function(){},
                animationComplete: function(){}
            });
           
        });
 
 
// esto podría ir en un archivo llamado slider.js
// y en lugar de poner este código en las páginas donde lo utilices,
// bastaría con poner <script type="text/javascript" src="/js/slider.js"></script>
 
// es importante que todo archivo .js o script que utilice jquery vaya
// dentro de $(document).ready(function(){ });

Ahora intentemos hacer que todo funcione... Es raro que haya conflictos en el uso de jquery, pero se puede dar. A ver que te dice la consola de errores de firefox.

Es siempre mejor cargarlo externamente, a poder ser de Google, que va rápido. Así le evitas trabajo a tu servidor.

Primero miramos la consola de errores, si luego se pone más complicada la cosa, vamos quitando scripts hasta dar con el problema.

Un saludo.

Serralta · #5 (**permalink**) 20/09/2011, 02:05

Hola de nuevo,

primero de todo gracias por la implicación en el asunto, KoswiDigital.

Código PHP:

   
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/anchor.jquery.js" type="text/javascript"></script> 
 
 
<!-- SLIDER --> 
    <script src="js/slider/jquery.js" type="text/javascript"></script> 
        <script src="js/slider/mobilyslider.js" type="text/javascript"></script> 
        <script src="js/slider/slider.js" type="text/javascript"></script> 
<!-- SLIDER --> 
 
 
<!-- SCRIPT NAVIGATION_MENU --> 
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="js/nav/jquery.easing.1.3.js"></script> 
        <script type="text/javascript" src="js/nav/jquery.iconmenu.js"></script> 
        <script type="text/javascript" src="js/nav/navigator.js"></script> 
<!-- SCRIPT NAVIGATION_MENU -->

Así es como tengo el tema. He echo un js externo para el menu (navigator.js) y uno para el slider (slider.js) tal como tu me dijiste. El del navigator me funciona, almenos la consola de errores no me hace referencia a el. El slider me sigue dando problemas, la consola me da el siguiente error:

Error: $(".slider").mobilyslider is not a function
Archivo de origen: file:///C:/xampp/htdocs/web_pro%20-%20copia/js/slider/slider.js

Línea: 19

Aqui va el slider.js

Código PHP:

   
$(document).ready(function(){ 
            
            $('.slider').mobilyslider({ 
                content: '.sliderContent', 
                children: 'div', 
                transition: 'fade', 
                animationSpeed: 800, 
                autoplay: false, 
                autoplaySpeed: 3000, 
                pauseOnHover: false, 
                bullets: true, 
                arrows: true, 
                arrowsHide: false, 
                prev: 'prev', 
                next: 'next', 
                animationStart: function(){}, 
                animationComplete: function(){} 
            }); 
            
        });

Nose donde puede haber el problema...he probado con cambiar las cosas de sitio, primero un script, luego otro...los de google arriba, los de google abajo pero nada....ya se que no es lo suyo hacer las cosas asi, dando palos de ciego, pero es que a veces el jquery va de maravillas, pero otras...

Ya que estamos, no sabras algun manual para recomendarme? In spanish si puede ser...

Muchas gracias por todo!!

Saludos!

KoswiDigital · #6 (**permalink**) 20/09/2011, 07:00

Hola de nuevo.

En el primer código que has puesto, cargas 3 veces jquery. Reemplázalo por lo siguiente:

Código html:

Ver original<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/nav/jquery.easing.1.3.js"></script>
<script src="js/anchor.jquery.js" type="text/javascript"></script>
 
 
<!-- SLIDER -->
        <link rel="stylesheet" type="text/css" href="js/slider/css/mobilyslider.css" />
        <script src="js/slider/mobilyslider.js" type="text/javascript"></script>
        <script src="js/slider/slider.js" type="text/javascript"></script>
<!-- SLIDER -->
 
 
<!-- SCRIPT NAVIGATION_MENU -->
        <script type="text/javascript" src="js/nav/jquery.iconmenu.js"></script>
        <script type="text/javascript" src="js/nav/navigator.js"></script>
<!-- SCRIPT NAVIGATION_MENU -->

Así ponemos un poco de orden. Cargamos primero jquery desde google, acto seguido cargamos el ui y el easing. Antes de cargar el slider, deberíamos cargar el css de éste.

Y una vez lo tengas así, avisa y miramos. Recuerda, en cada archivo js que tú crees o que utilices para llamar a un plugin, comiénzalo con $(document).ready(function(){});

El error que te da es claro, no lo entiende como función porque probablemente no se esté cargando correctamente el plugin.

Respecto al manual... [http://www.desarrolloweb.com/manuale...l-jquery.html]. Como recomendación personal, hay un libro llamado "Aprende jQuery 1.3" de la editorial Anaya donde se explica muy bien el uso de este framework y con bastantes ejemplos.

A ver si hacemos progresos con ese código :) Un saludo.

Serralta · #7 (**permalink**) 21/09/2011, 16:06

Hola de nuevo!

repasando el codigo me di cuenta de las 3 llamadas a jquery al principio!
problema solucionado!

Muchas gracias por los consejos, he seguido implementando plugins y por ahora ningun problema, siempre fijandome en no llamar 2 veces la misma libreria...

la consola de errores tambien ayuda mucho!

Bueno KoswiDigital, muchas gracias por tu tiempo, seguiro con mi proyecto, quizas reviva este tema dentro de un par de dias,quien sabe!

Creo que me bajare el manual que me recomiendas, parece bastante completo...de todas formas, nunca se trabaja Javascript desde cero no? siempre te basas con una libreria?

Un placer!

KoswiDigital · #8 (**permalink**) 22/09/2011, 06:19

Era cuestión de ordenar un poco todo eso ;)

El manual de esa web está muy bien, pero el libro que te comento también es de gran ayuda. Y respecto a tu pregunta... Es diferente. jQuery es un framework que te permite trabajar con javascript de una manera mucho más sencilla. Aunque todo lo que hace jquery lo puedes hacer igualmente sólo con javascript, porque acaba siendo lo mismo.

El consejo: es imprescindible tener un mínimo de conocimientos en javascript, así como en el DOM.

Como ejemplo, te digo que es lo mismo esto:

Código Javascript:

Ver original// jQuery
var micapa = $('#micapa');

que esto otro:

Código Javascript:

Ver original// JavaScript
var micapa = document.getElementById('micapa');

La elección de utilizar javascript directamente o un framework es opcional, pero siempre es bueno tener conocimientos de la base, sea el lenguaje que sea.

Un saludo y suerte en tu proyecto :)