Brain Dump

I'm starting to learn jQuery, so I figured that this page would be an ideal candidate for experimentation.

First, link to the online copy of the library in the head of your document.

You could also put a copy of the library on your site, by the way...

...and here's the jQuery script that also should be put in the head of your document:

$(document).ready(function()
{
// hide all the things
$('.thing ').hide();
//set each h2 to trigger showing things
$('h2').click(function(){
$(this).next('div').slideToggle(1000)
.siblings('div:visible').slideToggle(1000);
}
);
});

And here's a typical section of the HTML. Notice that I encased the hidden section in a class named "thing."

<h2>How to pick a winning horse</h2> <div class="thing"> <p> Invent a time machine. Go to the future. Attend many horse races. Make notes. Return to the past and profit! </p> </div>

I half-figured this out on my own, and half swiped this from http://www.learningjquery.com/2007/03/accordion-madness.

I just had to do this today; an animation where you basically have a long line of layers spread out in Z-Space (offset from each other by 2000 pixels), being dragged by the camera using a common null. I wanted them to fade in gracefully, but not have to keyframe each one (and move the keyframes as the timing changed).

Add this expression to the opacity of each layer you'd like to fade in:

startFade = 2000;
endFade = 3000;
d = (thisComp.layer("Null 2").position[2]+thisLayer.position[2]) - thisComp.layer("Camera 1").position[2];
linear(d,startFade,endFade,0,100)

This expression assumes a couple of things. First, it assumes that there's a camera in the composition named "Camera 1." Secondly it assumes that there's a null in the scene named "Null 2." The values for startFade and endFade are tweakable to your needs.

