JavaScript File Size Limitation?

[fireplace_tea]

Hi Everyone,

For my website, I have a main.js file that is about 115 lines of code (3kb in size) and it all works well. However, when I added more coding it would not work and render other coding inoperable. When I put the added coding in a different .js (portfolio.js) file everything worked. Is this a file size limitation somewhere, somehow? I doublechecked and the variable and other names are all different. If this is not a size limit, any ideas to what it is?

Here is the main.js file coding:

window.onload = function(){
	navButtons();
	setFocus();
}

function navButtons(){
var homeb = document.getElementById("homeb");
var contactb = document.getElementById("contactb");
var portfoliob = document.getElementById("portfoliob");
homeb.onmouseover = function(){
	homeb.setAttribute("src", "images/home_button1.gif");
};
homeb.onmouseout = function(){
	homeb.setAttribute("src", "images/home_button.gif");
};
contactb.onmouseover = function(){
	contactb.setAttribute("src", "images/contact_button1.gif");
};
contactb.onmouseout = function(){
	contactb.setAttribute("src", "images/contact_button.gif");
};
portfoliob.onmouseover = function(){
	portfoliob.setAttribute("src", "images/portfolio_button1.gif");
};
portfoliob.onmouseout = function(){
	portfoliob.setAttribute("src", "images/portfolio_button.gif");
};
}

function setFocus(){
var cursorHere = document.getElementById("name");
cursorHere.focus();
}


var gettip = document.getElementById("gettip");
var changetip = document.getElementById("tooltip");
gettip.onmouseover = function(){
	changetip.setAttribute("id", "tooltipshow");
};
gettip.onmouseout = function(){
	changetip.setAttribute("id", "tooltip");
};


var formbg = document.getElementById("contactform").elements;
for(i=0; i<formbg.length; i++){
	if(formbg[i].className=="formbox"){
		formbg[i].onfocus=function(){
			this.style.backgroundColor = "#faffbd";
		}	
		formbg[i].onblur=function(){
			this.style.backgroundColor = "#ffffff";
		}
	}else{
		formbg[i].onmouseover = function(){
			this.style.backgroundColor = "green";
		}
		formbg[i].onmouseout = function(){
			this.style.backgroundColor = "#1e9cd7";
		}
	}
}


var errormsg = document.getElementById("errormsg");
var errortext = document.getElementById("errortext");
var namefield = document.getElementById("name");
var emailfield = document.getElementById("email");
var commentfield = document.getElementById("comment");
document.getElementById("contactform").onsubmit = function(){
	if(namefield.style.borderColor == "red" || emailfield.style.borderColor == "red" || commentfield.style.borderColor == "red"){
		namefield.style.borderColor = "#7EC1E7";
		emailfield.style.borderColor = "#7EC1E7";
		commentfield.style.borderColor = "#7EC1E7";
	} 
	
	if(emailfield.value == "" && namefield.value == ""){
		errormsg.style.display = "block";
		errortext.innerHTML = "Please enter both your name and email address.";
		namefield.style.borderColor = "red";
		emailfield.style.borderColor = "red";
		return false;
	} 
	else if(namefield.value == ""){
		errormsg.style.display = "block";
		errortext.innerHTML = "Please type in your name.";
		namefield.style.borderColor = "red";
		return false;
	}	
	else if(emailfield.value == ""){
		errormsg.style.display = "block";
		errortext.innerHTML = "Please enter in an email address.";
		emailfield.style.borderColor = "red";
		return false;
	}
	else if(commentfield.value == ""){
		errormsg.style.display = "block";
		errortext.innerHTML = "Please enter in a comment and/or question.";
		commentfield.style.borderColor = "red";
		return false;
	}
	else{
		errormsg.style.display = "none";
		return true;
	}
};


document.getElementById("contactform").onreset = function(){
	errormsg.style.display = "none";
	namefield.style.borderColor = "#7EC1E7";
	emailfield.style.borderColor = "#7EC1E7";
	commentfield.style.borderColor = "#7EC1E7";

Here is the portfolio.js coding:

var webborder = document.getElementById("html5link");
webborder.onmouseover = function(){
	webborder.style.borderColor = "#ffffff";
	webborder.style.borderStyle = "solid";
	webborder.style.borderWidth = "4px";
};
webborder.onmouseout = function(){
	webborder.style.borderColor = "#000000";
	webborder.style.borderStyle = "solid";
	webborder.style.borderWidth = "2px";
};


var websiteinfo = document.getElementById("getwebtext");
var websitetext = document.getElementById("webtext");
getwebtext.onmouseover = function(){
	websitetext.setAttribute("id", "webtextshow");
};
getwebtext.onmouseout = function(){
	websitetext.setAttribute("id", "webtext");
};

When I put the coding in file portfolio.js into the main.js file, the coding from portfolio.js will not work and render some of the main.js coding inoperable. But, putting the coding in two different files, as shown above, makes everything work just fine. Any ideas or insights would be great.

Thanks,
Julie

[AndrewGSW]

115 is a small number of lines - there must be some other issue.

[felgall]

The most common cause where adding extra code to the end of an existing JavaScript is where you add to the end of a line and omit the ; that ends the first statement.

That is not likely to be the cause in this instance but without seeing the actual code it is hard to say what the problem might be - but 115 lines is nowhere near the size that many JavaScript frameworks use successfully.

[AndrewGSW]

You are missing a closing bracket and semi-colon }; at the end of main.js.

[fireplace_tea]

Originally Posted by AndrewGSW

You are missing a closing bracket and semi-colon }; at the end of main.js.

I do have the missing closing bracket and the semi-colon in the original main.js file, they just didn't make it into this post (ooppsss). Thanks though.

[fireplace_tea]

Originally Posted by felgall

The most common cause where adding extra code to the end of an existing JavaScript is where you add to the end of a line and omit the ; that ends the first statement.

That is not likely to be the cause in this instance but without seeing the actual code it is hard to say what the problem might be - but 115 lines is nowhere near the size that many JavaScript frameworks use successfully.

Hi Stephen,

Have you had a chance to look at the code (I added it a couple of days ago).

Thanks,
Julie

[rnd me]

there is no size limit, i've loaded 10MB scripts without issue...

post your current code and we can offer better advise.