Javascript conflict in Html & CSS

Question

I have a conflict with my JS as one of the scripts isn't functioning properly, I'm trying to use more than one javascript in my document, I will be using three and I'm getting a conflict already and I only have two in the document so far... :(

First in the head:

<script type="text/javascript" src="javascript/jquery_1.3.2.js"></script>
<script type="text/javascript" src="javascript/jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#jcarouselMetro').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
    jQuery('#jcarouselInvites').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
});
</script>

Second in the body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript/jquery-css-transform.js" type="text/javascript"></script>
<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
    function(){
        var $this = $(this);
        expand($this);
    },
    function(){
        var $this = $(this);
        collapse($this);
    }
);
function expand($elem){
    var angle = 0;
    var t = setInterval(function () {
        if(angle == 1440){
            clearInterval(t);
            return;
        }
        angle += 40;
        $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
    },10);
    $elem.stop().animate({width:'243px'}, 1000)
                .find('.item_content').fadeIn(400,function(){
                    $(this).find('p').stop(true,true).fadeIn(600);
                });
}
function collapse($elem){
    var angle = 1440;
    var t = setInterval(function () {
        if(angle == 0){
            clearInterval(t);
            return;
        }
        angle -= 40;
        $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
    },10);
    $elem.stop().animate({width:'52px'}, 1000)
                .find('.item_content')
                .stop(true,true)
                .fadeOut()
                .find('p')
                .stop(true,true)
                .fadeOut();
}
</script>

From what I can see it's the "function" that may be causing the issue. Please help... And how can you avoid these issues, I'm sure loads of people use multiple js all the time, do you just hope and pray it doesnt mess up?

Edited:

<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#jcarouselMetro').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
    jQuery('#jcarouselInvites').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
});
</script>

The version of jQuery you're using (1.3.2) is ancient. edit - ah, you're trying to import two different versions of the library. That's generally a terrible idea and if at all possible you should spend your energy getting rid of whatever dependency you have on that antique version. — Pointy
– Pointy, Commented Mar 13, 2013 at 0:22
@Pointy: Sadly, sometimes the client is the dependency... :-). I've had to work for a company who's clients, to this day, are using IE6... yes, IE6 is dead, but some companies just set up their systems years back and are reluctant to have another look at them — Elias Van Ootegem
– Elias Van Ootegem, Commented Mar 13, 2013 at 0:27
@Pointy I updated the library, please see the edit on the original post, and with the updated script no changes have happened, it still malfunctions... I also tested the script alone with the updated library and it worked fine in case you were wondering. — BoneStarr
– BoneStarr, Commented Mar 13, 2013 at 1:02

lukeocom · Accepted Answer · 2013-03-13 01:49:22Z

Cleaning up your source code may help the debugging process.. Instead of using javascript contained within script tags within the body/head of your document, you can just create a separate javascript file. Place all of your external script tags within the head of the document. Your custom javascript file which contains all the above code should be called last.

Your click/hover functions should be contained/bound within your document.ready function.

Also, you are calling duplicate scripts, jcarousel.js and jcarousel.min.js are the same script. One is just the minified version. You are likely producing conflicts because of this, and the same would be true for your jquery calls. Try using just one version of jQuery, ie the latest version from scriptsrc.net

Your resulting html document would therefore look something like this

<head>
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-css-transform.js"></script>
<script type="text/javascript" src="javascript/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>

<!-- your custom js -->
<script type="text/javascript" src="javascript/yourCustom.js"></script>
</head>

your custom js file would then look like this..

function expand($elem) {
    var angle = 0;
    var t = setInterval(function() {
        if (angle == 1440) {
            clearInterval(t);
            return;
        }
        angle += 40;
        $('.link', $elem).stop().animate({
            rotate : '+=-40deg'
        }, 0);
    }, 10);
    $elem.stop().animate({
        width : '243px'
    }, 1000).find('.item_content').fadeIn(400, function() {
        $(this).find('p').stop(true, true).fadeIn(600);
    });
}//end expand

function collapse($elem) {
    var angle = 1440;
    var t = setInterval(function() {
        if (angle == 0) {
            clearInterval(t);
            return;
        }
        angle -= 40;
        $('.link', $elem).stop().animate({
            rotate : '+=40deg'
        }, 0);
    }, 10);
    $elem.stop().animate({
        width : '52px'
    }, 1000).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}//end collapse


$(document).ready(function() {

    //Carousel setup
    $('#jcarouselMetro').jcarousel({
        scroll : 1,
        wrap : 'both'
    });
    $('#jcarouselInvites').jcarousel({
        scroll : 1,
        wrap : 'both'
    });
    //end carousel

    //item hover function
    $('.item').hover(function() {
        var $this = $(this);
        expand($this);
    }, function() {
        var $this = $(this);
        collapse($this);
    });
    //end hover

});//end document ready

Further to all of this, you may need to define a clearInterval function. Unless it is part of one of the many libraries you have included, as it is called in your expand and collapse functions.

Hope this helps...

Jimmy Hillis · Accepted Answer · 2013-03-13 01:55:28Z

I can see two issues with conflicting JavaScript code being included twice. Firstly you're loading two versions of the same carousel library here:

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

The first is a minified version of of the same code. You only need one, so remove the second line above as it won't be required and it's just a larger version of the same file. This may not be causing the issue, but it's not right.

Secondly you have two versions of jQuery in your code and that will also cause significant issues because you're loading them at very different times in your page and they will have very different functionality. You can fix this using noConflict:

<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    var jq142 = jQuery.noConflict();
    jq142(document).ready(function () {
        jQuery('#jcarouselMetro').jcarousel({
            scroll: 1,
            wrap: 'both'
        });
        jQuery('#jcarouselInvites').jcarousel({
            scroll: 1,
            wrap: 'both'
        });
    });
</script>

The first line var jq142 = jQuery.noConflict(); will ensure that you have the correct version of jQuery loaded for the carousel library. Read the noConflict documentation for more information.

GJK · Accepted Answer · 2013-03-13 00:35:04Z

0

You can use this to only load one version of the library. 1.3.2 on IE6,7,8 and 1.9.1 on all other browsers.

<!--[if lt IE 9]>
    <script src="jquery-1.3.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-1.9.1.js"></script>
<!--[endif]-->

answered Mar 13, 2013 at 0:35

GJK

37.4k8 gold badges57 silver badges76 bronze badges

Collectives™ on Stack Overflow

Javascript conflict in Html & CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related