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

problema enlazar js

Estas en el tema de problema enlazar js en el foro de Frameworks JS en Foros del Web. Hola. Estoy intentando enlazar a mi pagina algunos efectos de este modo: Código PHP:      < script type = "text/javascript"  src = "./lib/jquery-1.4.2.min.js" > </script>     <script src="js/prototype.js" type="text/javascript"></script> ...
  #1 (permalink)  
Antiguo 23/12/2010, 08:44
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
problema enlazar js

Hola. Estoy intentando enlazar a mi pagina algunos efectos de este modo:

Código PHP:
    
<script type="text/javascript" src="./lib/jquery-1.4.2.min.js"></script>

    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

<script type='text/javascript' src='menu.js'></script>

<script type="text/javascript" src="./lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="./skins/tango/skin.css" /> 
el problema es que dependiendo de donde ponga el "jqyery-1.4.2.min.js" unos efectos me funcionan y otros no. Tal y como está puesto, por ejempli, me funciona el lightbox pero no funciona el scrollTo.

¿Alguien sabe solucionarlo?
  #2 (permalink)  
Antiguo 23/12/2010, 08:59
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

Estas usando noConflict de JQuery?, porque ambas librerias utilizan $ para atacar el DOM.
  #3 (permalink)  
Antiguo 23/12/2010, 09:21
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

Hola. Gracias por contestar.

El problema es que el conflicto lo tengo al enlazarlos, porque si pongo el "jqyery-1.4.2.min.js" justo delante de scrollTo, éste me funciona pero lightbox deja de funcionar.

Dentro del código javascript tengo dos de los efectos (los demás no tienen) que son:

Código PHP:

<script type="text/javascript">

  $.
noConflict();

$(
document).ready(function() {

    
//Speed of the slideshow
    
var speed 1000;
    
    
//You have to specify width and height in #slider CSS properties
    //After that, the following script will set the width and height accordingly
    
$('#mask-gallery, #gallery li').width($('#slider').width());    
    $(
'#gallery').width($('#slider').width() * $('#gallery li').length);
    $(
'#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
    
    
//Assign a timer, so it will run periodically
    
var run setInterval('newsscoller(0)'speed);    
    
    $(
'#gallery li:first, #excerpt li:first').addClass('selected');

    
//Pause the slidershow with clearInterval
    
$('#btn-pause').click(function () {
        
clearInterval(run);
        return 
false;
    });

    
//Continue the slideshow with setInterval
    
$('#btn-play').click(function () {
        
run setInterval('newsscoller(0)'speed);    
        return 
false;
    });
    
    
//Next Slide by calling the function
    
$('#btn-next').click(function () {
        
newsscoller(0);    
        return 
false;
    });    

    
//Previous slide by passing prev=1
    
$('#btn-prev').click(function () {
        
newsscoller(1);    
        return 
false;
    });    
    
    
//Mouse over, pause it, on mouse out, resume the slider show
    
$('#slider').hover(
    
        function() {
            
clearInterval(run);
        }, 
        function() {
            
run setInterval('newsscoller(0)'speed);    
        }
    );     
    
});


function 
newsscoller(prev) {

    
//Get the current selected item (with selected class), if none was found, get the first item
    
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
    var 
current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

    
//if prev is set to 1 (previous item)
    
if (prev) {
        
        
//Get previous sibling
        
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
        var 
next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
    
    
//if prev is set to 0 (next item)
    
} else {
        
        
//Get next sibling
        
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
        var 
next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
    }

    
//clear the selected class
    
$('#excerpt li, #gallery li').removeClass('selected');
    
    
//reassign the selected class to current items
    
next_image.addClass('selected');
    
next_excerpt.addClass('selected');

    
//Scroll the items
    
$('#mask-gallery').scrollTo(next_image800);        
    $(
'#mask-excerpt').scrollTo(next_excerpt800);                    
    
}





jQuery(document).ready(function() {
    
jQuery('#mycarousel').jcarousel({
        
verticaltrue,
        
scroll2
    
});
});
</script> 
Así, sigue sin funcionar. Mycarousel y scrollTo no funcionan y lightbox sí...
  #4 (permalink)  
Antiguo 23/12/2010, 09:49
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

Te dejo el link a otro post de un usuario con la misma problematica, mira los últimos posts.

Saludos.
  #5 (permalink)  
Antiguo 23/12/2010, 12:37
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

gracias por contestar. Lo he estado mirando pero nada.

He probado de mil maneras y no funciona. Ahora lo tengo así:

Código PHP:
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

        <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
<script type='text/javascript' src='menu.js'></script>
<script type="text/javascript" src="./lib/jquery.jcarousel.min.js"></script>

<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
                          ...script de scrollTo
</script> 

Funcionan todos menos scrollTo... ¿puede ser por prototype?
  #6 (permalink)  
Antiguo 23/12/2010, 12:43
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

La ultima librería en cargar debería ser JQuery:

Código Javascript:
Ver original
  1. <script src="js/prototype.js" type="text/javascript"></script>
  2. <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
  3. <script src="js/lightbox.js" type="text/javascript"></script>
  4. <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  5. <script type='text/javascript' src='menu.js'></script>
  6. <script type="text/javascript" src="./lib/jquery.jcarousel.min.js"></script>
  7. <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
  8.  
  9. <script type="text/javascript">
  10. jQuery.noConflict();
  11. jQuery(document).ready(function() {
  12.     jQuery('#mycarousel').jcarousel({
  13.         vertical: true,
  14.         scroll: 2
  15.     });
  16. });
  17. $(document).ready(function() {
  18.                           ...script de scrollTo
  19. });
  20. </script>

Si esto te falla deberías utilizar firebug para ver que error en concreto estas teniendo.
  #7 (permalink)  
Antiguo 23/12/2010, 13:31
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

sigue sin funcionar... (además no funciona el codigo para el resto de mi pagina... me refiero a los simples de SlideUp y fadeIn y tal..)

Tengo instalado firebug pero no se como podria indicarte el problema...
  #8 (permalink)  
Antiguo 23/12/2010, 17:12
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

Deberías ir por partes, desactiva el resto de javascript y vamos a intentar primero hacer co-existir el carrousel y el scrollTo.
Activa la consola de firebug y decime que errores te tira.
  #9 (permalink)  
Antiguo 23/12/2010, 17:41
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

Lo tengo así ahora mismo y me funciona carrousel, scrollTo y java normal, (pero no funciona lightbox):

Código PHP:
<script src="js/prototype.js" type="text/javascript"></script> 
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> 
<script src="js/lightbox.js" type="text/javascript"></script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
<script type='text/javascript' src='menu.js'></script> 
<script type="text/javascript" src="./lib/jquery.jcarousel.min.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo.js"></script> 

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});

