Blasi Blah

Race was being held at New Jersey Motorsport Park on their Thunderbolt Raceway track. Overall it was a pretty good day, could have done without all the overcast and the occasional rain shower but still had a pretty good time. Track was wet after about half the race and the Viper’s and Corvettes just could not seem to handle that. Overall Andy Pilgrim driving the K-Pax Volvo won the race followed by his teammate in the second K-Pax Volvo and third was taken by the GT500.

I am working on integrating a bubble like this on a site I am building for work so I figured I would share how it is done in case someone else wants to add one or play with it a bit. The original inspiration for this came from Panic’s Coda product site on their “Download” button.

In this case the project calls for a bubble to be shown over an image on the site describing what the image is, and what the action is. If this sounds pretty simple and straight forward well I will try to keep it that way. First do not try to over think it, this is really just a combination of a few effects and timing.

HTML Code:

First before the </head> tag you need to include jQuery


<script type='text/javascript' src='http://yoursite.com/path/to/jquery.js'>
</script>


Now somewhere in the body (really wherever you want the pop up tool tip to show add this code:


<div class="tip-container">
<img class="main-img" src="http://yoursite.com/path/to/img.jpg" />
<div class="popup-tip"> Put the content for the bubble here!</div>
</div>


To explain, the “tip-container” div is used to hold everything together, this is so that you can easily move things around and place it wherever you want in the page. I should also note the reason I am using classes to define this is so that you can have more than one on a given page and you will not have to code multiple styles.

The “main-img” class is the trigger for the effect.

And of course “popup-tip” is the container for anything you want to show in the tip box. This emans you can put any HTML markup you want in there and even style it however you like.

CSS Code:

Next we have the CSS for the block, thie only real goal here is to relatively position the popup and to hide it from initial view.


.tip-container {
position: relative;
}

.popup-tip {
position: absolute;
display: none;
}


There is really nothing more going on here. It is important to set the “popu-tip” display to be none, this is to hide it for those who fear scripts and have them disabled (of course it helps with those using screen readers as well).

JavaScript Code:


$(function () {
$('.tip-container').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $('.main-img', this);
var popup = $('.popup-tip', this).css('opacity', 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
top: -100,
left: -33,
display: 'block' // brings the popup back in to view
})

// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup-tip.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup-tip.css('display', 'none');
});
}, hideDelay);
});
});
});

These first ones are from the Grand-Am Rolex Series Bosch Engineering 250 held there. It was great weather fr a race, 90 degrees outside, nice breeze, sunny…overall a good day. Even with the nice weather the race had it’s moments, basically your typical people overreaching or just loosing it while trying to fight it out with another car. No one really lost it on the roller coaster this year which was a surprise though.

These photos are from the Star Mazda Challenge Series race which was held the same weekend as the Grand-Am race. Again not too much to talk about, one of the drivers went way off track on the final turn on the first lap not sure if he tried to brake late or if the tires were just not holding good due to temp and pressure but for whatever reason it really set him back. There was also an instance where two of them got together by the Oak Tree, was not there to see that one I only got to see the aftermath. Both cars were still drivable but one did need a replacement front nose clip.

As much as I love jQuery I had to share some of the reasons why. jQuery is a very robust javascript library that can be used as the basis for putting some very cool and unique effects in websites. The best part about jQuery is how easy it is to use for those who do not have the technical or programing knowledge it would take to create those effects otherwise.

Here are some of the ways you can implement a photo gallery into your site making it more than just static elements, others have already done the work and make the code freely available for others who wish to apply such scripts. Of course if you are experienced in javascript, php, html, and css it is very likely you will be able to easily modify these further to make it completely unique for your site.

1) Galleria:

Galleria is very cool in that all you need to do is put the images into an unordered list with one image per list element, and the script will do the remainder of the work. This includes creating the thumbnails, rotating through the images, and adding manual control so visitors can control the image scroll themselves.

2) Slider Gallery:

The slider gallery creates a horizontal scroll effect like what you see on the Mac site. The down side is that it does require a bit more work but it is a cool effect to have on any site.

3) jQuery Cycle Plugin:

This plugin allows you to create a rotation of images with a number of different effects all easily set up. On the site for the plugin you can find a description of how to set up each of the rotations effects and functioning examples so that you can see how it works before hand.

This was just an awesome video, esspecially if you are into cars, like the movie Cars by Disney’s Pixar or really just like fun animated flicks. Figured I really had to share.