Bagesh Singh's Blog » jquery http://www.bageshsingh.com/bagesh-blog Shortest Distance to Web Solutions & Software Solutions Wed, 22 Feb 2012 18:42:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Get and Set Form Element Values using jQuery http://www.bageshsingh.com/bagesh-blog/2011/02/get-and-set-form-element-values-using-jquery/ http://www.bageshsingh.com/bagesh-blog/2011/02/get-and-set-form-element-values-using-jquery/#comments Thu, 03 Feb 2011 08:21:38 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1064 One of the most frequently asked questions about jQuery is to Get or Set values of HTML Form elements. The jQuery val() method lets you get and set values of form elements.

Note: jQuery uses the val() method to both get and set values of form elements. If you pass a new value to the val() method, it sets the value for that element. If you do not pass a value to the val() method, it returns the current value of that element. Let us see some examples:

Assuming you have a HTML page with the following form elements

<body>
    TextBox <br />
    <input id="txtBox" type="text" />
    <br /><br />
    Radio Button <br />
    <input type="radio"  name="rad" value="RadioOne"/> RadioOne
    <input type="radio"  name="rad" value="RadioTwo"/> RadioTwo
    <br /><br />
    Check Box <br />
    <input type=checkbox value="DotNetCurry">www.dotnetcurry.com<br />
    <input type=checkbox value="DevCurry">www.devcurry.com<br />
    <input type=checkbox value="SqlServerCurry">www.sqlservercurry.com
    <br /><br />
    Select Box <br />
    <select id="selectbox">
        <option>SelectOne</option>
        <option>SelectTwo</option>
        <option>SelectThree</option>
    </select>
    <br /><br /><br />
    <input id="btnSet" type="button" value="Set Values" />
    <input id="btnGet" type="button" value="Get Values"
        disabled="disabled" />

    <p id="para"></p>
</body>

As you can see, we have a page with a TextBox, RadioButton, CheckBox and a Select/DropDown. We also have two buttons to Set and Get the values of these form elements.

Set Form Values using jQuery

Use the following code to set form values using jQuery

$("#btnSet").click(function () {
    $("#txtBox").val("Some text for TextBox");
    $("input:radio").val(["RadioTwo"]);
    $("input:checkbox").val(["DotNetCurry", "DevCurry"]);
    $("#selectbox").val("SelectTwo");
    $("#btnGet").removeAttr('disabled');
});

The code is self explanatory. We have used the val() method to set values of the TextBox, RadioButton, CheckBox and Select respectively. Observe that we have checked two out of three checkboxes.

Get Form Values using jQuery

Use the following code to get form values using jQuery

$("#btnGet").click(function () {
    // first get the multiple selected checkbox items
    var chk = [];
    $("input:checkbox:checked").each(function() {
        chk.push($(this).val());
    });

    $("#para").html(
        $("#txtBox").val() + "<br/>" +
        $("input:radio[name=rad]:checked").val() + "<br/>" +
        chk.join(",") + "<br/>" +
        $("#selectbox").val()
        );
});

As you can see, we have used the val() method to get values from the TextBox, RadioButton, CheckBox and Select/DropDown respectively. The values are printed in a paragraph(para).

Note: In case of the CheckBox, since there are multiple checked checkboxes, we are looping through all checkboxes, pushing the value into an array(chk) and then using the join method of the array, to have a separated string of values.

Stage 1: When the page loads

Stage 2: When the ‘Set Values’ button is clicked

Stage 3: When the ‘Get Values’ button is clicked

]]> http://www.bageshsingh.com/bagesh-blog/2011/02/get-and-set-form-element-values-using-jquery/feed/ 0 jQuery UI 1.8.9 Released http://www.bageshsingh.com/bagesh-blog/2011/02/jquery-ui-1-8-9-released/ http://www.bageshsingh.com/bagesh-blog/2011/02/jquery-ui-1-8-9-released/#comments Thu, 03 Feb 2011 08:20:28 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1062 If you are using the jQuery UI library in your applications, then an important update is that the jQuery UI team has shipped a maintenance release – jQuery UI 1.8.9