$(document).ready(function() {

    ....codigo scrollTo
</script> 
y parece que firebug me da este error:

  #10 (permalink)  
Antiguo 23/12/2010, 18:22
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

Te falta lo mas importante el noConflict que es justamente el que hace que sea posible liberando el $, deberia ser asi:

Código Javascript:
Ver original
  1. <script src="js/prototype.js" type="text/javascript"></script>  
  2. <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>  
  3. <script src="js/lightbox.js" type="text/javascript"></script>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  5.      
  6. <script type='text/javascript' src='menu.js'></script>  
  7. <script type="text/javascript" src="./lib/jquery.jcarousel.min.js"></script>  
  8. <script type="text/javascript" src="js/jquery.scrollTo.js"></script>  
  9.  
  10. <script type="text/javascript">
  11. jQuery.noConflict();
  12. jQuery(document).ready(function() {
  13.     jQuery('#mycarousel').jcarousel({
  14.         vertical: true,
  15.         scroll: 2
  16.     });
  17. });
  18.  
  19. $(document).ready(function() {
  20.     ....codigo scrollTo
  21. });
  22. </script>

Y de la consola de firebug, la pestaña que me interesa es una que tenes desactivada, la de Consola, te aconsejo que mientras estés trabajando con js siempre tengas esa pestaña activa, es una herramienta fundamental.

Saludos.
  #11 (permalink)  
Antiguo 23/12/2010, 18:46
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

El problema es que antes ya tenia el NoConflict como ponia arriba, y solo me funcionaba el lightbox, lo demás nada... por eso lo he quitado
  #12 (permalink)  
Antiguo 23/12/2010, 18:53
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

Cita:
Iniciado por motorinapronto Ver Mensaje
El problema es que antes ya tenia el NoConflict como ponia arriba, y solo me funcionaba el lightbox, lo demás nada... por eso lo he quitado
Ok, pero el noConflict es mandatario, si falla es porque el carousel que estas usando no esta preparado para ser utilizado con varias librerías, me podrías indicar con algún link cual es?, cuando puedas postea el error que te de en la consola.
  #13 (permalink)  
Antiguo 24/12/2010, 03:43
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

hola de nuevo. La consola me da 2 errores.

Estos son los errores de la consola:

$(document).ready is not a function
$(document).ready(function() {

me dice que es en: index.html#aqui (línea 36), osea en el inicio de scrollTo, aqui:

Código PHP:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    
jQuery('#mycarousel').jcarousel({
        
verticaltrue,
        
scroll2
    
});
});

$(
document).ready(function() {

    
//Speed of the slideshow
    
var speed 3500

El otro error es:

$(" #nav ul ") is null
$(" #nav ul ").css({display: "none"}); // Opera Fix

en menu.js (línea 2), osea aqui:

Código PHP:
function mainmenu(){
2$(" #nav ul ").css({display"none"}); // Opera Fix
3$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility"visible",display"none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility"hidden"});
});
8}
9
10
11
12 
$(document).ready(function(){
13 mainmenu();
14}); 

Parece q es el menu q tengo puesto.

Por otro lado, estos son los links de los plugins:

http://sorgalla.com/projects/jcarousel/#Examples
http://www.queness.com/post/443/jque...ption-tutorial
http://www.kriesi.at/archives/create...-it-via-jquery

Última edición por motorinapronto; 24/12/2010 a las 03:59
  #14 (permalink)  
Antiguo 24/12/2010, 05:12
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

El problema es que seguís utilizando $ cuando deberías utilizar jQuery.

Código Javascript:
Ver original
  1. //Prototype no tiene ready tiene loaded sino recuerdo mal
  2. //y se dispara bastante mas tarde, vamos a probar dejarlo dentro del ready de jQuery
  3. jQuery.noConflict();
  4. jQuery(document).ready(function() {
  5.     jQuery('#mycarousel').jcarousel({
  6.         vertical: true,
  7.         scroll: 2
  8.     });
  9.   //Speed of the slideshow
  10.     var speed = 3500;
  11.     .....
  12. });

Con respecto al menu tenes dos soluciones o cambias los $ por jQuery o haces algo asi:

Código Javascript:
Ver original
  1. (function($){
  2.     //aqui el $ es el de jQuery
  3.     function mainmenu(){
  4.         var nav = $("#nav ul ");
  5.         nav.css({display: "none"}); // Opera Fix
  6.         nav.hover(function(){
  7.             $(this).find('ul:first').css(
  8.                          {visibility: "visible",display: "none"}).show(400);
  9.         },function(){
  10.             $(this).find('ul:first').css({visibility: "hidden"});
  11.         });
  12.     }
  13.     $(document).ready(function(){
  14.         mainmenu();
  15.     });    
  16. })(jQuery);

Probalo y nos comentas.
  #15 (permalink)  
Antiguo 24/12/2010, 07:18
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

he puesto el codigo q me indicas y sustituido el $ por jquery como me indicas (eso ya no me da error) y me funciona sólo lightbox y carousel (lo demas nada...)

Ahora me aparece este error nuevo:

$("#mask-gallery, #gallery li") is null
$('#mask-gallery, #gallery li').width($('#slider').width());

y dice que es aqui:

Código PHP:

jQuery
(document).ready(function() {

    
//Speed of the slideshow
    
var speed 3500;
    
    
//You have to specify width and height in #slider CSS properties
    //After that, the following script will set the width and height accordingly
    
$('#mask-gallery, #gallery li').width($('#slider').width());    
    $(
'#gallery').width($('#slider').width() * $('#gallery li').length);
    $(
'#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
    
    
//Assign a timer, so it will run periodically
    
var run setInterval('newsscoller(0)'speed); 
pero eso no deberia ser problema porque es el codigo del plugin...


gracias por tu ayuda
  #16 (permalink)  
Antiguo 24/12/2010, 07:28
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

El problema es el mismo, el código afecta a prototype o jQuery?, por como lo estas utilizando entiendo que es jQuery y por lo tanto deberías cambiar los $ por jQuery.

Código Javascript:
Ver original
  1. jQuery(document).ready(function() {
  2.  
  3.     //Speed of the slideshow
  4.     var speed = 3500;
  5.    
  6.     //You have to specify width and height in #slider CSS properties
  7.     //After that, the following script will set the width and height accordingly
  8.     jQuery('#mask-gallery, #gallery li').width(jQuery('#slider').width());    
  9.     jQuery('#gallery').width(jQuery('#slider').width() * jQuery('#gallery li').length);
  10.     jQuery('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height(jQuery('#slider').height());
  11.    
  12.     //Assign a timer, so it will run periodically
  13.     var run = setInterval('newsscoller(0)', speed);
  14. });
  #17 (permalink)  
Antiguo 24/12/2010, 09:22
 
Fecha de Ingreso: noviembre-2010
Mensajes: 101
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema enlazar js

He sustituido los $ por jQuery en todo el codigo y ya funciona scrollTo. El que no funcionaba luego era el menu... pero cambiando el orden de llamada he conseguido q funcionara tb :)

Y ahora el codigo javascript tampoco me funcionaba, pero poniendo jQuery en vez de $ en todo sí que va. Así que ahora me funciona todo!

Mil gracias por todo!
  #18 (permalink)  
Antiguo 25/08/2011, 06:32
 
Fecha de Ingreso: julio-2007
Ubicación: Gran Canaria (España).
Mensajes: 13
Antigüedad: 17 años, 4 meses
Puntos: 1
Respuesta: problema enlazar js

Y en que orden lo pusiste al final? pq yo tengo el mismito problema y he hecho todo eso y nada... perdonen por responder con opst pasados pero no hay nada más parecido en el foro a lo mio
  #19 (permalink)  
Antiguo 25/08/2011, 09:10
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: problema enlazar js

jQuery debe ser la última librería en cargar.

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)

Etiquetas: enlazar, js
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




La zona horaria es GMT -6. Ahora son las 04:25.