Question

I have piled all of my JavaScript/jQuery code in one document, and I am curious as to why somethings do not work. I believe that if the page reads the document and does not recognize an element that belongs to a snippet of code everything below that will not work. What is what that?

jQuery().ready(function() {
jQuery('.navigation .submenu > li').bind('mouseover', openSubMenu); 
jQuery('.navigation .submenu > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
    jQuery(this).find('ul').css('visibility', 'visible');
    jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});    
};
function closeSubMenu() {
    jQuery(this).find('ul').css('visibility', 'hidden');
    jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
}); 
};
//About
jQuery('.expand-one').click(function(){
    jQuery('.content-one').slideToggle('fast');
});
jQuery('.expand-one').toggle(function() {
jQuery('.content-one').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-one').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});
//Destination
jQuery('.expand-two').click(function(){
    jQuery('.content-two').slideToggle('fast');
});
jQuery('.expand-two').toggle(function() {
jQuery('.content-two').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-two').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});
//Winners
jQuery('.expand-three').click(function(){
    jQuery('.content-three').slideToggle('fast');
});
jQuery('.expand-three').toggle(function() {
jQuery('.content-three').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-three').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});
jQuery(".myslider").slideshow({
  width      : 643,
  height     : 303,
  control    : false,
  transition : 'swipeleft',
  delay      : 4500,
  pauseOnClick    : false,
  pauseOnHover    : true
});
jQuery(".myslider").hide();
jQuery(function() {
jQuery("ul.tabs").tabs("div.panes > div");
});
    jQuery(".myTable tr:nth-child(even)").addClass('even');
    jQuery(".myTable").tablesorter();
    jQuery(".myTable").bind("sortEnd",function() {
    jQuery(".myTable tr").removeClass('even');
    jQuery(".myTable tr:nth-child(even)").addClass('even');
});
jQuery("#iframe").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'type'              : 'iframe'
});

});

Answer 1

A javascript exception that is not explicitly handled will halt the sequential execution of all javascript within that script element so none of the following javascript will be executed.

If you have errors, then you need to see them in the debug console or error console and change your code to handle them appropriately rather than ignore them.

For example, this code:

document.getElementById("myHeader").style.display = "none";

will fail and throw an exception if the myHeader object does not exist because it tries to reference the .style property on a null object. This will throw an exception and stop all further execution after that line of code. If you are writing code that you want to be able to gracefully handle whether myHeader exists or not, then you could do so like this:

var myHeader = document.getElementById("myHeader");
if (myHeader) {
    myHeader.style.display = "none";
}

or, you could catch exceptions and continue afterwards:

try {
    document.getElementById("myHeader").style.display = "none";
} catch(e) {}
// continue on

Since you have also tagged your post with jQuery, this is a place where jQuery can be very useful because it does checking for you. For example, this jQuery code (which does the same thing as the above plain javascript) will not cause any errors whether myHeader exists or not.

$("#myHeader").hide();

That’s because jQuery already does the checking for you on whether myHeader exists and won’t call any methods if it doesn’t exist.