tomhoppe.com

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 ……

So I’ve been a windows guy personally. Its just always what the companies where I worked used, and what I personally used. The web forum that I run has been using an antiquated ASP forum software for a while though, and it was time to move on. After evaluating some of the options, looks like vBulletin using PHP was the best one.

I have to say that I’m very impressed with my experience so far. PHP is installed and has been running like a champ on our IIS 6.0 server. The vBulletin and mySQL installs both went super smooth and I had the new forum up and running and data transferred in no time. I also made some custom php pages for redirects and the like, as well as a few edits to vBulletin’s pages.

I’m happy with the speed in which I was able to sort of “pick up” php. I was a little worried at first about being able to jump into it, but its like an “easy” ASP with a little bit of asp and javascript syntax all thrown into one. All in all, easy to learn and because of the community support, there is all kinds of mySQL and php info out there on google.

I just wanted to give myself a reference for a regular expression cheat sheet. This is much easier then forgetting and having to google for what I need. Pretty much all you ever need to know to setup a regexp.

I hate having “toolbars” under my address bar as it takes away real estate from webpages. Having said that, there are pages that I want access to with one click and not having to go to “bookmarks” and searching for them. I found a cool little way to have your cake and eat it to by moving the bookmarks toolbar items to the main file toolbar. They fill out the otherwise unused space between “Help” and your window controls.

• Enable your Bookmarks Toolbar under View, Toolbars.
• Go to View, Toolbars, Customize
• Drag the “Bookmarks Toolbar Items” from the Bookmarks toolbar to the top bar next to “Help”

Now you can change those items around to have shorter descriptions so they fit. I ended up removing the names and going by just the icons. When you bookmark something that you want in there, just add it to the bookmarks toolbar and it pops up there. Brilliant!

Kind of old news, but Google is now hosting the latest and greatest versions of the most popular JS libraries including jQuery, prototype, script_aculou_us, etc

Because of the gzip compression and fast response of google’s servers, these files get to the users fast!

You can either use google’s loader or just link to the permanent paths of the files.

The Ajaxian has a great article on this

It looks like I will be an official iPhone convert here shortly. I’ve been playing with some iPhone looking pages lately at work, and got to use the iUI JS library that Joe Hewitt created.

This library is awesome. It lets you code a page in standard, plain HTML and then converts the CSS/JS to an iPhone look and feel. Also, it sets up your links to enable the “slide in” navigation to work correctly between your links. Plain genius and its oh so easy to use.

With this work and the new “Corporate Friendly” 3G iPhone that is coming soon, I’m hoping to be able to get rid of this POS Palm 700w that I’ve been cursed with, and go to the iPhone for my phone/email device. I’m very excited. We’ll see what happens!