I’ve had the Noobslide (slideshow “class” for Mootools (great tutorial here) for awhile, but I needed to added some basic functionality: when you hover (or mouseover) a slide, it stops the show so you can read it. When you rollout (mouseleave or mouseout), the show starts up again. Great!

Note that this assumes you have your slides in generic <span> tags inside something with an id of ‘box1′.


window.addEvent('domready',function(){
var nS1 = new noobSlide({
box: $('box1'),
items: [0,1,2,3,4],
size: 400,
autoPlay: true,
interval: 8000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Expo.easeInOut,
wait: false
}
});
//add mousein/out behaviors for all slides
$$('#box1 span').addEvents({
'mouseover':function(){
nS1.stop();
},
'mouseleave':function(){
//make sure the first argument matches your 'interval' value above
//this will set the delay,go to the next slide, without waiting for the delay (rolloff, immediately transitions to next slide)
nS1.play(8000,"next",false);
}
});
//end domready
});


Cool. Another thing I wanted was some text links to jump around the slide show. I’ve got my slides in a container with an id of’slidefloater.’ Here it is: (this would be inserted before the last ‘});’, inside the domready function )

var clinker=new Element('div',{'id':'clinker','styles':{'width':400}});
clinker.inject($('slidefloater'));
var labels = Array("label 0","label 1","label 2","label 3","label 4");
var i=0;
labels.each(function(el){
var linkto=new Element('a',{'html':el,'href':'#','styles':{'margin-right':4}});
linkto.j = i; //localize
linkto.addEvent('click', function(){
nS1.stop();
nS1.walk(this.j);
nS1.play(8000,"next",true); //go to next slide after normal interval (wait to go)
} );
i++;
linkto.inject($('clinker'));
});

Good times!

OK, so now the Facebook API is integrated, and seems to be working as expected. You plug in a city/state or ZIP, and the app finds folks you know in a 150 mile radius. It’s a little slow because I am loading all friends right now. It also only knows what people have put in their ‘current location,’ so you won’t see anyone who hasn’t provided that info. Still pretty good.

Also cleaned up some links with some logic (i.e. no longer gives a link to the next page of job search when there are no results!).

Found a nice function I adapted for PHP to compare two geocodes:

function ToRadian( $val) { return $val * ( pi() / 180); }
function DiffRadian( $val1,  $val2) { return ToRadian($val2) - ToRadian($val1); }
function  CalcDistance( $lat1,  $lng1,  $lat2,  $lng2, $m='') {
$radius = ($m == 'km')? 6367.0:3956.0;
return $radius * 2 * asin( min(1, sqrt( ( pow(sin((DiffRadian($lat1, $lat2)) / 2.0), 2.0) + cos(ToRadian($lat1)) * cos(ToRadian($lat2)) * pow(sin((DiffRadian($lng1, $lng2)) / 2.0), 2.0) ) ) ) );
}

Which I found at this nice person’s blog (thanks to Chris Pietschmann!)

I am using it to compare the friend’s location with the city/state/zip of the job search. So far, so good!