Dev Tips | Become a Better Developer, One Tip at a Time. » jQuery

Awesome radio button grouping with jQuery

Barry Roodt — Sun, 20 Dec 2009 02:21:13 +0000

I was asked to do something rather interesting with some radio button inputs the other day. I haven't come across this particular problem before and google didn't return anything helpful, so I decided to share what I came up with.

Live Demo

First, the scenario

We have a standard form with 4 radio button groups. Each group has 4 radio buttons labeled from "1" to "4". Now, when the user selects "option 1" in "group 1", all the remaining "option 1" items need to be disabled. To see an example in action, you can view the demo here.

The problem

When I first started, I thought that it's simply a matter of giving each "option" (regardless of group) a common class name - then just disabling all other options with the same class name. That works, to a point, but what if the user changes his mind and selects another option ? Now I had to find all previously disabled options, re-enable them and start all over again.

The solution

Essentially what I came up with was a basic nested loop to handle setting and unsetting the relevant "disabled" attributes. To achieve this, first we assign all "option 1" a class of "number1", "option 2" a class of "number2" and so on.

Next, we run a basic for loop, and go through each "number" class (i.e. number1 to number4). For each class, we call a function. Inside this function is another loop - this time iterating over each radio button assigned the current class name. Using this loop, we remove any "disabled" attributes which may have been assigned previously.

We also find out which item in that group is currently selected (if any) - this is so we can run a second loop to disable all those options not currently selected. Confused ? Now might be a good time to go through the code.

The code

$(function(){
		// fire our code when a radio button has been selected
		$("input[type=radio]").change(function(){
			var name = $(this).attr("name"); // get the current button's group name
			$("input[name="+name+"]").removeAttr("selected"); // first we deselect "all" radio buttons within the same group
			$(this).attr("selected","selected"); // make sure our currently "changed" button is selected
			for(i=1;i<=4;i++){ // go through the 4 radio classes
				processRadio(".radio"+i);
			}
		});
		/**
			Loops through each item with same "class" name and disables/enables where appropriate
		**/
		function processRadio(myclass){
			var empty;
			var id = "";
			var buttons = $(myclass); // read all buttons with the specified class name into a jQuery object
			buttons.each(function(){ // loop through each item
				var me = $(this);
				var isSelected = me.attr("selected"); // bool value, based on whether the "selected" attribute is present or not
				me.removeAttr("disabled"); // clear the disabled attribute if present
				me.siblings("label").removeClass("disabled"); // same with the associated label element
				if (isSelected != empty && isSelected != ""){
					id = $(this).attr("id"); // set our tmp id var to our currently selected item
				}
			});
			// make sure we have an id, otherwise we'll get an error
			if (id != empty && id != ""){
				buttons.each(function(){ // loop through each radio button once again
					if ($(this).attr("id") != id){ // set the disabled attributes if id attribute doesn't match our tmp id var
						$(this).attr("disabled", "disabled").siblings("label").addClass("disabled");
					}
				});
			}
		}

	});

I've commented as best I could, which hopefully makes more sense than my rambling above. Once again, there is a working demo available for you to play with. Be sure to have a look at the markup as well, might clear up a few questions.

I strongly suspect that there's a more efficient method for achieving the same result - so if you have a better suggestion, tweak or link please let me know - I'd greatly appreciate it.

Live Demo

Editors Note - PHP Book Giveaway

I'll be announcing the winner for the PHP For Absolute Beginners book giveaway on monday, so now is your last second chance to get your comment in for a chance to win. See here for more details and to enter.

Link Nudge jQuery Plugin

Drew Douglass — Wed, 05 Aug 2009 21:06:02 +0000

I think it was David Walsh who first showed me the idea of link nudging using jQuery. You can see on the sidebar we also use this technique. I haven't seen a plugin made to do this yet (as it is really simple) so I figured this would be perfect for a quick jQuery plugin tutorial. You can download the plugin and/or view the demo below.

View Demo

jQuery Link Nudge Plugin (527) - 19.9 KB

Authors Note:This plugin has now been given the name of NudgeIt and has had a lot of new features added! Please see the two updates at the bottom of this page for more information.

