Creating a lightbox using JQuery UI Dialog
$(“”"#I”").Love(“”"JQuery”");
I love JQuery and I love JQuery UI even more but what I love most about the combination of the two is that they are cross browser compatible, delivered over a CDN network, and open source. This means that I can use anything I build on top of these two very powerful platforms in any website I wish, including the enterprise ones.
I was recently tasked with building a lightbox element that would allow me to showcase Vimeo videos (or any other content) in a cross browser CDN enabled way. At first I scoured the web looking for the best jquery lightbox plugin. I tried fancybox, shadowbox, thickbox, slimbox, facebox, other younameit-box plugins but they all either catered to one type of content, failed in the cross browser arena, or had unknown or grey licensing.
On day two of my growing frustration a friend of mine suggested I look at JQuery UI and specifically the Dialog method. So I did and was instantly hooked, and while it didn’t provide all of the functionality you need from a lightbox it came pretty darn close. So I began hacking away until I got down to a pretty comprehensive lightbox solution for video and then wrote a little helper function to populate the content area on the fly and set the title. What follows is how to do that:
Step one: includes
So first you need to include JQuery and JQuery UI within your page. The easiest way to do this is use Google’s CDN by placing the following two lines in your head.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
You will also need to include a JQuery UI theme you can use the starter theme hosted on Google’s CDN too!
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.cs"
type="text/css" rel="Stylesheet" />
Again that needs to be placed in your head.
Step two: create a div
We need to create a div that will not only hold our dialog but also most of the embed code for the video’s we will want to play.
I would suggest adding this code near the footer of the page since it will load an iframe.
<div id="videoPlayerDiv">
<iframe id="theVideo" src="" width="640" height="360" frameborder="0" webkitallowfullscreen="" allowfullscreen=""></iframe>
</div>
Step three .dialog()
Now you need some JQuery magic on page load as well as creating the helper function
<script type="text/jscript">
$(document).ready(function () {
$('#videoPlayerDiv').dialog({ autoOpen: false, modal: true, title: "RFMD Video", width: 664, resizable: false });
$("#videoPlayerDiv").bind("dialogclose", function (event, ui) {
$('#theVideo').attr('src', '');
});
});
function SetVideo(source, title) {
$('#theVideo').attr('src', source);
$('#videoPlayerDiv').dialog("option", "title", title);
$('#videoPlayerDiv').dialog('open');
$('.ui-widget-overlay').click(function () { $('#videoPlayerDiv').dialog('close'); });
};
</script>
This can go in your header or wherever you might have already put the $(document).ready clause.
Final step: Call your helper function
So now all you need to do is call the helper function and pass it the src url for the video and the title
<a href="#" onclick="javascript:SetVideo('http://player.vimeo.com/video/18888136?title=0&byline=0&portrait=0&color=af0522"&autoplay=1', 'Courtesy Vimeo User 1024');return false;">Video</a>
You can prolly tell I use asp.net from the javascript surrounds and return false. If you don’t use .net you don’t need this.
Demo
A Robot That Mows Your Lawn?
As a little boy I watched the Jetsons and several other shows that told me that by the time I grew up I would have a flying car and most everything I needed to do could be done for me by a robot. I truely believed this and in early 2002 I was rewarded as the first “home robot” was introduced… I thought who wouldn’t want a Roomba? I shortly realized that most people thought it was a gimmick, too expensive for a toy, or used any excuse they could think of to pass off this miracle. I on the other hand could not wait to get one. I encountered one in 2003 at a job I was working and could not believe that this little bot just toiled away cleaning a floor while I was away doing something else… amazing. In 2008 I happened across a Roomba for $3 that’s right Three bucks! I couldn’t believe when the wife told me not to purchase it… I just had to. Even if it was broke I wanted to dissect it.
Well that $3 has went a long way in our household my wife loves her little robot and uses it almost on a daily basis to keep our downstairs floors clean. It still holds about a 2 hour charge and I have not had to replace a single component on it… not even a filter.
So now to my title, my trusty craftsman lawn mower (a hand me down of 14yrs) is finally not worth fixing and I need to purchase another. I don’t want to just purchase a lawnmower though. I would like to do away with that chore all-together. I would love to purchase a robo-mower, but even after the years of faithful cleaning our little $3 roomba has given her I can’t convince her that buying a robot to mow our lawn would be a good decision. She is willing to buy me a zero turn John Deere instead 
However I am not satisfied, I must prove that just like the Jettsons we can have machines today that make our lives easier.
So today I have decided to at least investigate how much it would cost for me to replicate our Roomba and make a DIY robotic mowing solution. If your interested stay tuned and I will post updates along the way.
Update 1: Nov, 13th Procured possible wheels and motor from broke RC toy of Daniels:
Update 2: Nov, 28th A list of Current Robot Mowers available for purchase:
RoboMow
LawnBott
AutoMower
Clay Shoot at Floyd County Coon hunters Lodge. Includes a Steel Cannon
We have been remodeling out laundry room for that past couple of weeks and wanted to get away this weekend so we came up to visit Donna and George in Floyd.
George had invited me to a clay shoot today and I must say that I am glad that he did. I am pyrotechnic at heart (don’t believe me?) so anytime I have a change to shoot or blow something up I am happy.
This was my first time clay shooting so I was kinda nervous especially since my father-in-law was letting me borrow is brand new mossberg. In fact I think I was more nervious about breaking something on his gun than anything else. We’ll anyway I did well for a beginner I got 6 out of 25. Including a couple off a wobble platform. If anything else I got to see a lot of nice people and eat some good hotdogs. But of course that is not all. I got to fire not only a .12 gauge but a .10 gauge and a steel cannon. Watch the video below.
And now that you have seen someone else light it here is me running away from it after I lit it
As I said great day, great food, and great fellowship.
David Bates
Internet Down = Downtime Experiments, Blowing up a Balloon with Compressed Air Can
So today the network went out at work and since I am no longer in IT I did not have to scramble to try and figure out what went wrong.
Instead me and a couple of fellow co-workers got together and decided to experiment a little bit.
Experiment: To blow a balloon up with the cold stuff from a compressed air bottle.
Need:
Compressed Air bottle
Bowl of hot water
Balloon
Gloves or winterized fingers
How to do it:
Ducky Dies
Ducky has been pronounce dead at 6:00PM his departure from this world was a lot of fun for me. The wife shuttered when she saw the videos, it was great. If you don’t know the story that led me to kill Ducky you need to read this post first. Ducky died from gas and fire that was lit with a toilet paper fuse. I recorded the whole thing for your viewing pleasure and you can watch the videos below… BTW there is an explosion that made my wife shake when she knew I was the one holding the camera
Ducky’s Setup:
Ducky Demise Part 1 “Lighting the Fuse”
Ducky Get’s Blown Up!
