Order Of JavaScript/jQuery

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'
});

});

Make sure jquery is defined before you call it. The order in which things are executed matters. Additionally, if you've introduced a syntax error it can prevent the entire script from loading. — canon
– canon, Commented Jan 4, 2012 at 19:15
I enjoy headjs as well. If you have bunches of script files and some depend on others, it's not just a performance boost but also gives sanity to your organization efforts. — Greg Pettit
– Greg Pettit, Commented Jan 4, 2012 at 19:19
And what is the error message you get? Are you referencing an element before it has been rendered to the page? — epascarello
– epascarello, Commented Jan 4, 2012 at 19:20

jfriend00 · Accepted Answer · 2012-01-04 19:31:39Z

3

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.

edited Jan 4, 2012 at 19:31

answered Jan 4, 2012 at 19:24

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Aaron Brewer Over a year ago

Awesome, I am doing it in jQuery, thank you for the really well-thought well put-together answer. Now would I place that jQuery code within the function or above the snippet in which contains the element it applies to or below? Thanksl!

jfriend00 Over a year ago

@AaronBrewer - This is not something you place above or below the issue. This is how you write your actual code. For further help, you will have to show us your specific code.

jfriend00 Over a year ago

@AaronBrewer - and which line of your code causes the problem and needs to be protected from when elements don't exist?

Aaron Brewer Over a year ago

I guess all of it lol, can't I apply maybe like an asterisk as my element?

Aaron Brewer Over a year ago

Something like this? jQuery("*").hide();

|

Evan · Accepted Answer · 2012-01-04 19:23:46Z

1

It will stop executing if you are running into or throwing an error in your code. If an element doesn't exist, it is likely sending an unexpected undefined to a portion of your code which is likely throwing an error.

as suggested in the comments, using headjs can help you find an error, but otherwise what this means is you need to be doing better error checking in your code.

use try catch statements, throw custom errors, and use "if element exists statements" to find your undefined elements

answered Jan 4, 2012 at 19:23

Evan

6,1239 gold badges36 silver badges64 bronze badges

Comments

Jesse Atkinson · Accepted Answer · 2012-01-04 19:28:13Z

1

Make sure to place all of your javascript at the bottom of the DOM. Make sure to only fire javascript on $(document).ready, and have proper error catching. One break in the code can break all of it. Even in seemingly unrelated javascript.

answered Jan 4, 2012 at 19:28

Jesse Atkinson

11.6k13 gold badges45 silver badges46 bronze badges

Collectives™ on Stack Overflow

Order Of JavaScript/jQuery

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related