Using 1 jquery library in head other in body No Conflict Not Working

Question

I'm using 2 jquery same plugins of different versions and the thing is one only works in body and the other in head.

I tried using no conflict following this tutorial: Using different versions of jQuery and jQueryUI together

But nothing, I guess it may be related with one plugin being called from the body and the other from head, anyway maybe you have a suggestion to solve this :D

/*This is the head plugin*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

/*And this is the 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 i = parseInt(current+1);
            var lis = $('#rotmenu').children('li').size();
            if(i>lis) i = 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>

António Almeida · Answer 1 · 2013-02-11T13:45:02.713

0

There is no need to import jQuery two times, in the head and in the body(?)...

Just import all your plugins and declare your scripts in the 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 the 'head' tag you declare your plugins, scripts, css, etc...");
        });
    </script>
</head>
<body>
    <p>Inside the body you build your page with divs, img's, p's, span's, etc ...</p>
</body>

</html>

By the way, I noticed that you are using to different versions of jQuery, 1.3 and last (1.9.1), you should use only the latest version http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

And don't forget, jQuery must be the first script to declare, then the plugins, then your own code...

edited Feb 11 '13 at 13:45

answered Feb 11 '13 at 01:36

António Almeida

9,620
8
59
66

Yes but as I said, If I don't declare it in the body it doesn't, work, I tried declaring it in the head, but then the plugin does not work. – Luis Ferrer Raventos Feb 11 '13 at 10:35
Probably, the problem is that you are using version 1.3 in the header, so you haven't support for some of your methods, try what I've said: In header: jQuery (latest), then easing plugin, then your own code. In body: Just HTML. – António Almeida Feb 11 '13 at 13:47
Okay right now I am in college and we have ftp acces closed so that we just concentrate in class work :D so I'll try it when I get home, thank you for your answer – Luis Ferrer Raventos Feb 11 '13 at 16:26
Anyway I'm looking in your answer and you forgot to add: – Luis Ferrer Raventos Feb 11 '13 at 16:29
in the code(and this is what doesn't let it work) – Luis Ferrer Raventos Feb 11 '13 at 16:29
This: ` – António Almeida Feb 11 '13 at 17:33
Yes I just asked my techer, told me the same, I'm gonna use the 1.3 that is the more updated version, put in the head and we will see :D – Luis Ferrer Raventos Feb 11 '13 at 17:38
No :O don't use the 1.3 version, use the latest 1.9.1 take a look here: http://jquery.com/ – António Almeida Feb 11 '13 at 17:40
Ok :D thank you will try now when I get home and post results :D thanks a lot for your help – Luis Ferrer Raventos Feb 11 '13 at 19:04
Hi I did what you said and got the code to work from head, the only thing is I still have the problem that one of the plugins (The contact Form) is not working... – Luis Ferrer Raventos Feb 11 '13 at 21:25
Solved it :D, some latest versions didn't make both scripts work. I used 1.8 and it worked :D – Luis Ferrer Raventos Feb 12 '13 at 02:11
@LuisFerrerRaventos I'm glad to help you, good luck with that project, don't forget to accept my answer if you found it usefull ... – António Almeida Feb 12 '13 at 20:01

Using 1 jquery library in head other in body No Conflict Not Working

1 Answers1