What it does is subtract the z-distance of the camera's position from the layer's z-position (using the null's position plus the offset distance) to determine the value d. As d goes from startFade to endFade the values are faded from 0 to 100, fading it in.

Want to fade it out? Just swap the values, making the last line:

linear(d,startFade,endFade,100,0)

This was largely adapted from another script by Dan Ebberts, someone much brighter than I am.

Let's say you want to load a Flash file, but it'll take a while to load, and you'd like to use a still frame of the first frame to occupy the space on the page until the movie has fully loaded. Here's what I've used in the past:

• Make a preloader... call it preLoader.fla (or whatever). This is the file that is embedded in the webpage.
• Make 2 layers. Name the first "actions" and the second "still" (naming is optional).
• On frame 1, layer 1 add this script:

stop();
_root.createEmptyMovieClip("myMovie",101)
this.myMovie.loadMovie("exampleSide.swf"); //replace with your filename!!

• On frame 1, layer 2, put your standby still graphic (that will be replaced when the movie loads).

and voilà!

Be sure to test the actual swf, not using the preview function in Flash, which doesn't always accurately represent what will happen in a browser.

What if you have an After Effects comp that flies 2 words into screen, and then suddenly you're asked to do the same thing for 50 pairs of words? You could duplicate the comp and then tediously enter all the type, or you could be smart and use After Effects scripting.

This AfterEffects script takes a text file with words in it, sticks the words in the appropriate text layer, and makes then make comps from the input, and sets them up to render. The input file should be formatted to be easily imported into an array this example uses commas between word pairs separated by newlines (basically a comma separated file, like those exported from a spreadsheet or a database).

Here’s the script:

// Written and Copyright ©2005 by James Burns and J.C. Burns




// determine the currently selected object in the Project window

var curItem=app.project.activeItem;

// check to make sure it's a comp

if (curItem instanceof CompItem){

// If so, do main function

doIt();

   } else {

// if none were selected, advise them

	  alert("Please select a comp as the active item and run the script again");

	}

// main function

function doIt(){

// Open input file

inputFile= fileGetDialog("Please pick the input file!","");



if (!inputFile){

alert("User cancelled script!");

return;

} else {

// open file

inputFile.open("r","TEXT","????");

// read file, break input into chunks, and store in an array

var readFile = inputFile.read();

//alert(readFile);

inputFile.close();

var words= readFile.split("\n");

}



// Start undo group for handy undo

app.beginUndoGroup("Duplicated comps");



// Go through array, and for each word pair, make new comp from selected comp, 

// stick words into two prepared text layers, named "word01" and "word02"



//make an array to hold references to the new comps

var newComps= new Array();



// Loop starts here

for (x=0; x < words.length; x++){

var tempArray= words[x].split(",");

var word01= tempArray[0];

var word02= tempArray[1];

var temp= curItem.duplicate();



// rename the comp

temp.name= word01 + "_" + word02;



// change the sourceText in the 2 layers

temp.layer(2).text.sourceText.setValue(word01); 

temp.layer(3).text.sourceText.setValue(word02); 



// add new comp to array of all comps created

newComps[x]=temp;



// Loop ends

}

// Report on results

alert("Created "+ newComps.length +" new comps!");

 

// ask if we should add to render queue


var shouldAdd = confirm ("Add new created comps to Render Queue?");

	if (shouldAdd){

		addToQueue();

	}

	

function addToQueue(){

for (i=0;i
// put finished comp into render queue

app.project.renderQueue.items.add(newComps[i]);

		}

	}

app.endUndoGroup();

}

It’d be nice to auto-index a page according to its markup using JavaScript, wouldn’t it? Here’s what I came up with...

Here's the JavaScript part:

function makeIndex(){ // Make an array of all the h2 elements (the topics) topics = document.getElementsByTagName("h2") var topIndex=""; // loop through each tag and index and make anchors for (i=0; i< topics.length; i++) { tmpLink = "#link" + i; // make list item of each heading with link to anchor topIndex += "<a href=\"" + tmpLink + "\"<li>" + topics[i].innerHTML + "<\/li><\/a>"; // add anchor name to bookmark entry topics[i].innerHTML= "<a name=\"link" + i + "\">" + topics[i].innerHTML + "<\/a>"; } // get element where you want to place list myList = document.getElementById("thingList"); // and change the content to the list myList.innerHTML=topIndex; } // oh... and fire it off when the page loads... onload=makeIndex;

Here’s the HTML:

<h3>Index of topics on this page:</h3> <ul id="thingList"> </ul>

You don't want to leave email addresses out in the open in websites, unless you want a buncha spam emails promoting penis growth. A good alternative is to obscure the address enough that spambots won't be able to parse it easily. A human being could read the individual address if they tried, but this will break it up enough to confuse most ’bots out there...

// assign the "at" sign to a variable var atsign = "&#64;"; // assign the name of your domain to a variable for convienience var here = "xyz.com"; // here's the function that gets called in the code function mailLink(name,isp,link){ document.write ("<a href=mailto:"+ name + atsign + isp +">" + link + "<\/a>"); } // here's how it's inserted into the HTML: <p>You can email the <script>mailLink("joeBlow","xyz.com","webmaster")</script> for help!</p> ... or... <p>You can email the <script>mailLink("joeBlow",here,"webmaster")</script> for help!</p> ... which would be displayed like this:

You can email the for help!

This could work for other elements, and I believe it to be cross-platform happy. In this case, there are a series of images inside of a DIV named “pictures” that I want to have mouseover events assigned to.

This function would be called in an onLoad handler, like in a <body> tag.

function init(){ // grab div named "pictures" var content=document.getElementById("pictures"); // search for image tags var thumbs = content.getElementsByTagName("IMG"); // search for anchor tags var pics = content.getElementsByTagName("A"); // go through image tags and assign function to mouseover for (i=0; i< thumbs.length; i++){ thumbs[i].onmouseover = growShrink; // This is for Netscape browsers... if (pics[i].captureEvents) thumbs[i].captureEvents(Event.MOUSEOVER); } // go through anchor tags and assign function to click for (i=0; i< pics.length; i++){ pics[i].onclick= showImage; // Again, for Netscape browsers... if (pics[i].captureEvents) pics[i].captureEvents(Event.CLICK); } }

Say you’re messing with some PHP/MySQL stuff on your test machine, which is connected to the internet, and you want to stop anyone outside from having access to your webserver. The easiest thing is to edit your httpd.conf file (found in /private/etc/httpd/ for you OSXers...) to only listen to your localhost machine, thusly:

(search for this section) # BindAddress: You can support virtual hosts with this option. This directive # is used to tell the server which IP address to listen to. It can either # contain "*", an IP address, or a fully qualified Internet domain name. # See also the <VirtualHost> and Listen directives. # BindAddress localhost

(JavaScript part) <script> // Make an array containing all the class names myList= new Array( "First","Second","Third","Fourth","Fifth","Sixth","Seventh","Eighth","Nineth","Tenth"); // function that loops through array and fills out pulldown. function makePulldown(){ var pullDown=""; for(i=0; i<(mylist.length); i++) {pulldown += "<option> "+myList[i];} return pullDown; }; </script> (HTML part) // Make a form element that is filled by the array <form name="myForm"> <p>Select one of them:</p> <select name="pullDown1"> <script>document.write(makePulldown());</script> </select> </form>

Here it is in action:

Select one of them:

Use the <xmp> tags. Yes, I know it's "depreciated," but it works (unlike <pre>).

Here it is in action:

<form name="myForm"> <p>Select one of them:</p> <select name="pullDown1"> <script>document.write(makePulldown());</script> </select> </form>

(JavaScript part) // Make an array containing some items function pickOne () { var phrase = new Array( "This is the first phrase.", "Here's another.", "Another random phrase from a JavaScript script.", "Wha' chu talking about Willis?", "This is, what... the fifth phrase?", "I'm running out of things to add to this list", "This should be enough to test it." ) // This next line will pick a random number from 1 to the // number of phrases in the array... pretty clever, I think... var randNum = Math.floor(Math.random()*phrase.length); // This pops up an alert, picking a random phrase... alert (phrase[randNum]); } (HTML part) // Make a form element that is filled by the array <form name="myForm"> <input type="button" value="Click here" onClick="pickOne()"> </form>

Here it is in action:

Navigate to the directory where the archive(s) exist. and type in terminal: textutil -convert html <name of file to be extracted from>