SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Combine Javascript

    Hi there,

    I am trying to optimize a website's performance and one of the suggestions is to combine some of the javascript code.

    I'm a newbie to javascript so I wonder if I could get some advice on this...

    Here is the current javascript code from the page's <head>

    Code JavaScript:
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
     
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-20068031-1']);
      _gaq.push(['_trackPageview']);
     
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
     
    <script type="text/javascript">
    sfHover = function() {
    	var sfEls = document.getElementById("navbar").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
     
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
     
    <script> 
                function switchContent(obj) { 
                    obj = (!obj) ? 'today' : obj; 
     
                    var contentDivs = document.getElementsByTagName('div'); 
                    for (i=0; i<contentDivs.length; i++) { 
                        if (contentDivs[i].id && contentDivs[i].id.indexOf('today' && 'tomorrow' && 'yesterday') !== -1) { 
                            contentDivs[i].className = 'hide'; 
                        } 
                    } 
                    document.getElementById(obj).className = ''; 
                } 
     
                function checkTab() { 
                    $('a').each(function() { 
                        $(this).click(function() { 
                            tab = $(this).attr('href').split('#'); 
                            switchContent(tab[1]); 
                            $('.current').attr('class',''); 
                            $(this).attr('class','current'); 
                        }); 
                    }); 
                } 
     
                window.onload = function() { 
                    checkTab(); 
                }; 
     
            </script>

    Would a JS Guru please help me combine these into 1 script?

    Many thanks.

  2. #2
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    To combine just dump all of those scripts into one file and link to it from your head.

    So the combined script file would look like this:
    Code JavaScript:
     var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-20068031-1']);
      _gaq.push(['_trackPageview']);
     
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
     
    sfHover = function() {
        var sfEls = document.getElementById("navbar").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
     
                function switchContent(obj) { 
                    obj = (!obj) ? 'today' : obj; 
     
                    var contentDivs = document.getElementsByTagName('div'); 
                    for (i=0; i<contentDivs.length; i++) { 
                        if (contentDivs[i].id && contentDivs[i].id.indexOf('today' && 'tomorrow' && 'yesterday') !== -1) { 
                            contentDivs[i].className = 'hide'; 
                        } 
                    } 
                    document.getElementById(obj).className = ''; 
                } 
     
                function checkTab() { 
                    $('a').each(function() { 
                        $(this).click(function() { 
                            tab = $(this).attr('href').split('#'); 
                            switchContent(tab[1]); 
                            $('.current').attr('class',''); 
                            $(this).attr('class','current'); 
                        }); 
                    }); 
                } 
     
                window.onload = function() { 
                    checkTab(); 
                };

    And you'd use something like this to include it:
    Code JavaScript:
    <script src="/your-scripts-folder/combined.min.js"></script>

    I've not included jQuery in your combined script file because it should be separate for easier upgrading. But why are you including jQuery twice in your head anyway?

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that

    I didn't realise JQuery was in there twice.. that was unintentional..

    I'll put them all in one file then and see how I get on

    Thanks!

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You can copy and paste the jQuery source into the the single file as well. There are some libraries out there such as assetic that make combining all assets easy, without maintainability disadvantages that might be worth looking into. The only thing you need to watch out for with third part libraries is image references. If image references reside inside the source, you will need to change those. Though I haven't run into that issue really besides for CSS aggregation. CSS aggregation unlike JavaScript can become a little tricky due to image references.
    The only code I hate more than my own is everyone else's.


Bookmarks

Posting Permissions

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