Question

I am a bit confused… I can load a javascript file when its above another jquery file in the tag however when its below other jquery files it doesn’t load.

When I put it above the jquery.min.js file its loads fine but when its below it fails to load.

Im thinking there is something wrong with my jquery file.. but not sure what!

My Javascript file is:

/*      =======================================================================================================================================*/
// gallery slider
/* =======================================================================================================================================*/

  $(document).ready(function () {

            $('.project').mouseover(function ()
            {
                $(this).children('.cover').animate(
                {
                    height: "172px"
                });
                $(this).children('.title').animate(
                {
                    bottom: '-25px', height: "100px"
                });
            });

            $('.project').mouseleave(function ()
            {
                $(this).children('.cover').animate(
                {
                    height: "17px"
                });
                $(this).children('.title').animate(
                {
                    bottom: "0px", height: "20px"
                });
            });

             });

/* =======================================================================================================================================*/
// Top Contact Area
/* =======================================================================================================================================*/


$(window).load(function () {
$("#contactArea").css('height', '0px');

$(".contact-hurry a").toggle( 
            function () { 
                $(this).text('Quick Contact Hide / Close [-]')
                $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'})
                $("body").addClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
            }, 
            function () { 
                $(this).text('Quick Contact Show / Open [+]')
                $("body").removeClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
                $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'}) 
            } 
    ); 


});


/* =======================================================================================================================================*/
// Mega Menu    $("#contactArea").css('height', '0px');
/* =======================================================================================================================================*/


$(document).ready(function () {


function megaHoverOver(){
    $(this).find(".sub").stop().fadeTo('fast', 1).show();

    //Calculate width of all ul's
    (function($) { 
        jQuery.fn.calcSubWidth = function() {
            rowWidth = 150;
            //Calculate row
            $(this).find("ul.floating").each(function() {                   
                rowWidth += $(this).width(); 
            }); 
        };
    })(jQuery); 

    if ( $(this).find(".row").length > 0 ) { //If row exists...
        var biggestRow = 0; 
        //Calculate each row
        $(this).find(".row").each(function() {                             
            $(this).calcSubWidth();
            //Find biggest row
            if(rowWidth > biggestRow) {
                biggestRow = rowWidth;
            }
        });
        //Set width
        $(this).find(".sub").css({'width' :biggestRow});
        $(this).find(".row:last").css({'margin':'0'});

    } else { //If row does not exist...

        $(this).calcSubWidth();
        //Set Width
        $(this).find(".sub").css({'width' : rowWidth});

    }
}   
function megaHoverOut(){ 
  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
      $(this).hide(); 
  });
}


var config = {    
     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
     interval: 100, // number = milliseconds for onMouseOver polling interval    
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
     timeout: 100, // number = milliseconds delay before onMouseOut    
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
};

$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);




jQuery(function() {
        // run the currently selected effect
        function runEffect() {
            // get effect type from 
            var selectedEffect = $( "#effectTypes" ).val();

            // most effect types need no options passed by default
            var options = {};
            // some effects have required parameters
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // run the effect
            $( "#effect" ).toggle( selectedEffect, options, 500 );
        };

        // set effect from select menu value
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
    });




  /* =======================================================================================================================================*/
// faqs
/* =======================================================================================================================================*/


$(document).ready(function(){
                $("#faqs tr:odd").addClass("odd");
                $("#faqs tr:not(.odd)").hide();
                $("#faqs tr:first-child").show();

                $("#faqs tr.odd").click(function(){
                    $(this).next("tr").toggle('fast');
                    $(this).find(".arrow").toggleClass("up");
                });

            }); 


   /* =======================================================================================================================================*/
// Portfolio slider
/* =======================================================================================================================================*/

/*
$(document).ready(function() {

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(250, function() {
                    myTimer = setTimeout("showNext()", 3900);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}

function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}

var myTimer;

$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //loads first image

});

});

*/




$("#foo2").carouFredSel({
    circular: false,
    infinite: false,
    auto    : false,
    scroll  : {
        items   : "page"
    },
    prev    : { 
        button  : "#foo2_prev",
        key     : "left"
    },
    next    : { 
        button  : "#foo2_next",
        key     : "right"
    },
    pagination  : "#foo2_pag"
});



});

Answer 1

I am not sure what you actually mean, but I give it a shot.

If you include the jquery library before script files that uses jquery, those will succeed.
A script that uses jquery must have the symbols $ and jQuery defined and javascript runs the file sequentially from top to bottom.

That is why including jquery must be done before everything else.