Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    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
    Last edited by fireplace_tea; 09-17-2012 at 10:54 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    115 is a small number of lines - there must be some other issue.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,455
    Thanks
    0
    Thanked 632 Times in 622 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You are missing a closing bracket and semi-colon }; at the end of main.js.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    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.

  • #6
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    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

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    there is no size limit, i've loaded 10MB scripts without issue...

    post your current code and we can offer better advise.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •