Reputation: 3667
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'
});
});
Upvotes: 0
Views: 417
Reputation: 707158
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.
Upvotes: 3
Reputation: 11406
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.
Upvotes: 1
Reputation: 6115
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
Upvotes: 1