[Resolvido] 2 ou mais JQuery na mesma página dá problema.

fmaciel3 · July 6, 2011

Boa noite galera,

Sou novo aqui no site , e tenho muito que aprender mesmo ainda.

Mas estou me esforçando litros.

Minha dúvida foi a seguinte, eu recentemente coloquei na página inicial 2 efeitos do JQuery o lavalamp e o carousel, até ai tudo bem mais um deles parou de funcionar que foi o lavalamp e o outro ficou normal .

No momento coloquei o que estava dando problema em uma em <head> e a mesma fechando mas não funcionou.

segue os scritps

<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript">
   $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
<link href="css/cascarousel.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/infinitecarousel/jquery.infinitecarousel2.js"></script>

<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel();
});
</script>

o efeito menu sumiu da primeira página e só aparece na página da empresa.

http://www.artelinearportas.com.br/

Como fazer para voltar ele e centralizar esse slideshow?

Abraço a todos

William Bruno · July 6, 2011

faça assim:

<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>

<link href="css/cascarousel.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/infinitecarousel/jquery.infinitecarousel2.js"></script>

<script type="text/javascript">
$(function(){
  $('#carousel').infiniteCarousel();
  $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 });
});
</script>

entendeu ?

fmaciel3 · July 6, 2011

aaaaaaaaaaaaa muleke tu é sinistro mesmo.

entendi sim a parada tem que colocar tudo em um código e uma única function.

Minha pergunta seria se eu coloca-se o raio do lightbox lá também dentro dessa function ele funfaria.

abrs.

Juninho Vox · November 11, 2011

Fera no meu caso eu fiz de todas as maneiras que eu entendi por dar certo usando o seu exemplo, porém ainda estou com erros.

Abaixo o código como estou tentando, e só funciona o .accordion:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jflow.plus.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>

<script language="javascript">

$(document).ready(function(){

	$('#efeito').accordion({
		autoheight:false
	});

    $("#myController").jFlow({
		controller: ".jFlowControl",
		slideWrapper : "#jFlowSlider",
		slides: "#mySlides",
		selectedWrapper: "jFlowSelected",
		width: "960px",
		height: "300px",
		duration: 400,
		prev: ".jFlowPrev",
		next: ".jFlowNext",
		auto: true	
  		});


});
</script>

-----------------------------------------------------------

Da maneira abaixo funciona só o .jFlow:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jflow.plus.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>

<script language="javascript">

$(document).ready(function(){
	var $j = jQuery.noConflict();


    $("#myController").jFlow({
		controller: ".jFlowControl",
		slideWrapper : "#jFlowSlider",
		slides: "#mySlides",
		selectedWrapper: "jFlowSelected",
		width: "960px",
		height: "300px",
		duration: 400,
		prev: ".jFlowPrev",
		next: ".jFlowNext",
		auto: true	
  		});


});
</script>

<script type="text/javascript">

$(function(){
$('#efeito').accordion({
autoheight:false
});
});
</script>

-----------------------------------------------------------

Fera, não sei onde se quer tentar mais.

Eu li tantos tutoriais e não entendi quase nada, porém tentei de todas as maneiras que os tutoriais passam mas não deu certo!

Peço uma ajuda sua se possível.

Obrigado

Abraços

William Bruno · November 11, 2011

ta vendo este trecho:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jflow.plus.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>

deixe assim:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jflow.plus.js"></script>

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

entendeu ? o arquivo jquery ou jquery.min são a mesma coisa, por isso q você só deve importá-lo uma única vez. :lol:

Laudos · November 17, 2011

Estou com problemas com o plugin tambem, os links das paginas não querem selecionar, nem os campos de imputs, n selecionam para fazer login, somente retirando esta primeira linha do script q tudo fica acessivel, porém o plugin n funciona,calguem sabe dizer oq faço?

$(window).load(function(){

$('#k3dCarousel').k3dCarousel();

});

</script>

William Bruno · November 17, 2011

o seu problema parece ser de css.

crie um novo tópico, e poste um link para o teu site.

Mario Ernesto · December 14, 2011

to com o seguinte problema quando ativa um o outro desativa e vice e versa.

<link rel="stylesheet" type="text/css" href="include/css/style.css"/>
<script src="include/js/jquery.min.js" type="text/javascript"></script>
<script src="include/js/jquery.orbit.min.js" type="text/javascript"></script>
<!--[if IE]>
		     <style type="text/css">
		         .timer { display: none !important; }
		         div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
		    </style>
		<![endif]-->

	<!-- Run the plugin -->
	<script type="text/javascript">
$(window).load(function() {
    $('#featured').orbit({
  'bullets' : true,		
  'bulletThumbs': true,
         'bulletThumbLocation': 'orbit/'
    });
});
</script>
<!-- Mootools - the core -->
<script type="text/javascript" src="include/js/mootools-1.2-core-yc.js"></script>
   <!--Toggle effect (show/hide login form) -->