The Plugin Javascript

Creating the plugin is simple and is as easy as creating any other jQuery plugin. I'll try to comment the source code some so you can get an idea of how it all works.

jQuery Link Nudge Plugin
Posted by DrewDouglass on August 5th, 2009
Plugin Source.

Usage

$(function(){
		$('ul li:even').linkNudge({
			elapseTime: 500
		}).css('list-style-type', 'circle');//Plugin allows for chaining, as seen with the css call.
	});

Documentation

To use the plugin, simply include the plugin and jQuery library on your page and make a call to the linkNudge function. You can include three optional parameters, as discussed below.

padding - Allows you to set how far the link should be nudged. Defaults to 20px.
elapseTime - The time, in milliseconds, over which the nudge should occur. Default to 300.
returnPadding - Optional padding to return to when the element is no longer being hovered. Defaults to 0.

Terms of Use

You can't sell it. Otherwise, use it how you would like in your projects, a credit to this page in the notes or documentation would be appreciated. Donations even more so.

View Demo

jQuery Link Nudge Plugin (527) - 19.9 KB

Feed Me

If you have used or enjoy this plugin, I urge you to consider making a small donation so I can buy some Chinese food.

Update:

David Walsh has modified the flexibility of the plugin in a new post on his blog. I encourage all of you to give it a look and download and see how they differ. You can find Davids plugin on his website. Thanks for adding on to and improving the plugin David!

Update Two!

David and I have decided to collaborate on this plugin and host it on a GitHub so everyone can easily keep track of any updates or changes. We are now also calling the plugin, quite appropriately, NudgeIt.

CSS Tip: How to Make Circles Without Images

Vasili — Mon, 04 May 2009 02:53:28 +0000

About a month ago, Jeffery Way posted an article about creating shapes with pure CSS, no images added. I've been using the CSS3 property of border radius a lot in a design I've been working on and thought, "why can't I use this to make circles?" Today, I'll show you how to make your very own CSS circles. In addition, we will use our new knowledge to create a simple jQuery plugin!

View Demo

Structure, structure, structure!

How are we suppose to make a circle without any HTML to style? Because this is just a simple shape, I'll be using an "empty" span tab — I've just put into it.






CSS Circle




&amp;nbsp;

I'll be using inline CSS because this is just a demo, but if this were for a project you'd probably want to put it in an external style sheet. I've also reset the margins and padding, then gave the body a one inch margin to push our circle away from the sides of the page.

Basic Styles

For now, I'll give the circle a background of #333 just so we can see it. You'll also want to give it the same height and width, this is the length of the diameter. The size doesn't really matter just make sure it's en even number.

.circle {
display: block;
width: 80px;
height: 80px;
background: #333;
}

Note: If you're using an inline element (like a span tag), you'll want to give the element a display of "block". If you don't know if your element is a block level element or not, just load the file in a web browser and if it's height and width look larger than 1px it is.

Circles Are Really Made With CSS3

What really gives this circle its arcs is CSS3's -moz-border-radius and -webkit-border-radius properties. What we're going to have to do is give the border radius a value of half the height/width; this is the radius of the circle. For my example, I've used 80px for the height and width so I'll set the border radius to 40px.

