Woah, long time no post! I guess I’ve gotten out of taking pictures recently, with mountain biking/training taking up most of my free time. Between that, twitter, and doing less actual development at work, I haven’t had much to post.

Recently though, I’ve been working on “mobilizing” a website, and man is it more of a pain then I thought it would be. The HTML and CSS is super easy, as you’d think. CSS3 and HTML5 is wonderful, and the site is devoid of image drop shadows, image rounded corners, etc etc.

The JS on the other hand, is fragmented. Especially dealing with things like slideshows, transitions, animations, and etc. It seems that even though multiple platform are using “WebKit”, that means something totally different for an iPhone then is does for an Android phone, or even Palm.

Then we get into QA. Oof. Not only does a Droid X with Android 2.2 act differently with touch events then an iPhone, but it’s different then an HTC Incredible or a MyTouch 3G running Android 2.1. What a pain. No wonder sites like mobile yahoo have moved to progressive enhancement of sites and provide a “mobile friendly kind of” site on Android, but give you the full fancy swipey site on the iPhone.

I’ll put a couple of posts out on the slideshow and swiping code that I ended up using, as it ended up being pretty clean and works well across multiple platforms, including degrading for non-touch browsers.

I’m creating a site for a client and wanted to jazz up the main menu slightly. Right now its just a plain text text that rolls over with a new color. It would be cooler, and just as accessible, if I made that css color fade in and out instead of just “appear”. The HTML, CSS, and JS for this with jQuery is easy as pie.

The HTML is below. Notice all I did is double up on the text in span tags. You can’t “fade” the change of a color style, but you can fade the white text in and out above the black text.

<ul>
     <li><a href=""><span class="white">Sports</span><span class="black">Sports</span></a></li>
     <li><a href=""><span class="white">Concerts</span><span class="black">Concerts</span></a></li>
    <li><a href=""><span class="white">Theater</span><span class="black">Theater</span></a></li>
</ul>

CSS. Position that white span tag absolutely so its above the black, and what you see.

#header ul li {
float:left;
font-size:80%;
font-weight:bold;
margin-top:2px;
text-transform:uppercase;
}
#header ul li a {
color:#fff;
display:block;
height:18px;
padding:3px 15px 0 12px;
text-decoration:none;
}
#header .white {
color:#fff !important;
position:absolute;
}
#header .black {
color:#000 !important;
}

The throw in a line of jQuery to manipulate that absolutely positioned white span to fade in and out above the black for a cool fading effect on hover.

$("#header li ").hover(function(){$(this).find('.white').fadeOut("medium");},function(){$(this).find('.white').fadeIn("medium");});

The following two ways are the way I do client side javascript menu highlighting. These work well if you have a site navigation or menu and you want to dynamically highlight the page that you are currently on. I use Method 1 when I have only a few items in the nav, as the JS for it is super easy, or I need to have relative URLs in my menu. Method 2 is better when there are a lot of items, as it relies only on the href and url and doesn’t need any extra stuff in the HTML. It does need absolute URLs in the menu href’s though in order to match correctly with the url.

Method 1 – This method relies on the fact that you will put id’s on each of the a elements with the value of the file name of that file. The HTML shows what I mean. The JS then just looks at the file name of the URL and makes that ID active. Super easy. There is also an “else” statement at the end of the JS so if the file name is blank because you are on “http://yourdomain.com/” it goes ahead and highlights the index menu item.

<div id="topMenu">
    <ul>
        <li><a id="index" href="">Blog</a></li>
        <li><a id="about" href="about.html">About</a></li>
        <li><a id="race_car" href="race_car.html">Race Car</a></li>
        <li><a id="contact" href="contact.html">Contact</a></li>            
    </ul>
</div>
<script type="text/javascript" language="javascript">
var fileName=location.href.toLowerCase().substring( location.href.lastIndexOf("/")+1 ).split('.')[0];
if (document.getElementById(fileName)) {document.getElementById(fileName).className = "active";}
else {if (fileName == '') {document.getElementById('index').className = "active";}}
</script>

Method 2 – This method does not need any id’s in the a elements. What it does it look through the href statements in your menu and compares them to the URL. This method works better for larger menus.

<div id="topMenu">
    <ul>
        <li><a href="http://www.tomhoppe.com/test/index.html">Blog</a></li>
        <li><a href="http://www.tomhoppe.com/test/about.html">About</a></li>
        <li><a href="http://www.tomhoppe.com/test/race_car.html">Race Car</a></li>
        <li><a href="http://www.tomhoppe.com/test/contact.html">Contact</a></li>            
    </ul>
</div>
<script type="text/javascript" language="javascript">
var theUrl = location.href.toLowerCase();
var navLinks = document.getElementById('topMenu').getElementsByTagName('a');

if (theUrl == 'http://www.tomhoppe.com/test/') { navLinks[0].className = 'active'; }
else { 
    for (var i=0; i<navLinks.length; i++) {
        var NavLinkUrl = navLinks[i].getAttribute('href').toLowerCase();
        if (NavLinkUrl == theUrl) {navLinks[i].className = 'active';}
    }
}
</script>

I’ve noticed that after working a TON, as in 80+ hour weeks for a few weeks, when that stops and I go back to “normal”, I have a real hard time adjusting to “normal” life. I get home and its as if my brain is used to still running at 100mph and not being able to just “sit still”. Real wierd feeling. Almost as if I’m lost just relaxing, and always feeling like its wierd that I’m not “doing something”.

Or maybe I just need a vacation ……