<script type="text/javascript" src="include/js/mootools-1.2-more.js"></script>

<script type="text/javascript" src="include/js/fx.slide.js"></script>

wagsoler · February 14, 2012

estou com o mesmo problema

o segundo script roda normalmente, porem o primeiro acaba dando erro !

   <script type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
   <script type="text/javascript" src="script/hoverIntent.js"></script>
   <script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/script.js"></script>
   <script type="text/javascript">
       // initialise plugins
       jQuery(function () {
           jQuery('ul.sf-menu').superfish();
       });        
   </script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>   
<script type="text/javascript">
       $(function() {
           var offset = $("#sidebar").offset();
           var topPadding = 15;
           $(window).scroll(function() {
               if ($(window).scrollTop() > offset.top) {
                   $("#sidebar").stop().animate({
                       marginTop: $(window).scrollTop() - offset.top + topPadding
                   });
               } else {
                   $("#sidebar").stop().animate({
                       marginTop: 0
                   });
               };
           });
       });
   </script>

William Bruno · February 14, 2012

@wagsoler, no seu caso, deixe assim:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>   
   <script type="text/javascript" src="script/hoverIntent.js"></script>
   <script type="text/javascript" src="script/superfish.js"></script>
       <script type="text/javascript" src="script/script.js"></script>
   <script type="text/javascript">
       // initialise plugins
       jQuery(function () {
           jQuery('ul.sf-menu').superfish();
       });        
   </script>
       <script type="text/javascript">
       $(function() {
           var offset = $("#sidebar").offset();
           var topPadding = 15;
           $(window).scroll(function() {
               if ($(window).scrollTop() > offset.top) {
                   $("#sidebar").stop().animate({
                       marginTop: $(window).scrollTop() - offset.top + topPadding
                   });
               } else {
                   $("#sidebar").stop().animate({
                       marginTop: 0
                   });
               };
           });
       });
   </script>

@Mario Ernesto, você precisa do .noConflict(), pq está usando jQuery e mootools

http://wbruno.com.br/2011/08/24/noconflict-jquery-usando-2-bibliotecas-javascript-alias/

wagsoler · February 14, 2012

Ok william, muito obrigado !

amanha logo quando chegar em meu escritório ja farei os teste e vamos ver no que irá dar !

mas é bem provavel que de certo sim, pois você refez o codigo de todos na pagina e deu certo !

te dou uma posição amanha ok ?

abraço e VLWWWW :D

wagsoler · February 15, 2012

Deu certo !!! :D

mto obrigado william !!!

Avryneo · June 13, 2012

Boa noite William Bruno...

Tô com um problema ma inserção de duas jQuery em um mesmo projeto...

Neste caso somente o primeiro script está funcionando. Quando removo a jQuery jquery.easing.min.js o segundo script funciona normalmente, porém o primeiro pára.

<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
   $(function() {
       $("#lava").lavaLamp({
           fx: "backout",
           speed: 700,
           click: function(event, menuItem) {
               return false;
           }
       });
   });
</script>

<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript"> 	
function jcarousel_initAuto(carousel)
{
	// Disable autoscrolling if the user clicks the prev or next button.
	carousel.buttonNext.bind('click', function() {
		carousel.startAuto(0);
	});
		carousel.buttonPrev.bind('click', function() {
		carousel.startAuto(0);
	});
		// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(function() {
		carousel.stopAuto();
	}, function() {
		carousel.startAuto();
	});
};

jQuery(document).ready(function() {
	jQuery('#jcarousel_campo').jcarousel({
		auto: 5,
		scroll: 3,
		wrap: 'last',
		initAuto: jcarousel_initAuto
	});
});
</script>

Se tiver uma solução, por favor, me ajude.

ismael_alvares · July 21, 2012

Amigo estou tendo um problema com meu site a galeria lightbox está funcionando só que o meu banner parou ele roda em jquery...

http://www.imperialinformatica.com.br/novo/varejo.php

Código:

$(function() {

$('#gallery a').lightBox();

});

</script>

PMPauloMaia · March 15, 2013

Tenho esses 2 jquery,

jquery.lightbox-0.5.js

jquery.min.js

Eles não estão trabalhando junto !

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="PASTA/Scripts/Galery/js/jquery.js"></script>
    <script type="text/javascript" src="PASTA\Scripts/jquery.href.js"></script>
    
    <script type="text/javascript" src="PASTA/Scripts/Galery/js/jquery.lightbox-0.5.js"></script>    
    <script type="text/javascript">
        $(function() {
        $('#gallery a').lightBox();
         });
    </script>    
    

<script type="text/javascript" src="PASTA/Scripts/Scroll/js/jquery.min.js"></script> 
<script type="text/javascript" src="PASTA/Scripts/Scroll/js/jquery.nicescroll.min.js"></script> 
<script>
  $(document).ready(function() { var nice = $("html").niceScroll(); });    
</script>

Alguém sabe como importar sem Bug ?

William Bruno · March 15, 2013

