javascript - Using 1 jquery library in head other in body No Conflict Not Working -
i'm using 2 jquery same plugins of different versions , thing 1 works in body , other in head.
i tried using no conflict next tutorial: using different versions of jquery , jqueryui together
but nothing, guess may related 1 plugin beingness called body , other head, anyway maybe have suggestion solve :d
/*this head plugin*/ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> /*and body plugin*/ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { var current = 1; var iterate = function(){ var = parseint(current+1); var lis = $('#rotmenu').children('li').size(); if(i>lis) = 1; display($('#rotmenu li:nth-child('+i+')')); } display($('#rotmenu li:first')); var slidetime = setinterval(iterate,3000); $('#rotmenu li').bind('click',function(e){ cleartimeout(slidetime); display($(this)); e.preventdefault(); }); function display(elem){ var $this = elem; var repeat = false; if(current == parseint($this.index() + 1)) repeat = true; if(!repeat) $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginright':'-20px'},300,function(){ $(this).animate({'opacity':'0.7'},700); }); current = parseint($this.index() + 1); var elem = $('a',$this); elem.stop(true,true).animate({'marginright':'0px','opacity':'1.0'},300); var info_elem = elem.next(); $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeoutcirc',function(){ $('h1',$(this)).html(info_elem.find('.info_heading').html()); $(this).animate({'left':'0px'},400,'easeinoutquad'); }); $('#rot1 .description').animate({'bottom':'-270px'},500,'easeoutcirc',function(){ $('p',$(this)).html(info_elem.find('.info_description').html()); $(this).animate({'bottom':'0px'},400,'easeinoutquad'); }) $('#rot1').prepend( $('<img/>',{ style: 'opacity:0', classname: 'bg' }).load( function(){ $(this).animate({'opacity':'1'},600); $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){ $(this).remove(); }); } ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300') ); } }); </script>
there no need import jquery 2 times, in head , in body(?)...
just import plugins , declare scripts in head:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function() { console.log("inside 'head' tag declare plugins, scripts, css, etc..."); }); </script> </head> <body> <p>inside body build page divs, img's, p's, span's, etc ...</p> </body> </html> by way, noticed using different versions of jquery, 1.3 , lastly (1.9.1), should utilize latest version http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
and don't forget, jquery must first script declare, plugins, own code...
javascript jquery html plugins
No comments:
Post a Comment