jQuery quickies

Written on 8 May 2011, 11:13pm

Tagged with: ,

1. Get all the text input fields or textareas having IDs starting with a pattern

$('input, textarea').filter('[id^='+fieldID+']').each(function() 
{
	var field_value = this.value;
	var field_id = this.id;
	//do things here...
}

2. Add options to a select (in the example below – add the Google supported languages)

//Get the Languages array
	var languages = google.language.Languages;

	//populate the languages select
	$.each(languages, function(key, value)
		{   
		$('#my_select').
		append($("<option></option>").
		attr("value",value).
		text(key)); 
		}
	);

3.Get the selected radio value

var radio_value = $('input:radio[name=radioName]:checked').val();

4. A great modal windows jQuery Plugin

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development.

Example of using it:


/* Configure */
    <style>
	#simplemodal-container a.modalCloseImg 
	{
		background:url(./images/x.png) no-repeat; /* adjust url as required */
		width:25px;
		height:29px;
		display:inline;
		z-index:3200;
		position:absolute;
		top:-15px;
		right:-18px;
		cursor:pointer;
	}
	#simplemodal-container
	{
		border: 5px solid #d2d7e4 !important;
		padding: 5px !important;
	}
    </style>   

	<!--[if IE 6]>
        <style>
        #simplemodal-container a.modalCloseImg 
        {
            background: transparent none no-repeat top left;
            right:-14px;
            width:22px;
            height:26px;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
		  sizingMethod='scale', src='/full/path/to/images/x.png');
        }
        </style>
	<![endif]-->

    <!-- Modal window JS file -->
	<script src="./javascripts/jquery.simplemodal.js" type="text/javascript"></script>
/*open modal window*/
	$("#mydiv").modal({
		opacity:80,
		overlayCss: {backgroundColor:"#222"},
		containerCss:{
			backgroundColor:"#fff",
			borderColor:"#fff",
			height:400,
			padding:0,
			width:600
		},
		overlayClose:false,
		escClose:true
	});		 
/*close modal window*/
	$.modal.close();

Leave a response