The fixes are mainly for the Accordion, Datepicker and Tabs control and for the Draggable and Sortable interactions. The DatePicket widget now has support for the Algerian Arabic, Australian and New Zealand localizations.

See the 1.8.9 Upgrade Guide for a list of changes that may affect you when upgrading from 1.8.8. For full details on what’s included in this release see the 1.8.9 Changelog.

]]> http://www.bageshsingh.com/bagesh-blog/2011/02/jquery-ui-1-8-9-released/feed/ 0 Quick & Easy Way to Implement Drag n Share With jQuery http://www.bageshsingh.com/bagesh-blog/2010/11/quick-easy-way-to-implement-drag-n-share-with-jquery/ http://www.bageshsingh.com/bagesh-blog/2010/11/quick-easy-way-to-implement-drag-n-share-with-jquery/#comments Tue, 30 Nov 2010 17:27:34 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=937 You must have seen the drag to share functionality on Mashable that lets visitors share the content on popular social networks intuitively. Just drag one of the images in an article and you’ll be able to share the article on your favorite social network by dropping the dragged image over its icon.
Even, Nettuts has written a nice tutorial on how to implement this functionality into your website using jQuery. But here is a much elegant solution to achieve the drag n share effect using jQuery with just a line or two of JavaScript code.

Get the prettySociable Plugin
To implement this functionality, you will need the prettySociable jQuery plugin written by Stéphane Caron. Download and extract the plugin, it contains everything you need to get up and running with drag n share.
Include the Required Files
To add drag n share to a page, add reference to jquery and prettySociable in your page’s headtag. The plugin folder also includes images and css folders in addition to js folder. You’ll need them too as css folder contains styles necessary for drag n share elements and images folder contains icons for various social networks.
Here’s the complete code you need to add into the head tag.


 
Define Draggable Links Now to add drag n share to your web page, add an anchor tag with another attribute rel=”prettySociable”. Initialize prettySociable After you have added the rel attribute, you need to initialize the script. Add this single line of code, just above the
Check out your page in browser and you should get drag to share functionality working nicely.
Customizing the Default Settings
Customizing the Shared Information

When you add rel=”prettySociable” on an anchor tag with its href=”#”, this will share the URL of the current web page and use the title and meta description in head tag to display the tooltip on drag.
But if you need to share a different URL instead of the current web page, specify a URL in thehref attribute. Also you can customize the tooltip information which is shown on dragging. You can specify custom title and description in the rel attribute in this way.rel=”prettySociable;title:custom title;excerpt:custom excerpt;”
jQuery Recipes: A Problem-Solution Approach (Expert’s Voice in Web Development)
Customizing the Sharing Panel

