BLOGS@DiGiTSS

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

Posts Tagged Javascript

jQuery Fancy Custom Radio-button and Checkbox

Apr 8

Posted by Dharmavirsinh Jhala in Tools / Plugins / Extenstion, jQuery | 16 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: , , ,

Calculate Date/Time difference – Simple Javascript code snippet

Apr 4

Posted by Dharmavirsinh Jhala in Javascript | 1 Comment

It's very often we come across requirement when we need to calculate time difference between two dates in Javascript. Here is a simple Javascript function which can do it in quick and dirty way :)

Dirty because I would have to say because I would have made it little more generalized by provide options and formats which convert string to date automatically..!

Anyway for that matter I would rather suggest using php.js which is interesting and helpful library which let's us use lot of PHP functions in Javascript.. It includes hundreds of useful and handy functions which we are used to while we develop PHP Applications.

This simple functions takes only 2 arguments as Javascript Date objects and in return provides an object with days, hours, minutes and seconds as the property in difference between these 2 date provided as parameter to function.

Here is the code for simple Date-time difference calculation:
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: ,

Firebug Lite 1.2 Released

Jul 27

Posted by Dharmavirsinh Jhala in Javascript, Tools / Plugins / Extenstion | No Comments

As we all know that Firebug is a great tool for debugging and profiling our Javascript code, but we have been limited to do it with Mozilla based browsers (Firefox). Firebug team has done great job by providing us ability to use Firebug Lite with Internet Explorer, Opera or Safari.
Firebug Lite is just a small javascript library which could enable us to use most of the features of Firebug Extension without any Installation..!

Firebug Lite is subset of Firebug that could be used in IE, Opera and Safari. Firebug Lite 1.2 is packed with XHR, DOM, HTML and Javascript debugging.

You can embed Firefox Lite into any web page / application to start debugging.

To embed Firefox Lite into any page just attach following code into your page.

<script type='text/javascript'
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Or else you can download source file to your local system and can include into your pages. You can also drag-and-drop following link to your bookmark and it will enable Firebug Lite on any page.

Place Firebug Lite Bookmark

or

Go get Firebug Lite From Firebug Lite Home.

Just have a look at these screen-shots... Read the rest of this entry »

Tags: ,

jQuery 1.2.5 released

May 21

Posted by Dharmavirsinh Jhala in Javascript, jQuery | 1 Comment

jQuery 1.2.5 is available only after one day of jQuery's 1.2.4 release. jQuery 1.2.4 was a bad build probably. There were some patches missing and difference was small compared to the list of bugs fixed.

There is a huge bunch of tickets which is closed. Here is the list of tickets closed for jQuery 1.2.4 or 1.2.5. There were many browser compatibilities related issues and some are performance related and core improvements.

Good to see that our favourite Javascript framework is becoming more and more mature day by day.

Click here to see the reason behind rebuilding 1.2.4 as 1.2.5

Download jQuery 1.2.5

Tags: ,

Hacking jQuery Thickbox..!

Apr 27

Posted by Dharmavirsinh Jhala in Browsers, Javascript, Technology, jQuery | 81 Comments

Have you ever wished of doing something more with what you have been doing with jQuery thickbox? Now it has been more then 6 months that I am using jQuery on different projects. I have extended jQuery many a times during this period and to tell you one thing I have used jQuery for heavy-weight form processing for one of my very complicated project and it included processing of more then 1600 html controls with the help of great jQuery.

Now when it comes to Thickbox it gives nice functionality but many a times it leaves us hungry for more. For example here are the few situations where it will be difficult to use Thickbox without further modification.

  • It let's open window in a IFRAME and close that but what if you can't give 'class="Thickbox"' to any of your link?
  • What if you are not loading those links with page load? (If the links from which you are willing to open Thickbox windows is not available at the time of page load then Thickbox won't work. As Thickbox internally works in a way that it will search for all links with class = "Thickbox" at the time of page load and then customize their onclick events.)
  • What if you want to open second Thickbox window as someone close first one and that too without any user interaction?
  • What if you want to call any javascript function from the parent window? (parent window is the window from which parent window is getting opened.)

Read the rest of this entry »

Tags: , ,

jQuery tablesorter plugin – a friend in need…

Feb 28

Posted by Dharmavirsinh Jhala in Javascript, jQuery | 2 Comments

Working on Client side using javascript has lot of advantages and one of them I came across today..! In our flagship CRM we have quite complicated and drill-down reports and in one of such report I wanted to give sorting.

It was not possible to use database (mySQL) sorting as it was not just one query and it was a calculated based on so many things. Next option was to play with resultant recordset in script language - PHP, although I am very good at playing with arrays I didn't wanted to do so in it this time. I had seen many of jQuery examples previously and since few months I was heavily developing in jQuery so I though of doing it on client end using some javascript code. Which I though must be readily available by some great contributor over the Internet.

I did my search with "table sort jquery" and what I found was a great jQuery plugin with a great power which will let me do all my sorting on Client Side. I was not going to give pagination on that so server side trip was not required at all.

tablesorter is a great jQuery plugin and I applicate all efforts from Christian Bach to make this plugin what it is, and tablesorter is now in mature stage by his efforts. When I am writing it is in it's 2.0.1 version.

I agree that such plugins are available by contributors of other javascript frameworks like Prototype, mootools...etc. But what jQuery has done is really great. Plugin development is really easy and fun with jQuery, and it's beauty, chain ability and ease will drive us crazy to get anything we want.......!

So if you are already using jQuery for your application just use tablesorter when you need it and it won't let you down. Using it is really a fun and as easy as ("#myTable").tablesorter() and you are done. It will auto-detect most of the data-type on it's own and you can checkout from it's demos that it really does. It will just take plain html table and we just need to leave everything else on this beautiful plugin to worry about.

Here is the powerful feature list:

  • Multi-column sorting
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
  • Support for ROWSPAN and COLSPAN on TH elements
  • Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
  • Extensibility via widget system
  • Small code size (7,4kb packed)


Real simplicity of plugin is that I don't need to change much to use it. I can output plain html as I was doing before, just attach id=<table-id> attribute to my table and just order header's into <th> tag properly and when your page is ready call tablesorter for your table..!

One more good thing with it is that it comes with a companion Pager plugin which will add-up pagination to your listing.. Check-out this really good plugin if you need Pagination with Client-Side sorting for any of your application.
Thanks to New Wave Javascript - jQuery.

Tags: , ,