Categories
Development

Feature Box

Needed to create an area on a web page that could contain several feature items that could be easily navigated through. There are many excellent carousel type components available, but they didn’t meet all my needs or were conflicting with a drop down menu that we have on this particular site. So I decided to create my own solution.

So that it’s semantically correct, all you need is to wrap a div around an ordered list and give that div an id of “feature-box”.

<div id="feature-area">
    <ol>
        <li><img src="http://www.atlantic.edu/aca/images/homeSplashCareer.jpg" width="548" height="200" alt="Turn your passion into a culinary career" /></li>
    	<li><img src="http://www.atlantic.edu/aca/images/homeSplashBaking.jpg" width="548" height="200" alt="Rise to the challenge of a baking and pastry career" /></li>
    	<li><img src="http://www.atlantic.edu/aca/images/homeSplashFire.jpg" width="548" height="200" alt="Get fired up for a culinary career" /></li>
    	<li><img src="http://www.atlantic.edu/aca/images/homeSplashRestaurant.jpg" width="548" height="200" alt="Learn in a real restaurant setting" /></li>
    </ol>
</div>

The rest of my javascript relies pretty heavily on the YUI DOM Collection and the YUI Event Library, so I included their yahoo-dom-event.js file. YUI library is amazing and if you’re not familiar with it I highly recommend you check it out.

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

Then I wrote up a little function that on page load takes the ordered list and only shows the first item and creates the navigation to control the feature box.

init:function(e) {
    // object test if js available
    if (!document.getElementById || !document.createTextNode){return;}
    if (!document.getElementById("feature-area")) return false;
 
    // assign feature-aread div, ol, and items
    var featureDiv = document.getElementById('feature-area');
    var featureOl = featureDiv.getElementsByTagName('ol');
    var featureItems = featureOl[0].getElementsByTagName('li');
 
    // set class on li's to hide and show for the first item
    for (var i=1; i<featureItems.length; i++) {
        YAHOO.util.Dom.addClass(featureItems[i], 'hide');
    }
    YAHOO.util.Dom.addClass(featureItems[0], 'show');
 
    // create navigation
    var navDiv = document.createElement('div');
    navDiv.setAttribute('id', 'feature-nav');
    navDiv.innerHTML = '<a href="#" id="feature-prev">prev</a> <span id="feature-nav-marker"></span> <a href="#" id="feature-next">next</a>';
 
    // insert navigation
    YAHOO.util.Dom.insertAfter(navDiv, featureOl[0]);
 
    // create nav dots
    for (var i=0; i<featureItems.length; i++) {
        var navMarkerItem = document.createElement('span');
	var navMarkerId = 'feature-nav-'+i;
	navMarkerItem.setAttribute('id', navMarkerId);
	navMarkerItem.innerHTML = 'item '+i;
	var navMarkerList = document.getElementById('feature-nav-marker');
	navMarkerList.appendChild(navMarkerItem);
	// assign class of active to first marker
	if (i==0) {
	    YAHOO.util.Dom.addClass(navMarkerItem, 'active');
	}
	YAHOO.util.Event.addListener(navMarkerItem, "click", acccFeatureArea.gotoFeature);
    }
}

First we grab then apply the class of “hide” to all the list items’s. But the very first list item we apply a class of “show”. Now only the first list item is being displayed.

// assign feature-aread div, ol, and items
var featureDiv = document.getElementById('feature-area');
var featureOl = featureDiv.getElementsByTagName('ol');
var featureItems = featureOl[0].getElementsByTagName('li');
 
// set class on li's to hide and show for the first item
for (var i=1; i<featureItems.length; i++) {
    YAHOO.util.Dom.addClass(featureItems[i], 'hide');
}
YAHOO.util.Dom.addClass(featureItems[0], 'show');

Then we create the navigation. To figure out how many navigation dots to create, we have to figure out how many list items there are. Also those navigation dots need an event handler attached to them so they can be used to control the feature box.

// create navigation
var navDiv = document.createElement('div');
navDiv.setAttribute('id', 'feature-nav');
navDiv.innerHTML = '<a href="#" id="feature-prev">prev</a> <span id="feature-nav-marker"></span> <a href="#" id="feature-next">next</a>';
 
// insert navigation
YAHOO.util.Dom.insertAfter(navDiv, featureOl[0]);
 
// create nav dots
for (var i=0; i<featureItems.length; i++) {
    var navMarkerItem = document.createElement('span');
    var navMarkerId = 'feature-nav-'+i;
    navMarkerItem.setAttribute('id', navMarkerId);
    navMarkerItem.innerHTML = 'item '+i;
    var navMarkerList = document.getElementById('feature-nav-marker');
    navMarkerList.appendChild(navMarkerItem);
    // assign class of active to first marker
    if (i==0) {
        YAHOO.util.Dom.addClass(navMarkerItem, 'active');
    }
    YAHOO.util.Event.addListener(navMarkerItem, "click", acccFeatureArea.gotoFeature);
}

Functions are attached to the navigation arrows to reveal the next item in the list while hiding all the other items. If it’s at the end or beginning of the list it then circles around to the first or last item.

nextFeature:function(e) {
    var currentItem = YAHOO.util.Dom.getElementsByClassName('show', 'li', 'feature-area');
    var nextItem = YAHOO.util.Dom.getNextSibling(currentItem[0]); 
    // if no more items, go to first item
    if (nextItem == null) {
        var featureItems = YAHOO.util.Dom.getElementsByClassName('hide', 'li', 'feature-area');
	var nextItem = featureItems[0];
    }
 
    YAHOO.util.Dom.replaceClass(currentItem[0], 'show', 'hide');
    YAHOO.util.Dom.replaceClass(nextItem, 'hide', 'show');
    acccFeatureArea.setMarker();
}

