Create the Skin Script and call it from the layout.master

1. Create a new js file in your skin directory, I usually name it skinscript.js.
2. Add your javascript to the new file. Don't use <script> tags, you don't need them in javascript files.
3. Add <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="skinscript.js" AddToCombinedScript="true" /> to your layout.master. I usually add this right after the <asp:ScriptManager control.

Copy all the scripts from your layout.master to the Skin Script

This is the part that can be a little bit tricky because not all scripts are going to work properly when combined with other scripts. If you copy the scripts to your new file one at a time and test the result, you'll find those pesky ones that will not cooperate. Just leave them in the layout.master, or if you're feeling froggy, rewrite them so they can be combined.

A note about SuperFish

Most of our skins use a superfish menu but the scripts for the superfish menu come in two parts. One is the static script that is in the ClientScript directory which contains all of the superfish magic. The other is an initialization script that is loaded in the layout.master of the skin. Typically, these are loaded by adding the layout.master a <portal:SiteScript control to load the main superfish script and then a <script> element with a bit of jQuery to initialize the superfish menu. We decided to use the jQuery .getScript method to load the main script from our Skin Script. Using this method allows us to initialize the SuperFish menu only if the main script is loaded properly.

A Sample Skin Script

The script below is what we use for starting our skin scripts. It includes the javascript for the Administration Toolbar Menu, Superfish Menu and a neat bit of jQuery that will give the "Add File" button in the Shared Files module a hover state. The script is written out long-form so you can easily see what it does. I suggest that you minify the script before using it in production.

//  ========== 
//  = This file stores all of the scripts that would normally be placed inside the layout.master
//  = Use the following syntax for referencing this script from the layout.master.
//  = <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="skinscript.js" AddToCombinedScript="true" />
//  ==========
 
/*Standard JavaScript */
 
function HideMenuToolbar(){ $("#toolbar").fadeOut(); $("#toolbarbut").fadeIn("slow");}
function ShowMenuToolbar(){ $("#toolbar").fadeIn(); $("#toolbarbut").fadeOut("slow");}
 
 
/* jQuery Scripts */
$(document).ready(function(){ 
 
/* Admin Toolbar */
	$("span.downarr a").click(function() {HideMenuToolbar(); Set_Cookie('openstate', 'closed')});
	$("span.showbar a").click(function() {ShowMenuToolbar(); Set_Cookie('openstate', 'open') });
	$("span.downarr a, span.showbar a").click(function() { return false; });
	var openState = Get_Cookie('openstate');
	if(openState != null){ if(openState == 'closed'){HideMenuToolbar();} if(openState == 'open'){ShowMenuToolbar();}}
 
/* Superfish Menu */
/* Get Superfish mojoPortal Script */
	$.getScript("/ClientScript/jqmojo/mojosuperfish.js", function(){
	    $("ul.sf-menu").supersubs({ minWidth: 1, maxWidth: 27, extraWidth: .2 }).superfish({
		pathClass: 'current', 
		pathLevels: 0, 
		delay:500,
		animation: {opacity:'show', height:'show'}, 
		speed: 200,
		dropShadows:false,
		autoArrows: true
	    });
	});
/* This will make the Shared Files "Add File" button have a hover state */
	$("div.uploadpanel > div > input + div + div").hover(
		function() {
			$("div.uploadpanel div .jqbutton").addClass("ui-state-hover")
		},
		function() {
			$("div.uploadpanel div .jqbutton").removeClass("ui-state-hover")
	});
});

Further Reading

If you're serious about optimizing the speed of your mojoPortal site, I highly suggest you read the "Improving Your YSlow or Page Speed Score" article in the mojoPortal Documentation.

Happy mojo-ing!

Form Wizard Pro (FWP) is a great tool for creating ad-hoc style forms on the fly in mojoPortal. One feature that makes FWP so great is the ability to import and export Form Definitions and individual Questions.

Exporting a Question

Exporting a Question is very simple, just click the "Export Question" link next to the question in the "Edit Form" screen. The file will be named like "FWP-Instance-NameYYYYMMDDHHMMSS-q.config." This includes the name of the FWP instance, the exact date and time you clicked the export link, and a "-q" to let you know this file is a Question, not an entire form. You can of course change the name of the file without causing any problems for importing the question later.

Exporting a Form

Exporting an entire Form is also very simple, just click the "Export Form Definition" button at the bottom of the "Edit Form" screen. The file will be named like "FWP-Instance-NameYYYMMDDHHMMSS.config." This includes the name of the FWP instance and the exact date and time you clicked the export button. Again, changing the name doesn't harm anything.

Importing a Question or Form

Importing a Question is very straightforward. Simply click the "Browse" button and select a Question definition file from your computer and then click the "Import Question" button. You'll see the question added to the "Edit Form" screen.

You can import a Form Definition the same way you import a Question, except that you will want to select a Form definition file and click the "Import Form Definition" button. One very important thing to keep in mind is that importing a Form will erase all of the questions you already have on your form. Any data that has been submitted to the form will still be intact but the questions corresponding to the data will be gone so the data will be "orphaned" so you may not know what all of the responses mean.

Some Form Definitions For You

Happy mojo-ing!

My attention was initially drawn to SOPA when I read an article on A List Apart by Jeffrey Zeldman titled "Say No to SOPA."² Jeffrey lays out his opposition to SOPA in plain english and his article prompted me to do more research on the topic. I found that in addition to the list of organizations Jeffrey mentioned as being opposed to SOPA, the American Center for Law and Justice (ACLJ) is opposed to it as well. The ACLJ has prepared a legal analysis on SOPA which outlines the first amendment concerns with the legislation.

I highly suggest reading Jeffrey's article and the ACLJ's legal analysis. I've borrowed the following list of actions you can take to make your voice heard regarding the SOPA legislation from Jeffrey's article.

Act now!

American Censorship Day, one of several campaigns to stop SOPA, has come and gone, but you can still take action:

• Americans, Tumblr has created a system that will call you with talking points, and then connect you to your representative.
• You can contact your representatives and your senators.
• Those outside the US can sign this petition. Registration is required. A US zip code is not.

We urge everyone reading this to take action today. Only an overwhelming show of solidarity gives us a chance of defeating this poorly written, dangerous bill.

Citations:

1. "First Amendment Concerns Posed by http://c0391070.cdn2.cloudfiles.rackspacecloud.com/pdf/first-amendment-concerns-posed-sopa.pdfSOPA" - American Center for Law and Justice, November 28, 2011 (http://c0391070.cdn2.cloudfiles.rackspacecloud.com/pdf/first-amendment-concerns-posed-sopa.pdf)
2. "Say No to SOPA" - A List Apart, Jeffrey Zelman, November 29, 2011 (http://www.alistapart.com/articles/say-no-to-sopa)