Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Los scripts se anulan entre si

 Estas en el tema de Los scripts se anulan entre si en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/09/2011, 03:55
 
Fecha de Ingreso: abril-2010
Mensajes: 47
Antigüedad: 14 años, 6 meses
Puntos: 1
Los scripts se anulan entre si
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> 
  #2 (permalink)  
Antiguo 17/09/2011, 10:11
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años, 6 meses
Puntos: 37
Respuesta: Los scripts se anulan entre si
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
  1. <script src="js/jquery.js" type="text/javascript"></script>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
  3. <script type="text/javascript" src="js/nav/jquery.easing.1.3.js"></script>
  4. <script type="text/javascript" src="js/nav/jquery.iconmenu.js"></script>
  5. <script src="js/anchor.jquery.js" type="text/javascript"></script>
  6.  
  7. <!-- SLIDER -->
  8.         <script src="js/slider/mobilyslider.js" type="text/javascript"></script>
  9.         <script type="text/javascript">
  10.         $(document).ready(function(){
  11.             
  12.             $('.slider').mobilyslider({
  13.                 content: '.sliderContent',
  14.                 children: 'div',
  15.                 transition: 'fade',
  16.                 animationSpeed: 800,
  17.                 autoplay: false,
  18.                 autoplaySpeed: 3000,
  19.                 pauseOnHover: false,
  20.                 bullets: true,
  21.                 arrows: true,
  22.                 arrowsHide: false,
  23.                 prev: 'prev',
  24.                 next: 'next',
  25.                 animationStart: function(){},
  26.                 animationComplete: function(){}
  27.             });
  28.             
  29.         });
  30.         </script>
  31. <!-- SLIDER -->
  32.  
  33. <!-- SCRIPT NAVIGATION_MENU -->
  34.  
  35.         <script type="text/javascript">
  36.             $(document).ready(function() {
  37.                 $('#sti-menu').iconmenu();
  38.             });
  39.         </script>


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

Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #3 (permalink)  
Antiguo 17/09/2011, 11:00
 
Fecha de Ingreso: abril-2010
Mensajes: 47
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Los scripts se anulan entre si
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.
  #4 (permalink)  
Antiguo 17/09/2011, 15:12
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años, 6 meses
Puntos: 37
Respuesta: Los scripts se anulan entre si
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
  1. $(document).ready(function(){
  2.            
  3.             $('.slider').mobilyslider({
  4.                 content: '.sliderContent',
  5.                 children: 'div',
  6.                 transition: 'fade',
  7.                 animationSpeed: 800,
  8.                 autoplay: false,
  9.                 autoplaySpeed: 3000,
  10.                 pauseOnHover: false,
  11.                 bullets: true,
  12.                 arrows: true,
  13.                 arrowsHide: false,
  14.                 prev: 'prev',
  15.                 next: 'next',
  16.                 animationStart: function(){},
  17.                 animationComplete: function(){}
  18.             });
  19.            
  20.         });
  21.  
  22.  
  23. // esto podría ir en un archivo llamado slider.js
  24. // y en lugar de poner este código en las páginas donde lo utilices,
  25. // bastaría con poner <script type="text/javascript" src="/js/slider.js"></script>
  26.  
  27. // es importante que todo archivo .js o script que utilice jquery vaya
  28. // 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.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #5 (permalink)  
Antiguo 20/09/2011, 02:05
 
Fecha de Ingreso: abril-2010
Mensajes: 47
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Los scripts se anulan entre si
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!
  #6 (permalink)  
Antiguo 20/09/2011, 07:00
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años, 6 meses
Puntos: 37
Respuesta: Los scripts se anulan entre si
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
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
  3. <script type="text/javascript" src="js/nav/jquery.easing.1.3.js"></script>
  4. <script src="js/anchor.jquery.js" type="text/javascript"></script>
  5.  
  6.  
  7. <!-- SLIDER -->
  8.         <link rel="stylesheet" type="text/css" href="js/slider/css/mobilyslider.css" />
  9.         <script src="js/slider/mobilyslider.js" type="text/javascript"></script>
  10.         <script src="js/slider/slider.js" type="text/javascript"></script>
  11. <!-- SLIDER -->
  12.  
  13.  
  14. <!-- SCRIPT NAVIGATION_MENU -->
  15.         <script type="text/javascript" src="js/nav/jquery.iconmenu.js"></script>
  16.         <script type="text/javascript" src="js/nav/navigator.js"></script>
  17. <!-- 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.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #7 (permalink)  
Antiguo 21/09/2011, 16:06
 
Fecha de Ingreso: abril-2010
Mensajes: 47
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Los scripts se anulan entre si
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!
  #8 (permalink)  
Antiguo 22/09/2011, 06:19
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años, 6 meses
Puntos: 37
Respuesta: Los scripts se anulan entre si
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
  1. // jQuery
  2. var micapa = $('#micapa');

que esto otro:

Código Javascript: 
Ver original
  1. // JavaScript
  2. 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 :)
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.

Etiquetas: html, javascript, js, scripts
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:06.