The navigation dots get their own function attached to them to reveal their respective list item. It adjusts the class associated with the list items as well as the navigation dots to control the feature box.

gotoFeature:function(e) {
    // assign feature-aread div, ol, and items
    var featureDiv = document.getElementById('feature-area');
    var featureOl = featureDiv.getElementsByTagName('ol');
    var featureItems = featureOl[0].getElementsByTagName('li');
 
    var navMarker = document.getElementById('feature-nav-marker');
    var navMarkerItems = navMarker.getElementsByTagName('span');
 
    var navMarkerId = this.getAttribute('id');
    var currentSelection = navMarkerId.substring(navMarkerId.length-1);
 
    if (this.className != 'active') {
        for (var i=0; i<featureItems.length; i++) {
	    YAHOO.util.Dom.replaceClass(featureItems[i], 'show', 'hide');	
	}
	YAHOO.util.Dom.replaceClass(featureItems[currentSelection], 'hide', 'show');
 
	for (var i=0; i<navMarkerItems.length; i++) {
	    YAHOO.util.Dom.removeClass(navMarkerItems[i], 'active');
	    YAHOO.util.Dom.addClass(navMarkerItems[currentSelection], 'active');
	}
    }
}

Here is a link to a sample of this.

Categories
Adventure

Adventure Aquarium

Jelly Fish

Took a random trip over to the Adventure Aquarium in Camden. Pretty sure the last time I was there was four or five years or so, and was interested to see what upgrades had been made.

Wow, it was cold outside that day. If fact, it was so cold outside that the penguins had gone indoors for their safety. Purchasing tickets outside was quit a testing experience. My face was numb, and I wasn’t sure if my right ear was still there. But once I got inside it was nice and toasty and both my ears were still where they belong.

Once inside I was really impressed. The tank where you walk in was huge! With some very cool guys swimming along in there. The massive turtle was my favorite. It wasn’t too busy either, so it made it really easy to check all the different things out.

The shark tank was really cool too. They had a shark tunnel where they swim around and over you. This was really cool. Though the star of the day was the hippo who decided to play with a tire right in from of us. Hippos have some massive teeth.

Categories
Sports

Just Running

Never been much of a runner, especially for distance. However, I have recently began running with Mr. Yuk-Yuk a couple of times a week. Not sure running at night on the Atlantic City Boardwalk in frigid and windy January is the greatest time to start such a hobby, but so far it’s not too bad.

I think we ran probably 2 miles or so on our first attempt, and will continue to extend our travels based on boardwalk landmarks.

Categories
Adventure

Baltimore Aquarium

Pacific FishTook a really random road trip with the Shepherd today to the Baltimore Aquarium. We got there with no problems thanks to the GPS gods. You have to buy a ticket to get in at a certain time, so we got the 3:15 admittance and to see the dolphin show at 5:00.

Since it wasn’t anywhere near 3:15, we had plenty of time to check out the Inner Harbor. Last time I was there was probably 1991, so a lot has changed. Everything seemed pretty new and clean around the harbor. Every restaurant imaginable was there as well as an ESPN Zone and the most massive Barnes and Noble I’ve ever seen. Their bathrooms were really weak, smelled really bad.

It turned out to be quite a warm day today, so walking around outdoors in the end of December wasn’t nearly as bad as it could’ve been. There are also many historic ships to check out there too, but didn’t take any of the tours this time.

The aquarium was very cool. A little too packed at times, keep getting elbowed by people but the animals were really cool. Sharks were really cool, so was this one gigantic turtle I saw. Taking photos was tough, with the lighting and the thick glass of the tanks, but I did manage a couple of ok shots.

The dolphin show was pretty cool too. Not quite as nice as the one I saw at San Diego Sea World, but still fun to watch. After the dolphin show, the place really cleared out and we were able to go back and check out the exhibits that were a bit too busy early in the day. So that really worked out.

Categories
Video Games

Fallout 3

 Fallout 3
Been addicted to Fallout 3 for the xbox 360 recently. It’s a RPG shooter that takes place in a post apocalyptic Washington DC. It’s easily one of the finest games I’ve played in a while, probably the best game I’ve played this year.

The whole atmosphere of the game is amazing. The graphics, characters, and especially the sound really set the mood. From the eerie silence wandering the wasteland, to the various mutated beings that you encounter it’s very well done.

The control you have over the decisions your character makes throughout the story really add a unique dimension to this game. There’s so many different paths the story can go based on the actions you take.

If you own an xbox 360 or a PS3 and aren’t a little kid then this is a must play.

Categories
Adventure

Christmas 08

Celebrated Christmas with my family today. Think my trusty Canon Powershot S400 may’ve just died today, so no photos this year. I’ll have to play around with it and see if there’s anyway to salvage it, but it’s not looking too good.

We all exchanged gifts in the afternoon. Everyone seemed to enjoy what I had gotten them, so that was really cool. Here’s the stuff I got today:

So I guess now I’ll be able to surf the net anywhere, playing xbox while dining on the finest beef log money can buy with some ripped pecs. Quite a fine holiday indeed.

My brothers and some guests for some bizarre reason wanted to visit the Clara – Glenn Pet Cemetary a few streets from where we grew up. So I went along, there’s some really old tombstones there.  Spotted one as far back as 1912.

Have spent a lot of time playing Rock Band 2 and Guitar Hero World Tour today. Every time my brothers do bad, of course it’s the instruments fault not theirs. Thus far a pretty poor overall musical display.