Typically when you view a grid of content on a website it looks sort of like a checkerboard of images or perhaps the widths for some are smaller or larger. Well, with jQuery Masonry instead of having dynamic widths in your grid-layout you can display your content with dynamic heights.

There are many popular sites using this layout style including one of the latest crazed sites Pinterest. I tried checking their code to see if they were using the actual jQuery Masonry plug-in and could not find it, but they are using it (or something similar).

Another growingly popular site that makes use of jQuery Masonry is Yardsellr.com (I’m currently in love and having a lot of fun with this site).

Making use of the jQuery Masonry plug-in on your website is very simple. You’ll have to head on over to their demo pages and have a look: http://masonry.desandro.com/demos/basic-single-column.html. Perhaps, in the future I will do a screencast or another post explaining how to use this plug-in in-depth.

A few other great examples of sites that use this plug-in are:

• CutestPaw
• Chromeography
• Fab

And one more of one of my personal sites at:

iHeartFunny (http://www.iheartfunny.com)

Make sure if you ever have a content site and you want to display images or content in a beautiful fashion, you’ll head over to jQuery Masonry and make use of this excellent plug-in.

Shouldn’t finding a domain name be fun? Like coming up with a name for your new pet. This little fluffy guy will be called Sergeant Fuzzy Boots! (Big Bang Theory reference).

Anyway, luckily enough I have rounded up the top 5 domain name tools that will bring the fun back into naming your little project, here they are below, in no particular order:

1. impossiblity.org

With impossibility.org you can easily type in a word and then choose to have an adjective, verb, or noun before or after your word and the system will find those available domain names. You can choose to have a 4, 5, or 6 letter adjective, verb, or noun; so, you can be sure that your domain name is as short as possible. This is definitely a useful and fun tool for finding domain names. Finding the right domain with this tool is a definite possibility

2. Panabee.com

Panabee is also another amazing tool for helping you find the right domain for the right project. Using Panabee.com you can simply enter in a combination of words or any domain name you had your heart set on and the system will come up with similar and suggested names. Panabee uses some common tactics to come up with an available domain name by putting words like ‘get’ at the beginning or ‘pro’ at the end. This tool definitely makes shopping for the right domain an enjoyable experience.

3. DomainTyper.com

The thing that is great about DomainTyper, is that you can see which domains are available as you type. With every letter entered into the domain search box you will see the availability of that domain in real-time. There’s no need to hit ‘Search’ or ‘Check Availability’, because this tool will let you know just as fast as you can type. Another great thing about DomainTyper is their Domain Name Generator which happens in real-time as well. So when you are searching for a desired domain their ‘Domain Name Generator’ will create some similar or suggested domains. DomainTyper will let you know if the domain you’re thinking of is available even before you think it… Well not that fast, it can’t read your mind, but it’s kind of close.

4. DomainsBot.com

DomainsBot has all the great features as many of the previous tools. It is super quick to help you find the domain you are trying to find. DomainsBot creates a long list of domains for you to sift through, based off of your desired domain DomainsBot will display suggested or similar domain names. DomainsBot will also show you some premium domains that you can purchase for a price, usually it’s not too expensive it just depends on the quality of the domain and how much you’re willing to pay for it. Be sure to keep DomainsBot in your list of domain tools to cover when you are searching for that perfect domain.

5. Domize.com

Domize is great for quickly showing you which domains are available. Similar to ‘DomainTyper’, Domize.com lets you know if the domain is available just as fast as you can type. One great thing about Domize is that it will save all of the ‘.com’ names that are available so you can go back and look at all the available ‘.com’ domains you entered. Domize is great for popping in and quickly checking the availability of any domain.

There you have it!

The greatest round-up to help you find the Domain Name you’ve always wanted.

Hope this helps you find the perfect domain for your future project!

Finding out when the radio box has been changed with jQuery is very easy, say you have a form inside your html that looks like this:

<form id="my_radio_box">
    <input type="radio" name="my_options" value="option 1" /> Option 1
    <input type="radio" name="my_options" value="option 2" /> Option 2
    <input type="radio" name="my_options" value="option 3" /> Option 3
</form>

Now, to detect when that radio box is changed, you can easily call the jQuery ‘change’ event inside your jQuery document ready function:

    $(document).ready(function(){
        $('#my_radio_box').change(function(){
            alert('Radio Box has been changed!');
        });
    });

In the above example when the radio box has been changed an alert is displayed. Now, in order to get the value of the currently selected radio box we can simply save the value in a variable:

    selected_value = $("input[name='my_options']:checked").val();

And, of course this has to be called inside of the jQuery ‘change’ function. Quick note: you’ll need to make sure to include the jQuery library somewhere above this code. So far the whole javascript functionality should look as follows:

    $(document).ready(function(){
        $('#my_radio_box').change(function(){
            selected_value = $("input[name='my_options']:checked").val();
        });
    });

There you go the selected value is stored inside of the ‘selected_value’ variable, you can feel free to do whatever you’d like from here. As an example, I’m going to alert the value to the screen.

Checkout The Simple Demo Here

And the following is the code for the example above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
 
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
			<script type="text/javascript">
 
				$(document).ready(function(){
 
					$('#my_radio_box').change(function(){
						selected_value = $("input[name='my_options']:checked").val();
			            alert(selected_value);
			        });
 
				});
 
			</script>
	</head>
	<body>
 
		<h2>Detecting a Radio Box Change and getting the Value in jQuery:</h2>	
		<form id="my_radio_box">
		    <input type="radio" name="my_options" value="option 1" checked="checked" /> Option 1
		    <input type="radio" name="my_options" value="option 2" /> Option 2
		    <input type="radio" name="my_options" value="option 3" /> Option 3
		</form>
 
	</body>
</html>

As an example, here is what your parent page might look like

<html>
<head>
<script type="text/javascript">
    function alert_me(string)
    {
          alert(string);
    }
</script>
</head>
<body>
    <iframe src="my_iframe.html"></iframe>
</body>
</html>

Now, inside of your iframe html, you could simply do the following to call the parent function within your iframe (my_iframe.html):

    <script type="text/javascript">
        parent.alert_me('hello there!');
    </script>

Now, when the iframe is called it will call the parent function ‘alert_me’, additionally you can feel free to have the parent function called during an event, like a button click or even a key press. Anyway, it’s very simple, hope someone can find this useful

Apparently Vimeo’s new look has been around for well over a month now; however, I didn’t find out about the change until just this morning. I guess that means I need to log-in to my Vimeo account more often. Anyways, this is the first big re-model of the popular Vimeo interface. I’ve noticed they have implemented infinite scroll on their video pages which is pretty nice. So far it looks very straight forward and clean, but I’ll have to do a little more snooping around before I make a final judgement of their new look.

Check out the official New Vimeo Look video below:

And if you haven’t seen it yet, head on over to Vimeo, log-in and take a look

The Loading functionality is supposed to be passed as a separate array. So, instead of passing this code through the infinite scroll plug-in :

loadingImg   : "/img/loading.gif",          
                 // loading image.
                 // default: "http://www.infinite-scroll.com/loading.gif"
 
loadingText  : "Loading new posts...",      
                 // text accompanying loading image
                 // default: "<em>Loading the next set of posts...</em>"

You’ll want to add the following instead:

loading: {
    img: "/img/loading.gif",
    msgText: "Loading new posts..."
},

And now, your custom image and message text will be displayed

You can checkout the original Github post issue here: https://github.com/paulirish/infinite-scroll/issues/72#issuecomment-1676802

1. http://www.yardsellr.com

At Yardsellr you can easily buy and trade random crap that you would typically find at a Yardsale. Log-in with Facebook to buy, sell, and share items to other users.

2. http://www.gtrot.com

At Gtrot you will find out the greatest places, events, and deals in your destination. Log-in with your Facebook account to get recommendations and save your favorite places and events.

3. http://www.muzy.com

At Muzy you can easily log-in with your Facebook account and create a simple photo collage of all your photos to share with friends and family.

Check out the demo here.

Below is the simple code that I used to create this simple animation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Mario Sprite Animation Scroll</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<style type="text/css">
			#mario{
				background:url('mario-walk.gif') no-repeat;
				width:50px;
				height:68px;
				position:fixed;
				left:0;
				background-position:0px 0px;
			}
 
			#mario2{
				background:url('mario-walk.gif') no-repeat;
				width:50px;
				height:68px;
				position:fixed;
				left:0;
				background-position:0px 0px;
			}
 
			.instructions
			{
				font-family:'Helvetica Neue', Helvetica, Arial;
				font-size:14px;
				color:#343434;
			}
 
		</style>
 
		<script type="text/javascript">
			$('document').ready(function(){
				$('#mario').css('top', ($(window).height()/2)-($('#mario').height()/2));
 
				$('html').keydown(function(){
					$('#mario').css('top', ($(window).height()/2)-($('#mario').height()/2));
					$('#mario').css('left', parseInt($('#mario').css('left'))+10);
 
					if($('#mario').css('background-position') == '0px 0px'){
						$('#mario').css('background-position', '-50px 0px');
					} else {
						$('#mario').css('background-position', '0px 0px');
					}
 
					if(parseInt($('#mario').css('left')) > $(window).width())
					{
						$('#mario').css('left', -parseInt($('#mario').width()));
					}
 
 
				});
 
 
			});
 
 
 
 
		</script>
 
	</head>
	<body>
 
 
		<p class="instructions" readonly="readonly">Hold any key down to animate mario...</p>
		<div id="mario"></div>
 
	</body>
