A fun little Newsletter generator I am working on that uses KnockOut and jQuery in magical and new amazing ways! It is kinda ugly right now, because it is still in process–so shut up.

Knockout: (you only get a sample, you don’t need to see all of the crazy)

// let's list out the images to select
function f_imgBig()
{
	var newArray = Array();
	newArray.push(

	"images/366_A.jpg",
	"images/366_B.jpg",
	"images/366_C.jpg",
	"images/366_D.jpg",
	"images/366_E.jpg",
	"images/366_none.jpg"
	);

	return newArray;
}

function f_imgBigSel()
{
	var newArray = Array();
	newArray = f_imgBig() ;

	return newArray[0];
}
// now let's add in the viewModel and sorting
var viewModel = {}; // always outside of the document load
$(function() {

<!-- drag drop sort -->
	$( "#leftA,#leftB,#leftC" ).sortable({ connectWith: ['#leftA','#leftB','#leftC'] });

<!-- VIEW -->

viewModel = {
	postList_L: ko.observableArray( leftPost() ),
        addPost_L: function () {
	this.postList_L.push({
		img	: f_imgBig(),
		imgSel	: ko.observable(f_imgBigSel())
	});},

ko.applyBindings(viewModel);

});

Here is the html template.
(yes I am using tables, don’t worry about it)

<pre><!-- LEFT -->
    <table data-bind="visible: postList_L().length > 0" bgcolor="#FFFFFF">

        <tr><td id="module_area">

        <ul data-bind='template: { xxxxxxxx id="leftB" ></ul>

        <ul data-bind='template: { name: "postTemplate_L", foreach: postList_L }' id="leftA" ></ul>

        <ul data-bind='template: { xxxxxxxx id="leftC" ></ul>

        </td></tr>

    </table>

    <input name="AddPost" type="image" src="_css/img/20.gif" data-bind="click: addPost_L" id="addPost">

<!-- post -->
	<script type="text/html" id="postTemplate_L">
        <li style="background:#EFE;" id="sel">
        <div id="mov"></div>
		<input name="del" type="image" src="_css/img/20.gif" 
data-bind="click: function(){ viewModel.removePost_L($data); }, 
visible: viewModel.postList_L().length > 1" id="del">

		<input type="image" data-bind="attr: { src: imgSel }" />
		<select data-bind="options: img, value: imgSel" />

        </li>
    </script></pre>

The “how-to” follows:

The drop-down is a standard drop down nav, however the left and right arrows at the top allow you to change pages using your keyboard as well.

the nav:
The array breaks out into [page name,page title]

var arr = Array(
['1a','Immitto reprobo'],
['1b','Eeros enim'],
['1c','Aex inhibeo'],
['1d','Dolore nisl ut'],
['1e','Dloquor volutpat'],

['2a','Vel suscipit'],
['2b','Sin proprius'],
['2c','Natu lucidus'],
['2d','Delenit lobortis'],
['2e','Vel vel'],
['2f','Nisl, dignissim'],
['2g','Piusto elit'],

['3a','Pignissim capto'],
['3b','Ulciscor'],
['3c','Papto odio abdo'],
['3d','Sibidem hos si esse']
); 

// add the links to the navigation
function writeArr( i, length ){
for( i; i < length; i++ )
{
// I added line breaks for easy reading.
document.write( '<li id="verse"><a href="#"
num="'+(i+"s")+'" page="'+arr[i][0]+'"
title="'+arr[i][1]+'" >'+arr[i][1]+'</a></li>' );
}
};

The Drop-Down itself is based off of Vimeo’s design, the tutorial is [ here ].

<li><div id="nav"></div>
<ul>
     <li id="chapter">
        <img class="corner_inset_left"
src="_css/nav/corner_inset_left.png"/>
Chapter One
       <img class="corner_inset_right"
src="_css/nav/corner_inset_right.png"/>
   </li>
       <script>writeArr(0,5);</script>
   <li id="chapter">Chapter Two</li>
       <script>writeArr(5,12);</script>
   <li id="chapter">Chapter Three</li>
      <script>writeArr(12,16);</script>
   <li class="last">
     <img class="corner_left" src="_css/nav/corner_left.png"/>
     <img class="middle" src="_css/nav/dot.gif"/>
     <img class="corner_right"  src="_css/nav/corner_right.png"/>
   </li>
 </ul>
</li>

As you can see the actual content is pulled from our JavaScript Array. (I just wanted to keep it all tidy).

Here is the navigation control:

<script>
var pageNum = 0;

// you can move the array code to here..

// wait for when the doc is ready
$(function(){
	$("#verse a").click(function() {
		pageNumArr = $(this).attr("num").split('s');
		pageNum = pageNumArr[0];
		nextprev();
	});

// always update the title text on the page
	$('#title').html( arr[0][1] );

// next & previous icons at the top
	$('#prev').click(function(){
		goNext();
	});

	$('#next').click(function(){
		goNext();
	});

// keyboard arrow keys
	$('body').keyup(function (event) {

		if (event.keyCode == 37) {
		  goNext();
		} else if (event.keyCode == 39) {
		  goPrev();
		}
	});

// control what page you are going to
	function goNext(){
		pageNum--;
		if( pageNum < 0 ){ pageNum = arr.length-1 };
		nextprev();
	}

	function goPrev(){
		pageNum++;
		if( pageNum >= arr.length ){ pageNum = 0 };
		nextprev();
	}

// make sure all the nav functions go to the same place
	function nextprev(){
		var title= arr[pageNum][1];
		var page= arr[pageNum][0];
// changes page header -->
		$("#title").replaceWith('<span id="title">'+title+'</span>');
// add new page -->
		$("#page").load( "pages/"+page+".html" );

		$("a").removeClass("sel");
		$("a[num^="+pageNum+"s]").addClass("sel");
/* FUN FACT:
	using $("a[num^="+pageNum+"]") will select "1" and "10,11,12,.."
	as well, because they all start with the number "1". Which is
	kinda fucked up, so I added a text character at the end "s" so
	"1s" is now unique.
	"11s" and/or "21s" are not effected, but if I had "1s1" then
	I'd be back to the drawing board.
*/
	}

// this will update the nav for the first use.
	nextprev();
});

</script>

A while ago, I was talking (probably here somewhere) about increasing the speed of FOR loops in ActionSctipt.

var arr:Array = new Array("kittens","bunnies","puppies","whores dressed like french maids");
// slow:
for( var i:uint = 0; i < arr.length(); i++ )
{
trace( "Things that are cute: " + arr[i] + ". ");
}

// fast:
var i:uint = 0;
var l:uint = arr.length();
for( i; i < l; i++ )
 {
      trace( "Things that are cute: " + arr[i] + ". ");
 }

// personal favorite (although I need to test the speed)
var i:uint = 0;
for( i in arr )
{
trace( "Things that are cute: " + arr[i] + ". ");
}

They both do the same thing, but with the variables pre-defined, the second FOR is faster. It isn’t trying to run a function AND calculate the length of an an array.

For jQuery, the effect is the same — my guess is that is a global coding thing.
Although, it goes counter to conventional thinking (having more code on the page = slower load), the truth is: cleanly defined variables will produce faster (efficient) processing, even if it does mean more lines of code.

// slow
$(".cuteStuff").each( function()
{
    for ( var arr, i = -1; arr = $arr[++i] )
    {
        document.write( "Things that are cute: " + arr[i] + ". ");
    }
});
// faster
var $arr = $("#cuteStuff"); <!-- ID's are faster then CLASSES -->
for ( var arr, i = -1; arr = $arr[++i] )
{
    document.write( "Things that are cute: " + arr[i] + ". ");
}

Here the main difference is that in the “slow” example, you are calling a function every time the page reads a div tag. (Think of it like, each div tag is a glass of beer, you find it drink it, and move on to the next.)
In the “fast” example you are putting all the div tags into a make-shift array and just chugging it. (This time you are pouring each div tag into a beer bong and now chug them all at once.)

EXPLORE: Grock our mad fine peeps, yo!

Just finished the TurboTax Social Hub. (Well ok, I finished a while ago, but it just launched…).
It is a portal into the crazy social aspect of TurboTax’s marketing. It might seem silly at first, but once you think about it, it’s actually kinda brilliant. Its (Taxes) something everyone needs to deal with, and we all fear it on some primal level, and Intuit is using our emotional bond with the event to turn it into a social thing. Kinda turning it on it’s ear. It’s no wonder this stuff becomes so popular.

LEARN: Dork out with TurboTax!

CONNECT: Chances are that you know someone you know who knows TurboTax!

Take the Red Pill or the Blue Pill? Ok, so there are three Blue Pills. But you can't say I didn't give you options.

<script language="javascript" type="text/javascript">
 /*
 ---------------------------
 LOGIN
 ---------------------------
 */
 <!--
 var login = prompt("LOGIN:","")
 if ( login !="password" )
 { document.write("YOU FAILED!") }
 -->
</script>

$(document).ready(function()
{
	// activete the first item
	$(".accordion .query:#news").animate({height: 470}, 750);
	// drop the active text
	$(".accordion .query:#news").find(".activate").animate({opacity: "0", top: 450},760);

	$(".accordion .query").click( function()
	{
		// grow!
		$(this).animate({height: 470}, 750);
		//
		$(this).find(".activate").animate({opacity: "0", top: 450},760);
		// this is how I will set the id of the expanded swf
		var a = $(this).attr('id');
		//alert( a ) ;
		// truncate the non active bastards
		$(this).siblings(".query").animate({height: 150}, 750);
		//
		$(this).siblings(".query").find(".activate").animate({opacity: "1",top: 130},760);
	});
});

<html>
<head>
<!-- load the jquery script -->
    <script src="http://jquery.com/src/jquery.js"></script>
    <script src="js/Accordion.js" type="text/javascript">
<!-- this is the code from above-->
    </script>
<!-- CSS -->
<style type="text/css">
	<!--
	@import url("css/style.css");

.accordion {
	width: 			980px;
	border-bottom: 	solid 1px #c4c4c4;
}
.accordion .query {
	background: 	#e9e7e7;
	padding: 		0;
	margin: 		0;
	font: 			bold Arial, Helvetica, sans-serif;
	border: 		solid 1px #c4c4c4;
	border-bottom: 	none;
	height:			150px;
	overflow:		hidden;
}
.accordion .query:hover {
	background-color: #e3e2e2;
}
.accordion .query.active {
	background-position: right 5px;
}
.accordion p {
	background: 	#f7f7f7;
	color:			#333333;
	font-size:		11px;
	margin: 		0;
	padding: 		10px 15px 20px;
	border-left: 	solid 1px #c4c4c4;
	border-right: 	solid 1px #c4c4c4;
}

.accordion h1 {
	margin-left:	10px;
	color:			#111111;
	font-size:		12px;
	font-weight:	normal;
}

.accordion a:link {
	color:			#FF9900;
}
.accordion a:visited {
	color:			#FF9900;
}

.accordion .activate {
	color:			#333333;
	background: 	#f7f7f7;
	border: 	solid 1px #c4c4c4;
	font-size:		11px;
	text-align:		center;
	position:		relative;
	top:			130px;
	left:			820px;
	width:			120px;
	display:		block;
}

	-->
    </style>
<!-- Title=-->
    <title>Dr.Punchman is Awesome</title>
</head>
<body>
<div class="accordion">

    <div class="query" id="unigueID1">
    	<div class="activate">Click To Expand</div>
        <h1>Title 1</h1>
        <p>Lorem ipsum</p>
    </div>

    <div class="query" id="unigueID2">
    	<div class="activate">Click To Expand</div>
        <h1>Title 2</h1>
        <p>Lorem ipsum</p>
    </div>

    <div class="query" id="unigueID3">
    	<div class="activate">Click To Expand</div>
        <h1>Title 3</h1>
        <p>Lorem ipsum</p>
    </div>

</div>
</body>
</html>