.circle {
display: block;
display: block;
width: 80px;
height: 80px;
background: #333;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

Conclusion

CSS3 is a very powerful tool to know how to use. Just make sure you don't base your entire website around it because not every browser supports it yet. However, if you can get the effect in certain browsers and still have you're design looking okay in other browsers, I think it's fine to use browser specific styles.

Create a jQuery Plugin For Our Circles

You can also take this a step further by making it into a jQuery plugin.

(function($){

	$.fn.jCircle = function(options) {
		var defaults = {
			size: 40
		},
			settings = $.extend({}, defaults, options);

		settings.size = parseInt(settings.size) || 40;
		settings.radius = (settings.size/2) + 'px';

		return this.each(function(){
			var $this = $(this);

			$this.css({
				display: 'block',
				width: settings.size + 'px',
				height: settings.size + 'px'
			});

			$this.css('-moz-border-radius', settings.radius);
			$this.css('-webkit-border-radius', settings.radius);
		});
	}

})(jQuery);

View Demo

Javascript Tip: Easy Fading Using jQuery

John Bloomfield — Thu, 30 Apr 2009 22:29:49 +0000

Whilst working on a project recently I came across a need for us to show a selection of images depending on their type and when a link to them is clicked. I decided to use jQuery as it saves a lot of time as most of the work is done for you. I will step through the code so you can see how I did it.

View Demo

As with any jQuery, we are required to use the following line to tell our jQuery code to run as soon as DOM is ready rather than when the page has finished loading.

$(document).ready(function(){

The next line detects any click from a link inside the div with an id of “links”

$('#links a').click(function(){

Once a link has been clicked any attribute from that link is accessible through $(this), so the next line sets up a new variable called “color” and takes the “rel” attribute from the tag and puts it into our new variable.

var color = $(this).attr('rel');

Once we know which colour link has been clicked we can then fade out all images that have a different colour and fade in the colour that has been clicked.

$('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3);
$('#tiles div.' + color + ' img').fadeTo("slow", 1);

To finish off we need to close our function brackets. You will notice there is a “return false;”. This is to stop the link actually activating the href attribute and basically overriding it so we can do our magic. This becomes useful when users don’t have Javascript activated in there browser, you can make the link work as normal. Unfortunately, you would need to create separate pages with different colours highlighted instead. (sigh!)

So, to sum up I have put all the code below and you will need to remember to include the latest jQuery Javascript file from www.jquery.com
All the HTML you can grab from the source of the demo page.

Final Code

$(document).ready(function(){
   $('#links a').click(function(){
      var color = $(this).attr('rel');
      $('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3);
      $('#tiles div.' + color + ' img').fadeTo("slow", 1);
   });
   return false;
});

Hopefully, this will be useful to someone. Have fun!

View the Demo

How to validate Date of Birth with jQuery

Barry Roodt — Tue, 10 Mar 2009 00:38:13 +0000

In a recent project I had to implement what's commonly referred to as a Legal Drinking Age (LDA) page. Basically what needs to happen is that the user has to enter their date of birth and thus 'confirm' that they are of a legal drinking age for their respective country. You can view an example of just such a page here.

This brought me to an interesting requirement - the user needs to enter their birth of date (in this case via 3 select boxes), their age then needs to be calculated from the entered date and they are either granted, or denied access based on the result.

Interestingly enough, after having a quick look around I hadn't been able to find any similar example, so I had to come up with something myself. The following code is my solution:

$("#lda-form").submit(function(){
var day = $("#day").val();
var month = $("#month").val();
var year = $("#year").val();
var age = 18;

var mydate = new Date();
mydate.setFullYear(year, month-1, day);

var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if ((currdate - mydate) < 0){
alert("Sorry, only persons over the age of " + age + " may enter this site");
return false;
}
return true;
});

First, we get the relevant entered date values - the "day", "month" and "year". I've also added an "age" var so that this can be easily edited if necessary - the current value is set to 18.

Next we create a Date object and call it "mydate". We then use the object's "setFullYear" method to set the value of "mydate" to the user's entered birth date. You can view more information about this method here. The only thing to notice here is that we have subtract 1 from the "month" value as it's 0 indexed.

Now that we have the user's birth date sorted, we then create another Date object and call it "currdate". The default value for "currdate" is the current date. We then set "currdate" to whatever the current date is minus our "age" value - i.e. Today - 18 years. Once again, we use the "setFullYear" method to set the date. However, to get the current date in a useable format, we use the "getFullYear" method and THEN subtract 18 from the resulting value. So to do this we use "currdate.getFullYear() - age".

Once we have the date of 18 years ago and the user's birth date, both in the same format, it's simply a matter of making sure that the required date minus the birth date isn't greater than 0. If so, we output an alert to inform the user then return "false" to make sure that the form doesn't get submitted.

Pretty straightforward.

jQuery Tip: Font Resizing With Animation Effects

Drew Douglass — Fri, 16 Jan 2009 21:04:27 +0000

Hey everyone. Sorry for not having a new tip published yesterday, I was feeling under the weather. Seeing how popular the original font resizing with jQuery article was, I thought it would be nice to spice up our original script with a little animation. This is extremely easy to do with jQuerys built in animation functions.

The Original Script

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

Achieving the Animation Effect

Instead of instantly resizing the text upon click, we want the text to re size over a specified amount of milliseconds. We can still use our original script but we will replace the last section from the css() method to the animate() method.

Our New Script

Here is our new script complete with animation effects.

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.animate({fontSize: finalNum + stringEnding},600);
		});
	});

Quite simple isn't it? Get creative and add your own touch or animations to your jQuery effects.

View the Demo

jQuery Tip : How to Select Radio/Checkbox Input On Click

Barry Roodt — Sun, 11 Jan 2009 01:43:35 +0000

I've been faced with the following scenario a few times during my web development career : First, you have an unordered list - within each list item you have a radio input. Secondly, when you click on the list item (i.e. the entire container), it must select the radio input and add a css classname of "selected" to the list item, thus highlighting the item that has been selected.
The following example will explain how to implement a workable solution. For a preview of what we will achieve, check out the demo.

The HTML :




	
    
    
    


	
		
			Test 1 
			Test 2 
			Test 3 
			Test 4 
			Test 5

There is nothing out of the ordinary here - just a simple unordered list of radio inputs.
There's a basic stylesheet to highlight "selected" items.

For those of you wondering why I'm including the jQuery library from the Google Code repository :

It saves on bandwidth, it'll load very quickly from Google's CDN.
It'll already be cached if the user has visited a site which also delivers it from Google Code.

Our Javascript/jQuery:

$(document).ready(function(){
	$('li').click( function(){
		$('li.selected').removeClass('selected');
		$(this).addClass('selected').children("input[@type=radio]").click();
	});
});

As you can see, the actual code involved is short and straightforward - just the way we like it.

First - we tell jQuery to execute the following code once the document has finished loading, ensuring that the DOM has been registered successfully.
Next we bind a click event to all list item elements on the page - you can of course change this to all list items with a class of "myselection" for example ( $("li.myselection").click... )
When a list item is clicked - we first need to remove the "selected" class from any previously "selected" list items.
Now we need to add the "selected" class to the list item which fired the event ( $(this) ).
Finally, we need to make sure that the radio button inside the list item is "clicked" : we do this by using the .children() selector and executing a click() event on the input.

The important bit is the .children("input[@type=radio]") selector. Known as an XPath selector. What we're doing here is telling jQuery to find all all radio inputs inside "this" list item. We then use .click() to..as you guessed it... execute a click event on the returned element (in this case the radio input).

And that's all there is to it. You can read up some more on jQuery selectors here.
I would also highly recommend reading the following article : Improve your jQuery - 25 excellent tips.

jQuery Tip: Animation and CSS Queuing

Drew Douglass — Sat, 10 Jan 2009 03:33:23 +0000

One of the great things about jQuery is its awesome and powerful animation abilities. Odds are at some point you have played around with the animate function. The question soon comes into play though, how do you queue one animation until the first one is completed? In addition, how do you queue the CSS until the animation is finished? We'll go over how to easily do this and present a quick demo.

Our Goal

Lets say we want to make a box that animates in a square motion, one animation at a time back to its starting position. When it is back to its position, it should show a hidden message and change its background color. If you want to see the effect we will go after, check out the demo.

Our HTML and CSS Structure





	
	
	
	
	jQuery Animation and CSS Queue
	
	



	jQuery Queue Animation and CSS Demo.
	
	MightyBoxHello World!

Queuing Animation

It is actually quite simple to queue one animation until the first has finished. Animation queuing effects are achieved in jQuery by chaining. Lets look at our script so far:

$(function(){
		$('#box span').hide();
		$('#start').click(function(){
			$('#box').animate({left:500}, 2000)
			.animate({top:150},700)
			.animate({left:0},1200)

You can see we have chained the three animations above. The box will slide right, then slide down, then slide back left. We still need the box to slide up, but we need to make sure the background colors change after the box has finished sliding back up.

CSS Queuing in jQuery

We can queue our css effects until the box has finished sliding back up by using a call back like so:

.animate({top:0},700, function(){
				$('#box span').show(1000, function(){
				$('#box').css('backgroundColor', '#333').css('color','#fff');
			   });
			});
		});
	});

Above, we fadeIn our hidden message and simultaneously change the background and color properties of our box. And that's all there is to it. Be sure to note that we originally hid the span inside our box with jQuery, which is why we can use the fadeIn effect on the element.

Full Script

Here is our full animation and css queue script:

$(function(){
		$('#box span').hide();
		$('#start').click(function(){
			$('#box').animate({left:500}, 2000)
			.animate({top:150},700)
			.animate({left:0},1200)
			.animate({top:0},700, function(){
				$('#box span').show(1000, function(){
				$('#box').css('backgroundColor', '#333').css('color','#fff');
			   });
			});
		});
	});

View the Demo

Be sure to check out the simple demo if your more comfortable exploring the source code.

jQuery Tip: Quick and Easy Font Resizing

Drew Douglass — Thu, 08 Jan 2009 03:02:42 +0000

One of the many great features of jQuery is how easy it is to edit the css via a user event, such as a click. We can use this to knowledge to edit any css property we wish. Recently, NETTUTS had a great article that went all out with a font resizing slider bar using the jQuery UI. While this article was certainly in-depth and well done, we want something quick and simple. Today we will create a simple script to allow the user to edit the current font size of an element.

Our Goal

Before starting any project, we need to know what we want to do. We want a simple and quick script to resize the text within a certain element 'on click'.

Basic HTML

First thing we need to do is setup our simple HTML page, we will use the code below for the demo.

jQuery Font Size Change | Dev-Tips

Text Resizing with jQuery Demo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Setup some variables

Now it's time to setup some variables to use later on in our script, I'll explain more after the code below.

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);

First we use some shorthand jQuery, which is the same as using document.ready(). Next we will setup some variable to use when the input buttons are clicked. The variable ourText will be our paragraph to re size. The variable currFontSize gets the current font size of the paragraph. The variable finalNum uses the parseFloat function to convert the string into a floating point number (with a base of 10). The variable stringEnding gets the pixels or em ending so we can add it back on later.

Conditional Statements

Next we need to decide what to do depending on the button the user is clicking on.

if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

The above should be pretty self-explanatory. If they clicked on the large button, we multiply the current font size by 1.2, and if they click on the small button the font size is divided by 1.2.

Full Script

Our final script looks like this:

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

And that's it, we now have a quick and simple font resizing script using jQuery. Don't forget to check out the demo below if you want to see it in action.

View the Demo

Update with animation!

Due to the popularity of this article, we have published another font resizing script, this time with animations on the resize. Be sure to check it out 'Font resizing with animation effects.'.

jQuery Tip: Resources for Creating Your Own Plugins

Drew Douglass — Tue, 06 Jan 2009 13:10:02 +0000

With jQuery easily becoming the quickest growing Javascript library on the market right now, it's no wonder the demand for quality tutorials is so high. One of jQuerys great features is the ability for anyone to quickly and easily create a plugin. Today, we will have a look at some extremely helpful resources to get you started with created your own jQuery plugins.

The Definite Guide to Creating a Practical Plugin

First up we have an excellent article by Dan Wellman over at NETTUTS. This article is extremely in depth and aimed towards those who are new to jQuery but have used it before.

Visit Article

Developing a jQuery plugin via Snook.ca

Anyone who knows me knows that I am stalking Jonathan Snook. OK, maybe not stalking but the guy is a web dev hero. In this article he takes us through the process of getting ready to create your plugin and putting the code into action.

Visit Article

Building Your First jQuery Plugin

In this plugin tutorial you learn how to create a plugin which truncates text, or in other words, allows you have a a drop down 'read more' effect.

Visit Article

A Plugin Development Pattern

Learning jQuery brings us an excellent article aimed more towards the development steps and patterns of developing a basic jQuery plugin.

Visit Article

Learn How to Create a jQuery Plugin

Again, NETTUTS delivers with a quality tutorial on every single step of creating your first jQuery plugin. Be sure to check out jQuery for absolute beginners, a 15 day series by Jeffrey Way on the ThemeForest blog for some excellent tuts.