</html>

You can download the files from here.

Take a look at the simple demo here:

http://www.tonylea.com/go/examples/easy-facebook-authentication/

You can checkout the repository here:

https://github.com/tnylea/easy-facebook-authentication

There are two main files and they are very self explanatory. ‘index.php’ contains a link to the Facebook OAuth url with the current APP ID, then ‘output.php’ takes the access_token of the authenticated user and outputs a JSON array. Then you can feel free to use the data as you wish

Messages:

The iOS version 4.0 brought us iMessages, now just being called ‘Messages’. You will be able to send Messages and receive messages from all Mac OS devices. Yup, send messages from your iPhone, iPad, and now your Mac.

Notification Center:

View your latest messages, reminders, and alerts from the integrated notification center on your Mac.

Reminders:

The new reminders app on the latest OS will integrate with your mobile reminders. So, setup your reminders and notifications to receive them across all your devices.

Notes:

Now, you can get your notes on your Mac desktop and always have them available. With the new version of Notes on your Mac Desktop, you’ll easily be able to jot down notes and even drag and drop images onto your notepad.

Game Center:

The Game Center that we all know and love will now be available on the latest operating system. So, now you can get your game on and view all your friends scores on your Mac.

Air Display:

With the all new air display you will easily be able to mirror your desktop screen to your TV through your Apple TV device!

The new features in this latest version is a glimpse of what we will definitely see in the future. Heavy integration across all Mac OS devices. This is definitely very exciting

You can check out the Mountain Lion video below. Additionally be sure to checkout the Apple Mountain Lion official page for more info on this exciting new release.