By default prettySociable supports eight social networks but you can customize the social networks and their icons to your requirement. For that you’ll need to pass a settings object toprettySociable function.
Here’s the complete settings object
$.prettySociable({
animationSpeed: ‘fast’, /* fast/slow/normal */
opacity: 0.90, /* Value between 0 and 1 */
share_label: ‘Drag to share’, /* Text displayed when a user rollover an item */
share_on_label: ‘Share on ‘, /* Text displayed when a user rollover a website to share */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */
hover_padding: 0,
websites: {
facebook : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Facebook’,
‘url’: ‘http://www.facebook.com/share.php?u=’,
‘icon’:'images/prettySociable/large_icons/facebook.png’,
‘sizes’:{‘width’:70,’height’:70}
},
twitter : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Twitter’,
‘url’: ‘http://twitter.com/home?status=’,
‘icon’:'images/prettySociable/large_icons/twitter.png’,
‘sizes’:{‘width’:70,’height’:70}
},
delicious : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Delicious’,
‘url’: ‘http://del.icio.us/post?url=’,
‘icon’:'images/prettySociable/large_icons/delicious.png’,
‘sizes’:{‘width’:70,’height’:70}
},
digg : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Digg’,
‘url’: ‘http://digg.com/submit?phase=2&url=’,
‘icon’:'images/prettySociable/large_icons/digg.png’,
‘sizes’:{‘width’:70,’height’:70}
}
//add more social networks here
},
tooltip: {
offsetTop:0,
offsetLeft: 10
},
popup: {
width: 900,
height: 500
},
callback: function(){} /* Called when prettySociable is closed */
});
The settings object is self explaining. You can specify which websites to use and also the icons to use for each website in the websites parameter.
Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques
You can enhance this drag n share script even further by using a shortened URL in the anchor tag’s href attribute.

]]> http://www.bageshsingh.com/bagesh-blog/2010/11/quick-easy-way-to-implement-drag-n-share-with-jquery/feed/ 0 Create a Twitter AJAX Button with MooTools, jQuery, or Dojo http://www.bageshsingh.com/bagesh-blog/2010/11/create-a-twitter-ajax-button-with-mootools-jquery-or-dojo/ http://www.bageshsingh.com/bagesh-blog/2010/11/create-a-twitter-ajax-button-with-mootools-jquery-or-dojo/#comments Tue, 30 Nov 2010 17:22:42 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=930 There’s nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn’t take long for that effort to be rewarded with above-average user retention and buzz.

One of the widgets I love is Twitter’s “Follow” button.  Let me show you how you can implement this functionality with three popular JavaScript toolkits:  MooTools, jQuery, and Dojo.
Note:  This tutorial will only display the client side handling of the form submission — NOT any PHP/MySQL/server-side handling of the request.

The HTML Structure

<form method=”post” action=”twitter-follow.php”>
<input type=”hidden” name=”followID” value=”123456″>
<button type=”submit” value=”Actions” title=”123456″>
<i></i><span>follow</span>
</button>
</form>
The HTML for the button is very simple.  The structure revolves around a BUTTON element which contains an I element and SPAN element.  You’re probably thinking “An I element?  WTF.”  I know I did.  The truth of the matter is that the I element is deprecated and, as far as I’m concerned, and be used for any purpose the developer would like.  I’m also sure that Twitter doesn’t mind saving bytes here or there

The CSS Styles

