| fireplace_tea |
09-17-2012 10:10 PM |
JavaScript File Size Limitation?
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:
Code:
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:
Code:
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 |
