April 1st, 2006
This example uses the Prototype Javascript library (1.5.0_pre1). It’s not an official release yet, so you will see IE exhibiting some bugs.
I think this demo is a good example of how easy it is to use Prototype to do simplify complex tasks. Prototype functions used are: $$(), $A(), each(), sortBy(), and stripTags(). All of which save me alot of hard work!
$$() = CSS Selectors in Javascript
$$() is probably one of the more exciting recent additions to Prototype because it allows you to use CSS selectors to target DOM elements. It even uses CSS2 attribute selectors! Once the IE bugs and memory leaks are ironed out, it’ll be feasable to use Javascript apply styles using CSS2 rules.
sortBy() = Easy sorting logic
Enumerable.sortBy() is a new toy I’m happy to have learned to use because it is so powerful. Feed it the value you want to be compared and it’ll handle the rest. It has all the logic inside it so you don’t have to get your hands dirty. Look at the code below to try to get a better idea of how to use it.
function initializeFunctions(){
$$(“.genericTable thead th a”).each(
function(node, i){
node.onclick = function(){
// determine what column will be sorted by
columnIndex = $$(“.genericTable thead th”).indexOf(this.parentNode);
// sort!
sortTable(columnIndex);
// remove the ants and don’t follow the href
this.blur();
return false;
}
}
);
}
function sortTable(columnIndex){
unsortedRows = $$(“.genericTable tbody tr”);
sortedRows = unsortedRows.sortBy(function(node, i){
// feed the sortBy Enumerable method the column data to be compared
return $A(node.getElementsByTagName(“td”))[columnIndex].innerHTML.stripTags().toLowerCase();
});
// reverse
if(unsortedRows.first() == sortedRows.first()){
sortedRows.reverse();
}
// make the HTML
sortedRowsHTML = “”;
sortedRows.each(function(node, i){
sortedRowsHTML += ““+ node.innerHTML + “
“;
});
// write the HTML to the page
Element.update($$(“.genericTable tbody”).first(), sortedRowsHTML);
}
window.onload = function(){
initializeFunctions();
}
Posted in web, code | 3 Comments »
April 1st, 2006
Here is a background image I created from a pattern scanned from an old book.
bg.html
Posted in art | 1 Comment »
March 29th, 2006
View the demo
Prototype and Sergio Pereira’s excellent documentation of it has made client-side scripting with JavaScript actually fun! JavaScript can be intimidating. DOM manipulation is a beast, especially to those exposed to how easy it is to program ActionScript! Browser differences further complicate matters. I’ll quote from Sergio, “This amazingly well thought and well written piece of standards-compliant code takes a lot of the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back.“
Here is a function that powers a drop down navigation. It recursively applies a function to an li that toggles the visibility of a nested ul element.
window.onload = function(){
/*
A function that toggles the visibility of nested ul’s
*/
// For every li
$$(“#nav li”).each(function(node){
// if there’s a ul
var ul = $A(node.getElementsByTagName(“ul”)).first();
if(ul != null){
// toggle it’s visibility on these events
node.onmouseover = node.onmouseout = function(){
Element.toggle(ul);
}
}
});
}
The above JavaScript code depends on having all the ul’s hidden via the following script. View the XHTML source to the demo page to see how it’s implimented. I should also note that this code runs prior to the site being rendered and the window.onload. You will never see a flicker of menu’s collapsing.
/* Hide sub unordered lists */
$$(“#nav ul”).each(function(node){
Element.hide(node);
});
Posted in web, code | 4 Comments »
March 21st, 2006
I’m rummaging through some old stuff that I have archived. These images are five to six years old. Here are a few of the interesting things I have to share:
Kerosene Lamp
Dog in Watercolor
Ghandi Sketch
I made this sketch shortly after I made a drawing of Rembrandt. I felt the technique was worth practicing. This is what came of it.
Posted in Uncategorized, art | No Comments »
March 19th, 2006
This rose was picked from the backyard of my new home. The previous owner took care of the small yard, and planted a few roses.
Posted in Uncategorized | No Comments »
