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>

Walked to the gym, and got here a little early. Time for an inspirational cup of tea, because I’m growing up to be an old lady.

Felecia’s flower shop is where I get my fix. It’s been on this street corner since the dawn of time.

I asked for some images he wasn’t going to use, so I could play re-toucher with them.

Firstly, let’s add some sliders:
 Next we attach the code:
(This is what I added to the Anchor Point, because the Position was pathed out elsewhere.)

<pre>segMin = .3; //minimum segment duration
segMax = .7; //maximum segment duration
slideMin = effect("MinValS")("Slider");
slideMax = effect("MaxValS")("Slider");
minVal = [slideMin, slideMin];
maxVal = [slideMax, slideMax];

seedRandom(index,true);
segDur = random(segMin, segMax);
seed = Math.floor(time/segDur);
segStart = seed*segDur;
seedRandom(seed,true);
startVal =  random(minVal,maxVal);
seedRandom(seed+1,true);endVal = random(minVal,maxVal);

ease(time,segStart,segStart + segDur, startVal, endVal);

At the end of it I parented all of the objects to a new null, so I can tweak the X/Y to adjust for the offsets of the code.

That was cool and all, but I really missed the sun… so I broke down as many wooden posts as I could find and got as much dirt as I could easily get and…

View from inside some random underwater air pocket.

And here is my house (garden is in process…)
Now, my only fear is that without some sort of stead supply of meat… I will starve to death… I can only eat so many zombies in the abandoned mine below… I wonder how much land I will need to add, before a spawn point appears for animals… (or creepers, I guess).