Results 1 to 7 of 7

Thread: Single JS file

  1. #1
    Join Date
    Jan 2010
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Single JS file

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jan 2010
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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)

    Code:
    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2010
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2010
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by Aravona; 05-24-2011 at 08:31 AM.

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
  •