Saddacrackers

Archive for the ‘AJAX’ Category

Add animated thumbnails into your website.

This code was initially built for the iPhone and employs css3 technologies, but I believe it will work in Safari or Firefox. I’m not sure about IE (IE-8 will probably be ok).

The main class.
Save the code below in a file and name it AnimateThumbs.js

var AnimateThumbs = function () {

var _container;
var _totalThumbs;
var x_counter = 0;
var y_counter = 0;
var xArr_counter = 0;
var yArr_counter = 0;
var spacer = 10;
var columns = 4;
var _interval = 100;
var _randomize = false;
//var x = [0,1,2,0,1,2,0,1,2,0,1,2]; // these are how the arrays should look if there are 12 child nodes and 3 columns
//var y = [0,0,0,1,1,1,2,2,2,3,3,3]; // these are how the arrays should look if there are 12 child nodes and 3 columns
var x = new Array();
var y = new Array();

function setup() {
//_container = container;
_totalThumbs = _container.childNodes.length;
hideThumbs();

// populate x and y arrays with the proper row and column positions
// based on the children of the containing div
for (var i=0; i< _totalThumbs; i++) {

if (xArr_counter + 1 < columns) {
xArr_counter++;
x.push(xArr_counter);
y.push(yArr_counter);

} else {
xArr_counter = 0;
x.push(xArr_counter);
y.push(yArr_counter);
yArr_counter++;
}
}

}

// position the thumbs based on
function animateThumbs() {
if (_randomize) {
for (var i=0; i< _totalThumbs; i++) {
setTimeout(randomThumb, _interval * i, i);
}

} else {
for (var i=0; i< _totalThumbs; i++) {
setTimeout(fadeThumb, _interval * i, i);
}
}

}

// remove thumbs one at a time in the same order they were placed
function reverseThumbs() {
for (var i=0; i< _totalThumbs; i++) {
setTimeout(removeThumbs, _interval * i, i);
}
}

// place thumbs on stage in random order
function randomThumb(number) {

var i = number;
var rand = Math.floor(Math.random() * x.length);

_container.childNodes[i].style.top = (103 + spacer) * (y[rand]);
_container.childNodes[i].style.left = (75 + spacer) * (x[rand]);

x.splice(rand,1);
y.splice(rand,1);

}

// place thumbs on stage from top left to bottom right
function fadeThumb(num) {
var i = num;

//alert(num);
_container.childNodes[i].style.top = (103 + spacer) * y_counter;
_container.childNodes[i].style.left = (75 + spacer) * x_counter;

if (x_counter + 1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}

}

// moves thumbs off the viewable area one at a time
function removeThumbs(num) {
var i = num;
var thumbWidth = _container.childNodes[0].offsetWidth;

//alert(num);
_container.childNodes[i].style.top = 0;
_container.childNodes[i].style.left = (-thumbWidth);

}

// moves thumbs off the viewable area all at once
function hideThumbs() {
var thumbWidth = _container.childNodes[0].offsetWidth;

for (var i=0; i< _totalThumbs; i++) {
_container.childNodes[i].style.left = (-thumbWidth);
}
}

/* UTILS */
function changeClass (element, newClass) {
element.setAttribute("class", newClass); //For Most Browsers
}

function cleanWhitespace(node)
{
for (var i=0; i<node.childNodes.length; i++)
{
var child = node.childNodes[i];
if(child.nodeType == 3 && !/\S/.test(child.nodeValue))
{
node.removeChild(child);
i--;
}
if(child.nodeType == 1)
{
cleanWhitespace(child);
}
}
return node;
}

/* PUBLICLY AVAILABLE METHODS */
return {
/* Public methods */
start:function () {
animateThumbs();
},

init:function () {
setup();
},

reverseAnimation:function () {
reverseThumbs();
},

/* Public Properties */
getContainer:function () {
return _container;
},

setContainer:function (obj) {
// remove whitespace so we
// get accurate node counts
cleanWhitespace(obj);
_container = obj;
},

getRandomize:function () {
return _randomize;
},

setRandomize:function (value) {
_randomize = value;
},

setColumns:function (value) {
columns = value;
},

getTotalThumbs:function () {
return _totalThumbs;
}

}

};

Now include the code in your html file.

<script type="text/javascript" src="js/AnimateThumbs.js" charset="utf-8"></script>

And you will need a div setup as a container for your thumbs. I gave my div an id of intro

<div id="intro">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Now you need to activate the javascript code.

var animatethumbs = new AnimateThumbs();
//set the div that contain the thumbs you wanna animate
animatethumbs.setContainer(document.getElementById('intro'));
//do you want them to animate in randomly?
animatethumbs.setRandomize(false);
//initialize
animatethumbs.init();

setTimeout(animateThumbs, 1500);
setTimeout(killThumbs, 5000);

function animateThumbs() {
//start animation
animatethumbs.start();
}

function killThumbs() {
//remove thumbs
animatethumbs.reverseAnimation();
}

Don’t forget the css so you can actually see the thumbs!!!

#intro { position: relative; }
#intro > div { width: 75px; height: 103px; background-color: #000; -webkit-border-radius: 3px; position: absolute; }

Having Trouble with Lightbox in Safari 3.x?

Well I know I sure was. I came across a bug where images could be displayed smaller or bigger than they should depending on what you clicked on before that image.

I’ve patched the lightbox.js to make this bug go away. In lighbox class’ changeImage method I modified the imgPreloader.onload function.

</div>
<div>imgPreloader.onload = (function(){</div>
<div id="code">

this.lightboxImage.src = this.imageArray[this.activeImage][0];

//CrashShop edited at 2009-05-12

//modified unimatrixZxero patch (below) to work with latest lightbox code

//FIXES SAFARI 3.0 Images keeping same height and width attributes as

//previous clicked image

this.lightboxImage.width = imgPreloader.width;

this.lightboxImage.height = imgPreloader.height;

//unimatrixZxero edited fist at 2008-02-20 23:25

//adding these attr setters for bug fix in Safari 3.x

//Element.setWidth('lightboxImage', imgPreloader.width);

//Element.setHeight('lightboxImage', imgPreloader.height);

this.resizeImageContainer(imgPreloader.width, imgPreloader.height);

}).bind(this);

imgPreloader.src = this.imageArray[this.activeImage][0];

</div>

Divine Movement Class Schedule Tool

Coffee Website

This is the site I’m designering for Zippy’s Java lounge in Everett.
www.zippysjava.com