The Future of Panhandling
Another one of my coworker’s whiteboards digitized. This one focuses on how QR codes are popping up everywhere. First it was restaurants and now they can be found in everything from grocery stores to hardware warehouses. Soon people will be placing QR codes on the backs of their cars instead of using long web addresses and maybe even panhandlers will now have Paypal accounts in order to collect their donations.
Smart phones and mobile computing sure have made our lives more connected.
Pumpkin carving and general fun
This weekend was a ton of fun. Saturday we invited my mom and sister over for some pumpkin carving, we do this every year and we normally do a lunch, dinner, or lupper along with cake and other festive treats followed by the pumpkin carving, and general goofiness.
This has become a great tradition now that we all have kids. Even our neighbor joined in on the fun. I truly enjoy just getting some time to hang out with them and teach the young ones how to carve up a pumpkin.
Sunday we decided to skip church since my mom was willing to watch the kids and allow me and the wife to have a date afternoon. It was a great time. Me and Jess never get to spend time away from the kids and although we love them to peices, having a moment to sit and enjoy a meal with your partner in life is a precious thing. However, you’ll probably laugh, we took our date at Chili’s and then went to Sam’s club to do the weeks grocery shopping 
Enjoy the photos.
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.
