This week a client wanted a more elegant way to display video on their site and asked us to try and come up with the solution. I was already using Fancybox, the amazing jquery lightbox alternative plugin, so I set out the see if there was a recommended approach for this. I didn’t have to look far because on the Fancybox website, they have a great Tricks & Tips section! It had been a few months since I really looked around on the site, so I’m not sure when they added this (it may have already existed in some form or fashion). Anyways, I’ll cut to the chase.

Since our client has a YouTube channel and they are primarily going to be displaying those videos, I wanted to make it easy on them. This approach is just right, because they don’t have to remember much when they’re adding content in the WYSIWYG, they literally just have to set the href on any link to the youtube video they want to display in the lightbox. Using the following javascript (don’t forget to include your fancybox js and css files) any link including “youtube.com/watch” will be called in a lightbox! Pretty cool huh? Want to see some examples? Check out the demo I set up!

$(document).ready(function(){
	$('a[href*="youtube.com/watch"]').click(function() {

	$.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'none',
			'transitionOut'	: 'none',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			'wmode'		: 'transparent',
			'allowfullscreen'	: 'true'
			}
		});

	return false;
	});

});

As you can see, there are several variables you can change and adjust – the size, whether to show the title and how it will transition in and out. So, like I said, I found the examples for this on Fancybox.net’s Tips & Tricks page. Check it out!

If you want to set this up, here’s all you need:
FancyBox jQuery plugin
View the Demo:

Demo

I develop a lot of sites built on SilverStripe, but they use prototype for form validation. This causes issues since I primarily use jquery (a ton) throughout my sites. So, I was thrilled today when I discovered this little beauty of a plugin, jQuery Validate. I honestly can’t believe it took me this long to find it, but first I feel like I need to give credit where credit is due. Thanks to Aram Balakjian’s tutorial on SSBits.com for the bit of direction I needed. It really got me started and let me just say, jQuery Validate worked perfectly for what I needed.

Not only does jQuery Validate allow you to require require certain fields, oh no, there’s more… it lets you actually validate them against a set of rules! I’ve pasted the list of methods you can validate with below:

Whew, that’s a lot of options. So, it’s easy to implement, has lots of options, very easy to style with css… and while it’s not a 100% fool proof way to validate sensitive post data, it’s a great little approach for simple signup forms for your user interface.

Today I had a client request the ability to prevent his customers from copying and pasting certain sections of text. Easy enough right? We’ll just toss a transparent div on top of that and call it a day… but what about when he wanted the ability to do it himself, and easily? He knows enough to add a class to an element, but not enough to add custom divs (and we shouldn’t expect him to remember the process everytime should we?) That’s when I started looking for an elegant solution with jQuery. Continue reading to see what I found… Read more

I got an Apple Dev email today! Check it out:

“iOS SDK and iOS 4.1 beta 2 are now available from the iPhone Dev Center. Make sure to read the Xcode 3.2.4 Readme and the iOS SDK 4.1 beta 2 Release Notes before installing and downloading these new releases.”

Login to your apple account and download!

Do you remember thinking, “When I grow up, I want to be a web developer!”? Yeah, me neither. Perhaps that’s because it wasn’t until about 4 years ago that I decided to give it ago. I wasn’t happy with the projects being sent my way and when the opportunity presented itself I didn’t just jump at it – I leapt. I had a degree in Digital Media and up until this point that’s exactly what I had been doing. My focus was in 3d modeling and animation, and while I loved it, a part of me also hated it. The funny thing is that all through college I was envious of anyone that knew more than I did when it came to the web, it just hadn’t ever dawned on me that I could learn development on my own. I guess I was under the impression that I would need classes or training or… direction. Boy was I wrong…
Read more

So, I dunno what’s going on but lately I’ve been seeing about 5-10 spam comments a day! What gives?

So, I know I’ve posted several times about my love for Fancybox… and this one is even better! It was for me at least. After great frustration with ajax content inside the fancybox changing and the height not adjusting correctly I’ve had to come up with several solutions, all of which were buggy. So, here’s what I’ve landed on… for now of course.

This is testing and working with Fancybox 1.3.1 (download now)

You will also need the jQuery resize event plugin.

Click here for a working example.

Our example fancybox:

$('.fancybox').fancybox({
'autoScale' : false,
'scrolling' : 'no'
});

And your link will look something like this:

<a href="/ajax.php" class="fancybox">Show Ajax.php </a>

Inside Ajax.php you’ll want to make sure ALL of your content is inside the holder div #fancybox-content-holder (name it what you want, this is just for the example). For instance…

Ajax.php:

<div id="fancybox-content-holder">This is all my content.</div>

Please note that $.fn.fancybox.resize was tested but does not give the desired results. I hope this method helps you as much as it helped me. Please, if you have any thoughts on improvement or suggested other ways let me know as well. Thanks!
And lastly, make sure to put this inside Ajax.php. Don’t forget you need the jQuery resize event plugin.

	$('#fancybox-content-holder').bind('resize',function(){
		height = $('#fancybox-content-holder').height()+25;
		$('#fancybox-wrap').height(height);
	});

So this week I’ve been working on a pretty complex welcome video for a site that gets a decent amount of traffic (+100k visitors a month). We figured with all those visitors, there’s a good chance some of them are visiting on mobile devices. We checked the stats, and sure enough – we would need to provide content for them as well.

Since the iphone, ipod Touch and ipad, and possibly other mobile devices don’t allow flash, we decided to use Youtube for them… it’s non obtrusive and the videos will already be there as well… /shrug – why not? My favorite coding is done in php, so I was curious about the best way to detect a users browser server side, so we’re not sending extra code that may mess something up (things happen, ya know?) So here’s the approach I’ve adopted:
Read more

Update: This fixed my problem with Titanium not finding the iPhone SDK!

I ran into a bit of an issue last night. I needed to upgrade from iPhones OS SDK 3.0 to 3.1.3 (I hadn’t because I hadn’t had a need in the past 8 months). Well, upon trying to use Appcelerator I discovered that it requires the iPhone SDK to be >3.0… alright, head on over to apple but alas… there’s no way to download 3.1.3! Doesn’t it figure, I’m still running Leopard, and 3.2 is Snow Leopard ONLY. Pft. So, after much searching I finally managed to find a download link for the iPhone SDK 3.1.3.

Download iPhone SDK 3.1.3 and Xcode 3.1.4

It’s no big deal to vertically align images, but text often dances to the beat of it’s own drum. I’ve found myself using tables just to vertically align text to the middle of another element.

However, I just learned a nice method for achieving this (nothing new, just a great simplistic approach).

Set vertical-align: middle, just as you would with images – but you’ll also need to set the display to table-cell (which is what causes vertical alignment on tables, obviously).


div {
vertical-align: middle;
display: table-cell;
}

I haven’t tested to see how positions effect this, but that might play a role in whether this works or not. I’ll work up an example page sometime soon too.