/* twitter button and its children */
button.btn {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background-attachment:scroll;
background-color:#ddd;
background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
background-position:0 0;
background-repeat:repeat-x;
border:1px solid #ddd;
border-bottom:1px solid #ccc;
color:#333;
cursor:pointer;
font-family:”Lucida Grande”,sans-serif;
font-size:11px;
line-height:14px;
padding:4px 8px 5px 8px;
text-shadow:1px 1px 0 #fff;
vertical-align:top;
}
button.btn:hover {
border:1px solid #999;
border-bottom-color:#888;
color:#000;
background-color:#d5d5d5;
background-position:0 -6px;
}
button.btn:active {
background-image:none !important;
text-shadow:none !important;
}
button.btn i {
background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
background-position:-176px -32px;
background-repeat:no-repeat;
display:inline-block;
height:13px;
margin-right:5px;
width:15px;
}
button.btn i.active { background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }
/* properties for the element that is generated *after* following */
span.following {  background:#ffd; padding:5px 10px; }
span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url(“http://s.twimg.com/a/1282150308/images/sprite-icons.png”) -160px -16px no-repeat; }
Most of the styling for this button goes onto the BUTTON element itself.  You’ll notice directives to round the button;  leaving the button sharp also please the eye.  Through the regular, hover, and active button states, check out how Twitter users the background position and colors to nicely modify the button without the need for additional images.  You’ll also notice Twitter uses sprites…as should you.

The MooTools JavaScript

/* with mootools */
window.addEvent(‘domready’,function() {
/* fetch elements */
$$(‘form.follow-form’).each(function(form) {
/* stop form event */
form.addEvent(‘submit’,function(e) {
/* stop event */
if(e) e.stop();
/* send ajax request */
var i = form.getElement(‘i’);
new Request({
url: ‘twitter-follow.php’,
method: ‘post’,
data: {
followID: form.getElement(‘input’).value
},
onRequest: function() {
i.addClass(‘active’);
},
onSuccess: function() {
var button = form.getElement(‘button’);
button.setStyle(‘display’,'none’);
new Element(‘span’,{
html: ‘<span></span>Following!’,
‘class’: ‘following’
}).inject(button,’after’);
},
onComplete: function() {
i.removeClass(‘active’);
}
}).send();
});
});
});
The first step is grabbing all of the FORM elements with the follow-form CSS class.  Upon form submission, the default submission action is stopped.  An AJAX request is fired, using the INPUT element’s ID as the user to follow.  When the request is fired, the I element’s background image is set to the spinner.  When the request is complete, the button is hidden and a new SPAN element is displayed informing the user that they are now following the given user!

The jQuery JavaScript

// Idiomatic jQuery by Doug Neiner
jQuery(function ($) {
/* fetch elements and stop form event */
$(“form.follow-form”).submit(function (e) {
/* stop event */
e.preventDefault();
/* “on request” */
$(this).find(‘i’).addClass(‘active’);
/* send ajax request */
$.post(‘twitter-follow.php’, {
followID: $(this).find(‘input’).val()
}, function () {
/* find and hide button, create element */
$(e.currentTarget)
.find(‘button’).hide()
.after(‘<span><span></span>Following!</span>’);
});
});
});
The code above is based off of the MooTools code.  The workflow is exactly the same.

The Dojo JavaScript

/* when the DOM is ready */
dojo.ready(function() {
/* fetch elements */
dojo.query(‘form.follow-form’).forEach(function(form) {
/* stop form event */
dojo.connect(form,’onsubmit’,function(e) {
/* stop event */
dojo.stopEvent(e);
/* active class */
dojo.query(‘i’,form).addClass(‘active’);
/* get button */
var button = dojo.query(‘button’,form)[0];
/* ajax request */
dojo.xhrPost({
form: form,
load: function() {
dojo.style(button,’display’,'none’);
dojo.create(‘span’,{
innerHTML: ‘<span></span>Following’,
className: ‘following’
},button,’after’);
}
});
});
});
});
The code above is based off of the MooTools code.  The workflow is exactly the same.
This “Follow” button is only one of many details that Twitter has paid attention to, just to make the user experience on the site better.  Take note from the effort put forth by large websites — adding these types of details to your smaller websites can make the user experience much better for YOUR users!
]]> http://www.bageshsingh.com/bagesh-blog/2010/11/create-a-twitter-ajax-button-with-mootools-jquery-or-dojo/feed/ 0 Load JSON data with jQuery, PHP and MySQL http://www.bageshsingh.com/bagesh-blog/2010/11/load-json-data-with-jquery-php-and-mysql/ http://www.bageshsingh.com/bagesh-blog/2010/11/load-json-data-with-jquery-php-and-mysql/#comments Tue, 30 Nov 2010 17:20:32 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=927 This post shows how to populate a select box based on the value of the another, by getting JSON data with jQuery from a PHP script that gets the data from a MySQL database.

HTML Code
The initial HTML code looks like this:

Fruit:

Variety:

The set of fruit names was already populated on the server-side and the default set of varieties could be too; I have chosen to populate them with Javascript in this example.
jQuery Code
The jQuery code needs to initially populate the variety drop down based on the value of the fruit drop down. It then needs to update the variety if the fruit drop down changes.
Assuming the PHP script to fetch the fruit is at /fruit-varieties.php do this:

function populateFruitVariety() {
$.getJSON(‘/fruit-varities.php’, {fruitName:$(‘#fruitName’).val()}, function(data) {
var select = $(‘#fruitVariety’);
var options = select.attr(‘options’);
options[options.length] =
$(‘option’, select).remove();

$.each(data, function(index, array) {

new Option(array['variety']);
});

populat
});

}

$(document).ready(function() {

eFruitVariety();
$(‘#fruitName’).change(function() {
populateFruitVariety();
});

});

The “$.getJSON(‘/fruit-varities.php’, {fruitName:$(‘#fruitName’).val()}” line is what retrieves the data and it passes the currently selected fruit name value as part of the get string to the PHP script.
PHP Code
The PHP script connects to the database, retrieves the data for the selected fruit name and then returns it as a JSON encoded string.

$dsn = “mysql:host=localhost;dbname=[DATABASE NAME HERE]“;
$username = “[USERNAME HERE]“;
$pdo = new PDO($dsn, $usernam
$password = “[PASSWORD HERE]“;
e, $password);

{ $stmt = $p
$rows = array();
if(isset($_GET['fruitName']))
do->prepare(“SELECT variety FROM fruit WHERE name = ? ORDER BY variety”);
$stmt->execute(array($_GET['fruitName']));
} echo json_encode($rows);
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

Caching issues
Internet Explorer and Firefox will cache the subsequent requests made to the same fruit name but the other browsers won’t, requesting them again each time.
Further reading
I haven’t written much in the way of comments for each of the above code snippets; they’ve all been covered to some degree in previous posts which led up to this one. Please refer to these in the “Related Posts” list below.

]]> http://www.bageshsingh.com/bagesh-blog/2010/11/load-json-data-with-jquery-php-and-mysql/feed/ 0 jQuery UI DatePicker: Disable Specified Days http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-ui-datepicker-disable-specified-days/ http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-ui-datepicker-disable-specified-days/#comments Tue, 30 Nov 2010 17:18:49 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=925 One project I’m currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI’s DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the need to prevent specific days from being picked. Here’s the jQuery JavaScript I used to accomplish that.


The jQuery JavaScript

/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log(‘Checking (raw): ‘ + m + ‘-’ + d + ‘-’ + y);
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + ‘-’ + d + ‘-’ + y,disabledDays) != -1 || new Date() > date) {
//console.log(‘bad:  ’ + (m+1) + ‘-’ + d + ‘-’ + y + ‘ / ‘ + disabledDays[i]);
return [false];
}
}
//console.log(‘good:  ’ + (m+1) + ‘-’ + d + ‘-’ + y);
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
/* create datepicker */
jQuery(document).ready(function() {
jQuery(‘#date’).datepicker({
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 5, 31),
dateFormat: ‘DD, MM, d, yy’,
constrainInput: true,
beforeShowDay: noWeekendsOrHolidays
});
});
The base code is taken from this forum post. You’ll note that I created an array of dates in string format which also accommodates for comparing year.
I’d like to see jQuery UI implement a standard way of disabling days. Their DatePicker is very nice though so I can’t complain too much!
]]> http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-ui-datepicker-disable-specified-days/feed/ 0 Color Palette Generator Using jQueryAs I continue to learn jQuery, I think it’s important that I begin by porting over scripts I’ve created using MooTools. One of those scripts is my Color Palette Generator script, which debuted on Eric Wendelin’s blog. For those of you that missed it, my script analyzes all of the colors on the page (minus images) and builds a palette of colors. Here it is in some jQuery goodness. The XHTML All we need to begin with is the button that triggers the palette generation and a DIV container that will hold all of the DIVs my jQuery creates. The CSS .dcolor { height:40px; } .dtext { } .dwrapper { width:200px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; } These CSS classes act as containers for the text DIV I generate and the color-displaying DIV I generate. Those two DIVs are held in one wrapping DIV. The jQuery JavaScript /* when the dom is ready */ $(document).ready(function() { $(‘#get-colors’).click(function() { //my colors array var colors = new Array(); //get all elements $(‘*’).each(function() { if($(this).css(‘background-color’) && $(this).css(‘background-color’) != ‘transparent’) { colors.push($(this).css(‘background-color’)); } if($(this).css(‘color’)) { colors.push($(this).css(‘color’)); } if($(this).css(‘border-color’)) { colors.push($(this).css(‘border-color’)); } }); //remove dupes and sort colors.sort(); //create a color block for all of them jQuery.each(colors,function(it,value) { if(!$(‘div[rel=\'' + value + '\']‘).length) { //inject the wrapper var wrapper_id = ‘w’ + it; $(‘ ‘).appendTo(‘#colors-wrapper’); //inject the color div $(‘ ‘).appendTo(‘#’ + wrapper_id); //inject text div $(‘‘ + value + ‘‘).appendTo(‘#’ + wrapper_id); } }); }); }); When someone clicks the “Get Colors” button, I grab every element in the DOM and collect its color, background-color, and border-color. Once I’ve cycled through all of the elements, cycle through all of the colors and display them as DIVs inside my colors-wrapper element. You’ll note that I utilized therel attribute to prevent duplicates. http://www.bageshsingh.com/bagesh-blog/2010/11/color-palette-generator-using-jqueryas-i-continue-to-learn-jquery-i-think-its-important-that-i-begin-by-porting-over-scripts-ive-created-using-mootools-one-of-those-scripts-is-my-color-palette-g/ http://www.bageshsingh.com/bagesh-blog/2010/11/color-palette-generator-using-jqueryas-i-continue-to-learn-jquery-i-think-its-important-that-i-begin-by-porting-over-scripts-ive-created-using-mootools-one-of-those-scripts-is-my-color-palette-g/#comments Tue, 30 Nov 2010 17:17:51 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=923 As I continue to learn jQuery, I think it’s important that I begin by porting over scripts I’ve created using MooTools. One of those scripts is my Color Palette Generator script, which debuted on bagesh singh’s blog. For those of you that missed it, my script analyzes all of the colors on the page (minus images) and builds a palette of colors. Here it is in some jQuery goodness.

The XHTML

<input type=”button” id=”get-colors” value=”Get Colors” />
<div id=”colors-wrapper”></div>
All we need to begin with is the button that triggers the palette generation and a DIV container that will hold all of the DIVs my jQuery creates.

The CSS

.dcolor { height:40px; }
.dtext {  }
.dwrapper { width:200px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; }
These CSS classes act as containers for the text DIV I generate and the color-displaying DIV I generate. Those two DIVs are held in one wrapping DIV.

The jQuery JavaScript

/* when the dom is ready */
$(document).ready(function() {
$(‘#get-colors’).click(function() {
//my colors array
var colors = new Array();
//get all elements
$(‘*’).each(function() {
if($(this).css(‘background-color’) && $(this).css(‘background-color’) != ‘transparent’) { colors.push($(this).css(‘background-color’)); }
if($(this).css(‘color’)) { colors.push($(this).css(‘color’)); }
if($(this).css(‘border-color’)) { colors.push($(this).css(‘border-color’)); }
});
//remove dupes and sort
colors.sort();
//create a color block for all of them
jQuery.each(colors,function(it,value) {
if(!$(‘div[rel=\'' + value + '\']‘).length)
{
//inject the wrapper
var wrapper_id = ‘w’ + it;
$(‘<div id=”‘ + wrapper_id + ‘” rel=”‘ + value + ‘”> </div>’).appendTo(‘#colors-wrapper’);
//inject the color div
$(‘<div style=”background-color:’ + value + ‘”> </div>’).appendTo(‘#’ + wrapper_id);
//inject text div
$(‘<div>’ + value + ‘</div>’).appendTo(‘#’ + wrapper_id);
}
});
});
});
When someone clicks the “Get Colors” button, I grab every element in the DOM and collect its color, background-color, and border-color. Once I’ve cycled through all of the elements, cycle through all of the colors and display them as DIVs inside my colors-wrapper element. You’ll note that I utilized therel attribute to prevent duplicates.
]]> http://www.bageshsingh.com/bagesh-blog/2010/11/color-palette-generator-using-jqueryas-i-continue-to-learn-jquery-i-think-its-important-that-i-begin-by-porting-over-scripts-ive-created-using-mootools-one-of-those-scripts-is-my-color-palette-g/feed/ 0 Ajax login validation system in PHP using jQuery http://www.bageshsingh.com/bagesh-blog/2010/11/ajax-login-validation-php-jquery/ http://www.bageshsingh.com/bagesh-blog/2010/11/ajax-login-validation-php-jquery/#comments Fri, 19 Nov 2010 14:59:59 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=865 Last time, I’ve showed you how to check user availability in Ajax using jQuery’s fading effect. But I’ve just shown the example without connecting the database and some people have faced problem with database connecting solution of that problem.In this post, I’ll show you how to use Ajax login system in php using jQuery and some animation as well.

In this example, first of all we’ll validate the user login detail from ajax showing the messages with some animation. If authenticated, the user will be redirected to the secure page “secure.php”. If you’ll try to directly access “secure.php”, you can’t do that.

Now let’s look at the code how to do this,

HTML Code

< form method="post" action="" id="login_form" />
  < input name="username" type="text" id="username" value="" maxlength="20" />
  < input name="password" type="password" id="password" value="" maxlength="20" />
  < input name="Submit" type="submit" id="submit" value="Login" />
< /form >

As you can see in html code, we’ve created the form with id “login_form”.

And furthermore, the CSS code is same as the one available in the pervious post of checking user availability in ajax and php.

JavaScript Code for Ajax Login validation system in PHP

First of all we need to use the jQuery library in our code,

< script src="jquery.js" type="text/javascript" language="javascript"></script >

Now let’s look at the code in javaScript to call ajax and show the animated message with fading effects.

$("#login_form").submit(function()
{
	//remove all the class add the messagebox classes and start fading
	$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
	//check the username exists or not from ajax
	$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {
	  if(data=='yes') //if correct login detail
	  {
		$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
		{
 		  //add message and change the class of the box and start fading
		  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
                  function()
		  {
  	  	     //redirect to secure page
		     document.location='secure.php';
		  });
		});
	  }
	  else
	  {
	  	$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
		{
		  //add message and change the class of the box and start fading
		  $(this).html('Your login detail sucks...').addClass('messageboxerror').fadeTo(900,1);
		});
          }
       });
       return false;//not to post the  form physically
});

As you can see above this code is preety much similar to the previous post of checking username availability in ajax and php and you can see the explanation of the above code from that post. But in above code, where the user is validated, he’ll be logged into the “secure.php” using “document.location” in JavaScript.

$("#password").blur(function()
{
	$("#login_form").trigger('submit');
});

Well, as you can see above javaScript’s code, when focus is moved away from the password it also call the for sumit action. Basically whenever you hit tab button in password field, it starts validating the user detail using ajax.

PHP Code for Ajax Login validation system

First of all lets’s look at the code of the “ajax_login.php”.

//get the posted values
$user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES);
$pass=md5($_POST['password']);
//now validating the username and password
$sql="SELECT user_name, password FROM tbl_user WHERE user_name='".$user_name."'";
$result=mysql_query($sql);
$row=mysql_fetch_array($result);
//if username exists
if(mysql_num_rows($result)>0)
{
	//compare the password
	if(strcmp($row['password'],$pass)==0)
	{
		echo "yes";
		//now set the session from here if needed
		$_SESSION['u_name']=$user_name;
	}
	else
		echo "no";
}
else
	echo "no"; //Invalid Login

As you can see above, the user login detial is validated from the database. If the user login detail doesn’t exists, it just returns the “no” values and if the user login detial does exists the it just return “yes” values with setting username in session variable.

Finally, let’s look at the code of secure.php

if(empty($_SESSION['u_name']))
  header("Location:index.html");
//if logout then destroy the session and redirect the user
if(isset($_GET['logout']))
{
  session_destroy();
  header("Location:index.html");
}
echo " <a href='secure.php?logout'><b>Logout<b></a> ";
echo " <div align='center'>You Are inside secured Page</a> ";

As you can see above the code of “secure.php” is simpleforward. If the user is not authenticated by session then he’ll be redirected to “index.html”. And there is link for “logout” in this page form where user can destroy the seession.

Download Full Source Code

Implementation Guide:

To implement this code, dump the tbl_user “table” available in the zip file to your database and configure the database connection in “ajax_login.php”.

]]> http://www.bageshsingh.com/bagesh-blog/2010/11/ajax-login-validation-php-jquery/feed/ 0 jQuery plugin: word-counter for textarea http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-plugin-word-counter-textarea/ http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-plugin-word-counter-textarea/#comments Thu, 18 Nov 2010 10:43:03 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=861 Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post, I’ve developed jQuery plugin to display word-count of Textarea. Please note that it is word count plugin not character counter.