o problema é q vc ta chamando 2 vezes a lib jQuery. Chame apenas uma vez:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="PASTA/Scripts/Galery/js/jquery.js"></script>
    <script type="text/javascript" src="PASTA\Scripts/jquery.href.js"></script>
    
    <script type="text/javascript" src="PASTA/Scripts/Galery/js/jquery.lightbox-0.5.js"></script>    
    <script type="text/javascript">
        $(function() {
        $('#gallery a').lightBox();
         });
    </script>    
    
<!-- removi daqui -->
<script type="text/javascript" src="PASTA/Scripts/Scroll/js/jquery.nicescroll.min.js"></script> 
<script>
  $(document).ready(function() { var nice = $("html").niceScroll(); }); <!--  A página do documento (corpo) -->   
</script>

PMPauloMaia · March 15, 2013

ok, William Bruno

Precisei chamar os 2 , porem um seguido do outro ! Uma linha seguida da outra para importar no mesmo tempo !

<script type="text/javascript" src="PASTA/Scripts/Galery/js/jquery.js"></script>

<script type="text/javascript" src="PASTA/Scripts/Scroll/js/jquery.min.js"></script>

Tirar não resolveu !

Esta foi a solução para mim !

Obrigado.......

Rafael Mendonca · April 24, 2013

Estou tentando usar os jquerys em um site de página única http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/ e http://tympanus.net/codrops/2011/07/22/vertical-sliding-accordion/ ao utilizar estes jquery's nenhum funciona.

<head>...
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>

</head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.vaccordion.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pfold.js"></script>


<script type="text/javascript">
$(function() {
var opened = false;
$( '#uc-container' ).pfold();
$('#va-accordion').vaccordion({
expandedHeight : 400,
animSpeed : 400,
animOpacity : 1,
visibleSlices : 20
});
var opened = false;
$( '#grid > div.uc-container' ).each( function( i ) {


var $item = $( this ), direction;


switch( i ) {
case 0 : direction = ['right','bottom']; break;
case 1 : direction = ['left','bottom']; break;
case 2 : direction = ['right','top']; break;
case 3 : direction = ['left','top']; break;
}


var pfold = $item.pfold( {
folddirection : direction,
speed : 300,
onEndFolding : function() { opened = false; },
centered : true
} );


$item.find( 'span.icon-eye' ).on( 'click', function() {


if( !opened ) {
opened = true;
pfold.unfold();
}




} ).end().find( 'span.icon-cancel' ).on( 'click', function() {


pfold.fold();


} );


} );


});




</script>

para rolagem suave pretendo colocar o seguinte jquery(este ainda não testei)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 300);
return false;
});
}
}
});
});
// ]]></script>

William Bruno · April 24, 2013

vc ta chamando 2 vezes, esse trecho:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.vaccordion.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pfold.js"></script>

deixe assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.vaccordion.js"></script>
        
<script type="text/javascript" src="js/jquery.pfold.js"></script>

Marcelo Rafael · July 2, 2013

Pessoal

estou com um problema usando jquery, sou novo nesse assunto e ainda apanho muito.

abaixo o site que estou montando:

http://www.construtoraprimms.com.br/index.php

O problema é que uso jquery no menu (funfando bem)

e no slideshow (abre normal mas quando passo o mouse assume as funções do menu)

abaixo meu codigo:

<!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>Primms - Construtora e Incorporadora | Gravataí/RS</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
 //Associo o jQuery a uma variavél qualquer
var xyz = jQuery.noConflict();
</script>


<link href="css/slideshow.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<script type="text/javascript">
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>


</head>


<body>

Archived

[Resolvido] 2 ou mais JQuery na mesma página dá problema.

Recommended Posts

fmaciel3 0

Share this post

Link to post

Share on other sites

William Bruno 1501

Share this post

Link to post

Share on other sites

fmaciel3 0

Share this post

Link to post

Share on other sites

Juninho Vox 0

Share this post

Link to post

Share on other sites

William Bruno 1501

Share this post

Link to post

Share on other sites

Laudos 0

Share this post

Link to post

Share on other sites

William Bruno 1501

Share this post

Link to post

Share on other sites

Mario Ernesto 0

Share this post

Link to post

Share on other sites

wagsoler 0

Share this post

Link to post

Share on other sites

William Bruno 1501

Share this post

Link to post

Share on other sites

wagsoler 0

Share this post

Link to post

Share on other sites

wagsoler 0

Share this post

Link to post

Share on other sites

Avryneo 0

Share this post

Link to post

Share on other sites

ismael_alvares 0

Share this post

Link to post

Share on other sites

PMPauloMaia 1

Share this post

Link to post

Share on other sites

William Bruno 1501

Share this post

Link to post

Share on other sites

PMPauloMaia 1

Share this post

Link to post

Share on other sites

Rafael Mendonca 0

Share this post

Link to post

Share on other sites

William Bruno 1501

Share this post

Link to post

Share on other sites

Marcelo Rafael 0