[Resolvido] conflito de códigos jquery

delgisa · Setembro 29, 2010

Saudações!

Tenho a impressão que está havendo conflito de variáveis ou versões de jquery, mas não consigo resolver:

Eu tenho um código em jquery (slide) onde peguei exemplo deste site: http://demo.webdeveloperplus.com/featured-content-slider/

E funcionava perfeitamente até eu inserir outro código (Jcarousel), onde peguei exemplo neste link: http://sorgalla.com/projects/jcarousel/examples/static_auto.html

Agora o código de (Jcarousel)funciona, mas o (slide) agora parou de funcionar e deu aqueles erros de javascript: "O objeto não dá suporte para a propriedade ou método" e referencia a linha 15 caracter 3, que no meu código é essa:

$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});

O code da minha página é este:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%Response.Charset="ISO-8859-1" %>
<%
Session.LCID = 1046
%>
<!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" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=EmulateIE8" /><!-- Esta linha força o navegador a emular o IE 8. Pode ser que no IE 6 o site nem seja exibido-->
<title>Itaprevi - Itaboraí-RJ</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all"/>
<!-- Início slide página principal -->
<link rel="stylesheet" type="text/css" href="slide.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>
<!-- Término slide página principal -->

<!-- ***********INÍCIO SLIDE ANIVERSARIANTES-->
<link href="style_aniversariante.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skin.css" />
<script type="text/javascript">


function mycarousel_initCallback(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('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});

</script>

<!-- FIM SLIDE ANIVERSARIANTES-->


<!-- Javascript para arredondar cantos-->

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#conteudo","big");
}
</script>

<!-- Final Javascript arredondar cantos -->
</head>

<body>
<!-- inicio da div geral-->
<!-- **********************INÍCIO SLIDE PÁGINA INCIAL ************************-->
      		<div id="featured" >  
      	<ul class="ui-tabs-nav">  
    		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="img/noticias/image1-small.jpg" alt="" /><span>15+ Excellent High Speed P</span></a></li>  
    		<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="img/noticias/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure</span></a></li>  
    		<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="img/noticias/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>  
    		<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="img/noticias/image4-small.jpg" alt="" /><span>Create a Vintage Photograph</span></a></li>  
        </ul>  
       <!-- First Content -->  
      	<div id="fragment-1" class="ui-tabs-panel" style="">  
            <img src="img/noticias/image1.jpg" alt="" width="300" height="250" />  
                <div class="info" >  
                    <h2><a href="#" >15+ Excellent High Sp</a></h2>  
                    <p>Lorem ipsum dolor sit amet, consecing elit. diam....<a href="#" >read more</a></p>  
                </div>  
          </div>  
        <!-- Second Content -->  
      	<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">  
      	<img src="img/noticias/image2.jpg" alt=""  width="300" height="250" />  
    		<div class="info" >  
    			<h2><a href="#" >20 Beautiful Long Exposur</a></h2>  
    			<p>Vestibulum leo quam, accumsan ttitor a, ....<a href="#" >read more</a></p>  
    		</div>  
      </div>  
        <!-- Third Content -->  
      	<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">  
    	<img src="img/noticias/image3.jpg" alt=""  width="300" height="250" />  
    		<div class="info" >  
    			<h2><a href="#" >35 Amazing Logo Desi</a></h2>  
    			<p>liquam erat volutpat. Proifacilisis soll....<a href="#" >read more</a></p>  
    		</div>  
      </div>  
        <!-- Fourth Content -->  
      	<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">  
    	<img src="img/noticias/image4.jpg" alt=""  width="300" height="250" />  
    		<div class="info" >  
    			<h2><a href="#" >23+ Excellent High Sp</a></h2>  
    			<p>Lorem ipsum dolor sit amet, consecing elit. diam....<a href="#" >read more</a></p> 
    		</div>  
      </div>       
      </div> 
<!-- **********************FINAL SLIDE PÁGINA INICIAL ************************-->
			
<hr />            
<!-- INÍCIO ANIVERSARIANTES-->            
            <div id="wrap">
            	<h1>jCarousel</h1>
            	<h2>Riding carousels with jQuery</h2>
            
            	<h3>Carousel with autoscrolling</h3>
            	<p>
                    Autoscrolling is enabled and the interval is set to <code>2</code> seconds.
                    Autoscrolling pauses when the user moves the cursor over the images and stops
                    when the user clicks the next or prev button. <code>wrap</code> is set to
                    <code>"last"</code>.
            	</p>
            
                	<ul id="mycarousel" class="jcarousel-skin-tango">
                        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
                        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
                	</ul>            
            </div>
<!-- FINAL ANIVERSARIANTES-->            
      </div>
->           
    </div>
<!-- fim da Div conteúdo-->
</div>
<!--fim da div geral -->
</body>
</html>

Abraços

Jardel

William Bruno · Setembro 29, 2010

você cometeu o mesmo erro desse cara aqui:

http://forum.imasters.com.br/index.php?/topic/410411-iniciante-javascrpt/page__view__findpost__p__1613039

solução:

inclua a biblioteca jQuery apenas uma única vez.

delgisa · Setembro 29, 2010

você cometeu o mesmo erro desse cara aqui:

http://forum.imasters.com.br/index.php?/topic/410411-iniciante-javascrpt/page__view__findpost__p__1613039

solução:

inclua a biblioteca jQuery apenas uma única vez.

Olá William, você está certo.

Excluí este código e agora funcionou

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Eu tinha feito semelhante, mas antes eu tinha excluido a versão anterior, pensando que seeu deixasse a versão mais nova atenderia a todos. Mas não dava certo, e como eu não tinha certeza que seria esse prblema, eu nem insistia. Mas depois que você enfatizou que era esse o problema, eu exclui a versão mais nova e deu certo.

Valeu!

Abraços

Jardel

William Bruno · Setembro 29, 2010

Então cara, na verdade deixe a versão nova.

Só que em cima de tudo, entendeu ?!

antes de colocar qq código com sintaxe jQuery, ou incluir qq plugin, coloque lá em cima, o <script> com src para a versão da lib mais nova.

se você fizer:

<script>
$(document).ready(function(){
   alert( 'jQuery iniciado!' );
});
</script>
<script src="jquery.js"></script>

vai dar erro.

você precisa que seja ao contrário:

<script src="jquery.js"></script>
<script>
$(document).ready(function(){
   alert( 'jQuery iniciado!' );
});
</script>

pegou ? ;)

delgisa · Setembro 29, 2010

Ceerto!

Vou tentar, depois eu posto aqui o resultado.

Valeu

Entrar

Arquivado

[Resolvido] conflito de códigos jquery

Recommended Posts

delgisa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

delgisa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

delgisa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante