Hi, well i have heard alot about combining script but never did that as i always had doubts about the proper method of doing it, as these days following standards matters alot for SEO. I want to combine scripts together into one file, lets take an example i will provide 3 scripts 1- <script type='text/javascript'> $(document).ready(function () { // find the elements to be eased and hook the hover event $('div.jimgMenu ul li a').hover(function() { // if the element is currently being animated if ($(this).is(':animated')) { $(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"}); } else { // ease in quickly $(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"}); } }, function () { // on hovering out, ease the element out if ($(this).is(':animated')) { $(this).removeClass("active").stop().animate({width: "83.7px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"}) } else { // ease out slowly $(this).removeClass("active").stop(':animated').animate({width: "83.7px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"}); } }); }); </script> Code (markup): 2- <script type="text/javascript"> (function($) { $.fn.sorted = function(customOptions) { var options = { reversed: false, by: function(a) { return a.text(); } }; $.extend(options, customOptions); $data = $(this); arr = $data.get(); arr.sort(function(a, b) { var valA = options.by($(a)); var valB = options.by($(b)); if (options.reversed) { return (valA < valB) ? 1 : (valA > valB) ? -1 : 0; } else { return (valA < valB) ? -1 : (valA > valB) ? 1 : 0; } }); return $(arr); }; })(jQuery); $(function() { var read_button = function(class_names) { var r = { selected: false, type: 0 }; for (var i=0; i < class_names.length; i++) { if (class_names[i].indexOf('selected-') == 0) { r.selected = true; } if (class_names[i].indexOf('segment-') == 0) { r.segment = class_names[i].split('-')[1]; } }; return r; }; var determine_sort = function($buttons) { var $selected = $buttons.parent().filter('[class*="selected-"]'); return $selected.find('a').attr('data-value'); }; var determine_kind = function($buttons) { var $selected = $buttons.parent().filter('[class*="selected-"]'); return $selected.find('a').attr('data-value'); }; var $preferences = { duration: 800, easing: 'easeInOutQuad', adjustHeight: 'dynamic' }; var $list = $('#data'); var $data = $list.clone(); var $controls = $('ul#gamecategories ul'); $controls.each(function(i) { var $control = $(this); var $buttons = $control.find('a'); $buttons.bind('click', function(e) { var $button = $(this); var $button_container = $button.parent(); var button_properties = read_button($button_container.attr('class').split(' ')); var selected = button_properties.selected; var button_segment = button_properties.segment; if (!selected) { $buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2'); $button_container.addClass('selected-' + button_segment); var sorting_type = determine_sort($controls.eq(1).find('a')); var sorting_kind = determine_kind($controls.eq(0).find('a')); if (sorting_kind == 'all') { var $filtered_data = $data.find('li'); } else { var $filtered_data = $data.find('li.' + sorting_kind); } if (sorting_type == 'size') { var $sorted_data = $filtered_data.sorted({ by: function(v) { return parseFloat($(v).find('span').text()); } }); } else { var $sorted_data = $filtered_data.sorted({ by: function(v) { return $(v).find('strong').text().toLowerCase(); } }); } $list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } ); } e.preventDefault(); }); }); var high_performance = true; var $performance_container = $('#performance-toggle'); var $original_html = $performance_container.html(); $performance_container.find('a').live('click', function(e) { if (high_performance) { $preferences.useScaling = false; $performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.'); high_performance = false; } else { $preferences.useScaling = true; $performance_container.html($original_html); high_performance = true; } e.preventDefault(); }); }); </script> Code (markup): 3- <script type='text/javascript'> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-15016456-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> Code (markup): I want to add them to one file and then yes i am going to make it external. Here i have a few questions: 1- Can any type of scripts be added together? 2- Is there a general rule of doing this combination of scripts (e-g remove the <script> tags from start and end of all then give spaces between each and you are done). 3- Should one use JS compressors? if yes, what are advantages and disadvantages of doing so? I asked a few question together as i don't want to spam this forum ^_^ anyway these all question are related to my topic
1. When you put javascript code into .js files, you don't need the <script> blocks. 2. That should be correct. When you're doing this you're going to end up with a <script> tag that does nothing but include your .js file. It makes a difference whether this is at the beginning or end of the HTML, in that it determines when it's loaded. Most likely you should put it at the end. 3. The big advantage of this is it makes the files smaller. E.g. if you look at the mini-fied versions of jQuery, you'll see a significant difference. The code you posted is not very large. Normally when people combine scripts, they are combing .js files they are including externally, because it reduces the number of HTTP requests. Since you're moving code out of your HTML, you're actually adding a request, which negates the benefit. You might want to try looking at the firefox plugin yslow so you can get a better idea of what is happening.