Nashville Web Design, Graphic and Logo Design

One thing all web designers and developers have to deal with on a daily basis is the dreaded Internet Explorer and it's poor handling of web standards. For whatever reason IE has numerous issues that are hard to deal with. One of those issues is that IE doesn't return anything when calling the get method. Unfortunately I didn't realize this until I had already built out a nice fade transition for my portfolio only to find that it didn't work at all in IE 7 or below. (haven't tried IE 8 yet).

I'll preface this by stating that I'm not a developer… With some insight from friend and collegue Jackson Gabbard, I was able to work around IE's failure to return anything from Get by using hidden divs and the load function. It goes something like this: 1. Hide a div. 2. add a blank image tag to that div. 3. load an image into that image tag. 4. once that image is done loading, show the hidden div.

Here's roughly the jQuery I used to get this done:

$(document).ready(function(){

function fadeInImg() {
$("#port_wrapper").fadeIn(2000);
}
$("#portfolio img").click(function(){ // any image inside the portfolio div calls this function on click (div that holds the thumbnails)

var id = $(this).attr("id"); // used to determine which image to get based on the thumbnail image id attribute

$("#port_wrapper").fadeOut(2000, loadPortImg); // fade out current image (if any) from the and calls the img loading function

function loadPortImg() {
$("#port_wrapper").empty(); // clear any imaage currently loaded. (#port_wrapper holds the large images)
$("#port_wrapper").append(""); // add new empty image tag as loading "shell"

$("#loaded_img").load(function() { // once the loaded_img div is fully loaded call fadeInBg funciton
fadeInImg();

});

$("#loaded_img").attr("src","images/" + id + ".jpg"); // now add the selected img src to the appended img tag (once this loads fully the fadeInBg function is called

} // stop loadPortImg function

}); // stop thumbnail click function

}); //stop jquery

Here's roughly the HTML I used to get this done: NOTE – the thumbnail image id attribute MUST be the same as the large image filename sans the ".jpg" file extension.

<div id="portfolio">
<a href="#"><img src="images/thumb.jpg" alt="Website Design icon" title="Some Website Design" id="somePortImgTitle" width="50″ height="50″ /></a>
</div> <!– stop portfolio div –>

<div id="port_wrapper"></div> <!– stop content_container –>

Like I said, I'm not a developer so there may be an easier way to get around this IE/get issue but this seems to work pretty well for me. Also excuse any mistyped terminology.
click here for a working example

I recently completed a fresh website design for country music star Jason Aldean. Somewhere during the process I realized that I'm much more in tune with the country music scene. More so than I ever guessed I would be. I've always been a fan of older country music like Johnny Cash, Willie, Waylon, Hank (Sr) and Patsy Cline. You know, the classics. But now I can actually name that tune when it comes to mainstream radio.

All of this caused a bit of introspection as to what I've learned (or become more aware of) from other jobs I've worked. For a while, Point of Sale was my thing. I could tell you who the big players were and exactly what their visual identity looked like. I critiqued self checkout systems much to the annoyance of my girlfriend and the lady working the system. When I was working in advertising, I was made (sometimes painfully) aware of the outboard engine market and lawnmowers and generators from my dealings with Honda.

So… what has all this introspection resulted in? The realization that self-checkout still has a lot of room for improvement, outboard motors have twice the power of my car but a fraction of the weight and new country isn't all that bad.