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.
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
New Site Launched socreativeworks.com
My sister last year asked me if I could build a website for her so for her christmas present I reserved a domain. One year later we have the site up and running. She does amazing artwork… Murals, Paintings, and Sketches. Check her out http://socreativeworks.com
The Mac App Store is Killing Demo’s
With all of these app stores are we about to see the end of the demo?
I am of the mindset that I need to evaluate software before I buy it. On windows this is not a problem as I can download a 30 day trial and then either delete it or buy it after I see if the application is going to work for what I need. This is especially important when evaluating software for business purposes. On the Mac I can no longer find Demo’s and am reduced to a paragraph and 5 screenshots to evaluate a purchase. This is simply not enough for me. Let’s take a look at Hype as an example.
While $24.99USD is not that much money I can say that I wouldn’t pay more than $4 for anything I couldn’t actually touch first. Hype expects this. As stated Hype is graphics engine for creating HTML 5 animations without having to learn canvas. A much needed piece of software in this early HTML 5 time. Now I am sure that Hype does what it is supposed to do and does it well. Wouldn’t it be better if instead of just shelling out $25 bucks to find out we could test drive the software or heck even have a 30 day return policy? I think so. As of right now if you shelled out the $25 bucks and didn’t like Hype the only thing you could do is refuse payment on your credit card. There is no return policy, There is no customer service for the App Store. So in order to accommodate this some application devs are forced to create a Light version.
I find that if a light version is available I never go back and get the full version. I either delete the light version or I use the light version and work around it’s limitations. So this is a disappointment for me and the developer for me because I don’t get the full experience that I should and for the developer because they never get my money for their hard work. I don’t mean to cheat the dev’s out of their money but I won’t waste my own time searching for another version of a program that works for me that I have for free.
I hope Apple listens and gives us either a demo download or a way to return software we don’t want.
What are your thoughts.
Google’s Halloween Image is Slide-A-Riffic
Today Google’s choose to do a Scooby Doo Ghost-Busting theme for this halloween but I am not here to talk about the theme but rather the mechanics behind it.
I have heard the control they choose to implement be called many things such as slider, carousel, gallery, ad-rotater, and best of all multiple image thingy-majig. However I don’t know exactly what to call it. But the principle is very simple. You line up a set of images in div’s or unordered list set the width of the first div to the size of the picture and then tell it not to overflow that div hiding the rest of the images. You then move the images based on the navigational queues to the furthest left. Kinda like shuffling cards.
I have seen this control used on several hundred websites and even this one. It is a great way to get multiple ideas across in an unobtrusive and pleasing way.
However a few questions arise as there are so many librarys and methods to do this.
What kind of library do you use to accomplish this effect, do you use a library?
Do you prefer the slide or fade transitions?
What should we call this control?
Leave answers below or tweet them to @davidbates
Thanks
David Bates
