BLOGS@DiGiTSS

DiGiTSS Team's Programming experience with PHP, MySQL, Ajax, Javascript, jQuery, C# and Microsoft technologies

Archive for category jQuery

Implementing Quick Table Search using jQuery filter

Aug 13

Posted by Dharmavirsinh Jhala in jQuery | 3 Comments

Before sometime I had written a post on jQuery case-insensitive expression filter. Now today we will learn about how to put simple filter for our HTML table using jQuery and it's case-insensitive expression.

It's takes just few lines of Javascript / jQuery code to implement quick filter for an HTML table, here you go:

The HTML

 
<label for="kwd_search">Search:</label>
<input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>Name</th>
<th>Sports</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sachin Tendulkar</td>
<td>Cricket</td>
<td>India</td>
</tr>
<tr>
<td>Tiger Woods</td>
<td>Golf</td>
<td>USA</td>
</tr>
<tr>
<td>Maria Sharapova</td>
<td>Tennis</td>
<td>Russia</td>
</tr>
</tbody>
</table>
 

Read the rest of this entry »

Tags: , , ,

jQuery case-insensitive Contains Expression..!

Apr 20

Posted by Dharmavirsinh Jhala in jQuery | No Comments

Most of the time to search through DOM and filter text we need a jQuery Expression/filter which gives us case-insensitive result. I believe it's required to have it as a part of jQuery base-library but anyway writing your own is very simple.

I have gone through some of other implementation before writing this but here this version is complete copy of jQuery library's "contains" filter except it is case-insensitive.

In below code when it's using $(elem).text() it's calling Sizzle.getText internally which is Utility function for retreiving the text value of an array of DOM nodes.

$.extend($.expr[":"],
{
    "contains-ci": function(elem, i, match, array)
	{
		return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});

Here are some other nice jQuery Selectors and Expressions: Read the rest of this entry »

Tags: , , ,

jQuery 1.5.2 and jQuery mobile alpha 4 released

Apr 3

Posted by Dharmavirsinh Jhala in jQuery | No Comments

jQuery mobile framework

jQuery mobile framework

jQuery 1.5.2 is released (on April 2nd) as a bug-fix release of jQuery version 1.5.x, fixing about 18+ issues/bugs reported. Along with that couple of days back on 31st March 2011 jQuery Mobile's alpha-4 version has been released.

jQuery mobile project is making good and steady progress though from their road-map published earlier I was expecting production ready release of jQuery mobile in Jan 2011. As I have invested into jQuery mobile as a technology and tool for one of my project and it's obvious that I can not release that when framework itself is not mature for production.

I am highly impressed with jQuery mobile framework project and I have chosen jQuery mobile over Sencha Touch after researching over it for sometime. One of the reason behind choosing jQuery mobile was number of devices they support. Look at the device support grid here. Read the rest of this entry »

Tags: , , , , ,

jQuery Magnet Multi-Select List – DG Magnet Combo

Jan 25

Posted by Dharmavirsinh Jhala in jQuery | 1 Comment

jQuery dg-magnet-combo (no CTL+Click Select/List with just one line)

jQuery dg-magnet-combo (no CTL+Click Select)

Basically I wanted to write this plugin since long long time but could not get a while to hold and push my thoughts as a code to form this plugin. As the name suggests (which seems kind of difficult to understand the real purpose of this plugin) it does not deselect existing option when one selects another option in multi-selection list/combo-box.  How does this sound? Yes, w/o having your control key pressed. Basically I have been found of changing the default behavior of the html controls and with this new jQuery Magnet Multi-select List plugin, I will continue this trend. If you have already understood the meaning and purpose of this plugin you can move to plugin-usage without reading more boarding story about the plugin.

One would say that it's very easy you just have to hold the CTL key while selecting another option in combo-box but it's going to be very irritating when you have hundreds of options in your list and you have to select multiple out of them one of them is on top and the other one at the end of list, which makes it keeping that CTL key difficult and if one misses out CTL hold for a while and clicks he's gone. He has to start from all over again. To get rid of this problem many web-developers implement their lists/combo-box in ways where one has to click > select and move options from left-to-right and those on the right-side are the ones which are being selected by users. But this plugin will make your life as a developer and users life much easier by not dropping down the selected option each time they select another. Basically this will help many users who are less-friendly with computers and web in general and this plugin development with jQuery came in mind just out of need for such a plugin who can do so and as per my knowledge so far we don't have such plugin available for any javascript library.

Learning from the past experiences, this plugin will support accessibility from the beginning. Yes, there is a keyboard support too.

To use DG Magnet Combo plugin just add following code in your javascript:

$(document).ready(function(){
	$("#my_list").dgMagnetCombo();
});

See live demo here or goto github repository to download or fork.

Update: Plugin updated to 1.1 with following changes: Read the rest of this entry »

Tags: , , ,

jQuery Fancy Custom Radio-button and Checkbox

Apr 8

Posted by Dharmavirsinh Jhala in jQuery, Tools / Plugins / Extenstion | 53 Comments

Fancy Radio-button and Checkbox

Fancy Radio/ Checkbox

I have written a jQuery Plugin for Fancy Custom Checkbox and Radio-buttons. To make form elements visually more expressive. I required this for one of my project and later on I have rewritten it completely to make it more generic and easier for jQuery Lovers. I am great fan of jQuery and I am inspired by http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ to write this plugin.

It's fairly easy to use just like any other jQuery plugin you just have to write couple of lines of javascript code and add some CSS to your html.

Javascript You need:

$(document).ready(function(){
	$(".radio").dgStyle();
	$(".checkbox").dgStyle();
});

Read the rest of this entry »

Tags: , , ,

jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…

Jan 24

Posted by Dharmavirsinh Jhala in jQuery | 1 Comment

Last week jQuery 1.4 is released with a new website for the version. Lot of code has been rewritten to improve code and reduce function calls. I have been using jQuery since more than 2 years now and it is always good to upgrade to newer version of jQuery which brings more function to help us more speed and performance. There are more than dozens of new additions for developers and it will just help all of us to do things in better way with jQuery now..!

jQuery and jQuery-UI Compatibility:

The fact is jQuery and jQueryUI are not compatible, YES they are not. I tried to upgrade my application with jQuery1.4 but UI components are failed to work. I was using jQueryUI 1.7.2, later on I digg-in on the web to see how soon UI will support jQuery1.4 but seems like 1.7.x won't do that probably 1.8.x would.  So I tried looking at what is cooking with jQueryUI 1.8 but when I downloaded alpha release of UI1.8.a1 it had jQuery1.3.2 powering it...! Read the rest of this entry »

Tags: ,

Radio-buttons with Checkbox behavior – a jQuery Plugin 1.2.5

Dec 13

Posted by Dharmavirsinh Jhala in jQuery, Tools / Plugins / Extenstion | 1 Comment

This is almost final release to a innovative plug-in which changes the basic behavior of any Radio-button in our form and makes it selectable or un-selectable just like a checkbox.

It includes some code improvements and stays compatible to latest version of jQuery 1.3.2 just like 1.2.4. It has been tested on Safari 4.x, Internet Explorer 7.0+, Firefox 3.x and will work on Chrome 2.x or 3.x as well.

I request any users to post back any problems/bugs they encounter or enhancements they need to be included.
Read the rest of this entry »

Tags: , ,

Paying the bills.!