Single JS file

[Aravona]

I've a site with a large number of external JS files, and I'm trying to reduce them into one single file, or at least less than the 22 there currently is.

Since most of them are plugins for wordpress I can only really minimalise my theme ones.

One issue I'm having is that the ddsmoothmenu.js I've cut+paste the code into a new javascript file (where I've moved some other JS coding, including the init() for ddsmoothmenu) however since doing that its just... dud. My menu is there but none of my hoverouts now work.

I'm rather a JS newbie still so if someone could please explain to me why my ddsmoothmenu JS coding isn't now working I'd be very grateful.

Kind Regards,

Aravona

[Beverleyh]

Might be because you've left the opening and closing javascript tags in the external file.

We'd need to see a copy to help further though.

[Aravona]

Well I've just completely cut and paste the following from ddsmoothmenu.js to a new file scripts.js (I'm having trouble moving everything which is made by an external source)

var ddsmoothmenu={

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'http://www.samleisure.co.uk/wp-content/themes/LSO_WPv0.1/images/down.gif', 23], right:['rightarrowclass', 'http://www.samleisure.co.uk/wp-content/themes/LSO_WPv0.1/images/right.gif']},

transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5},

///////Stop configuring beyond here///////////////////////////

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,

getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
	var $menucontainer=$('#'+setting.contentsource[0]); //reference empty div on page that will hold menu
	$menucontainer.html("Loading Menu...");
	$.ajax({
		url: setting.contentsource[1], //path to external menu file
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText);
		},
		success:function(content){
			$menucontainer.html(content);
			ddsmoothmenu.buildmenu($, setting);
		}
	});
},


buildmenu:function($, setting){
	var smoothmenu=ddsmoothmenu;
	var $mainmenu=$("#"+setting.mainmenuid+">ul"); //reference main menu UL
	$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu";
	var $headers=$mainmenu.find("ul").parent();
	$headers.hover(
		function(e){
			$(this).children('a:eq(0)').addClass('selected');
		},
		function(e){
			$(this).children('a:eq(0)').removeClass('selected');
		}
	);
	$headers.each(function(i){ //loop through each LI header
		var $curobj=$(this).css({zIndex: 100-i}); //reference current LI header
		var $subul=$(this).find('ul:eq(0)').css({display:'block'});
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()};
		this.istopheader=$curobj.parents("ul").length==1? true : false; //is top level header?
		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0});
		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
			'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1]) +'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0]) + '" style="border:0;" />'
		);
		if (smoothmenu.shadow.enable){
			this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)}; //store this shadow's offsets
			if (this.istopheader){
				$parentshadow=$(document.body);
			}
			else{
				var $parentLi=$curobj.parents("li:eq(0)");
				$parentshadow=$parentLi.get(0).$shadow;
			}
			this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) ; //insert shadow DIV and set it to parent node for the next shadow div
		}
		$curobj.hover(
			function(e){
				var $targetul=$(this).children("ul:eq(0)");
				this._offsets={left:$(this).offset().left, top:$(this).offset().top};
				var menuleft=this.istopheader && setting.orientation!='v'? 0 : this._dimensions.w;
				menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader && setting.orientation!='v'? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft; //calculate this sub menu's offsets from its parent
				if ($targetul.queue().length<=1){ //if 1 or less queued animations
					$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime);
					if (smoothmenu.shadow.enable){
						var shadowleft=this.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft;
						var shadowtop=this.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : this._shadowoffset.y;
						if (!this.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
							this.$shadow.css({opacity:1});
						}
						this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime);
					}
				}
			},
			function(e){
				var $targetul=$(this).children("ul:eq(0)");
				$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime);
				if (smoothmenu.shadow.enable){
					if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
						this.$shadow.children('div:eq(0)').css({opacity:0});
					}
					this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime);
				}
			}
		); //end hover
	}); //end $headers.each()
	$mainmenu.find("ul").css({display:'none', visibility:'visible'});
},

init:function(setting){
	if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set?
		var mainmenuid='#'+setting.mainmenuid;
		var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid;
		document.write('<style type="text/css">\n' +mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n' +mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n' +'</style>');
	}
	this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable; //in IE6, always disable shadow
	jQuery(document).ready(function($){ //ajax menu?
		if (typeof setting.contentsource=="object"){ //if external ajax menu
			ddsmoothmenu.getajaxmenu($, setting);
		}
		else{ //else if markup menu
			ddsmoothmenu.buildmenu($, setting);
		}
	});
}

}; //end ddsmoothmenu variable

[jscheuer1]

The path to the file might be wrong. It could be so many things.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

As for consolidating .js files, that's usually fine. To avoid errors it helps to know a bit about javascript though. Generally one may just list the scripts concurrently in the file.

A word of caution about minifying (if that's what you really mean, it's a technical term referring to the use of jsmin or similar minifying algorithms). Only code that follows some of the strict standards for the placement of the semi-colon and sometimes even brackets will minify well. There are exceptions and this can depend upon the minifying tool used, but it's best to use strict syntax overall. You will end up with a smaller file in the end in most cases, and it will almost always still work - a big plus. See JSLint:

http://www.jslint.com/

for a tool that will allow you to check and correct any strict syntax errors before minifying.

[Aravona]

Thanks for you reply, unfortunately I'm doing everything on a WAMP so no go on a link.

I already use JSLint - I hadn't for this since all I had really done was change a filename.

[jscheuer1]

What you could do is view the problem page in the browser. Use it's 'view source'. Copy and paste that to a .txt file and upload it here for us to look at. If it's too big, zip it first. It's not nearly as good as the live page, but it might show us something we can help you with.

One thing I'd check in that though, but only you can do it, is look at the external script tag in that view. Does it point to the actual location of the script? Do other file paths (like images, css files, etc.) point to the actual files?

If you have a browser with diagnostic tools, you should be able to look at the scripts to see if their contents is what's expected.

[Aravona]

Yes all the links are correct, obviously.

I'm havibng a similar issue with CSS but thats easy to explain away as its a wordpress site and the CSS is always messed up when you compress it.

EDIT: as another point, since inline JS slows my site also, is it possible to put the ddsmoothmenu.init() into a seperate js sheet?