Jquery plugin: Word-count code

jQuery.fn.wordCount = function(params)
{
   var p =  {
   counterElement:"display_count"
   };
  &nbsp;var total_words;
  if(params) {
      jQuery.extend(p, params);
  &nbsp;}
  //for each keypress function on text areas
 &nbsp;this.keypress(function()
  {
    total_words=this.value.split(/[\s\.\?]+/).length;
   &nbsp;jQuery('#'+p.counterElement).html(total_words);
  &nbsp;});
};

As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.

How to use this plugin?

Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.

For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).

<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
Total word Count : <span id="display_count">0</span>

Remember that the id of text area is “word_count” and “display_count“.

Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.

$('#word_count').wordCount();

Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.

$('#word_count').wordCount({counterElement:"word_counter"});

DOWNLOAD EXAMPLE CODE

]]> http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-plugin-word-counter-textarea/feed/ 0 Expand-collapse toggle panel (div) using jquery http://www.bageshsingh.com/bagesh-blog/2010/11/expandable-collapsible-toggle-pane-jquery/ http://www.bageshsingh.com/bagesh-blog/2010/11/expandable-collapsible-toggle-pane-jquery/#comments Wed, 10 Nov 2010 04:24:02 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=841 In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed.
View LIVE DEMO

Now let’s look at the html code,

<div class="msg_list">
<p class="msg_head">Header-1 </p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<p class="msg_head">Header-2</p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<p class="msg_head">Header-3</p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</div>

As you can see above, the whole message panes contained inside the div with class name “msg_list”. And, the header element where you click is defined with the class “msg_head” and after that there is element with class “msg_body” which contains the message or text which is expandable or collapsible.

Now let’s look at the CSS attributes of these three classes,

p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}

Now, let’s look at the JavaScript code to make the pane toggling i.e collapsible and expandable,

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

As you can see above, first of all jQuery framework is used. After that, all the element with the class name “msg_body” is collapsed when the page is loaded. And you can see, the “slideToggle()” function of jQuery is used to expand and collapse the “div” with class “msg_body”. When user clicks on the element with the class “.msg_head”, then div with class “msg_body” next to it, gets toggled with sliding effect, making toggle panel using jQuery.

Download Full Source Code

If you want to learn more about jQuery then you can check the following books and buy them.I really recommend the book “jQuery in Action” for starting your way for jQuery.

]]> http://www.bageshsingh.com/bagesh-blog/2010/11/expandable-collapsible-toggle-pane-jquery/feed/ 0