Posts Tagged ‘javascript’

Hint text for the input fields with jQuery

Wednesday, March 3rd, 2010

There are lot of site out of the Internet where some help text placed into the input fields. The working mechanism of this fields is easy. When the visitor clicks in the field the text disappear while he clicks somewhere else or navigate anywhere else on the site the text will appear again. This technique is very useful for your visitors to help them which kind of content do you waiting for that input field. It is a part of the user experience what your site can be gives for your visitors.

Needless to say that it is very easy to implement with some line of jQuery code! I would like to share it with this little snippets what I’m using my projects.

Let’s do some jQuery magic! :) 


$.fn.hint = function(blurClass) {
              return this.focus(function() {
                if( this.value == this.title ) {
                  $(this).val("").removeClass(blurClass);
                }
              }).blur(function() {
                if( !this.value.length ) {
                  $(this).val(this.title).addClass(blurClass);
                }
              }).blur();
            };

To make it work on thedesired input fields just use it in this way:


$("#input_field_id").hint("help");

You can use any of the jQuery selector technique of course!

The parameter for the hint will be the style for displaying the hint text in the field. In this example I will make the text light grey – you can add it to your .CSS file or definitions:


.help {color:#999;}

OK. But you can ask me where is the hint text itself? It is in the input field title property! Here is one example what you can use your HTML:


<input type="text" value="" id="input_field_id" title="Here is a little help" />

That’s all! If you have any question just ask me.

Tags: , , ,
Posted in jquery | No Comments »

Improving TableDND usability

Tuesday, November 10th, 2009

The TableDnD jQuery plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

This is a great plugin at all, but needs some attention in case of usability. The default behavior of the plugin is passing over the drag-n-drop “ghosting” effect.  (You can see an example here: http://www.gimiti.com/kltan/demo/jTree/)

It is difficult to make the ghosting work with this plugin but I found a very simple solution to do it. I used a small amount of CSS a Javascript code to reach a better usability behavior when a user drag-n-drop a table row.

The main concept was to mimic the ghosting effect in my project.

I used the following CSS lines.


/* This declarations makes a draghandle icon (a small crosshair) visible in the first cell of a table row */

td.dragHandle {padding-left:17px;}
td.showDragHandle {padding-left:17px; background:url(arrow_all_thin.png) no-repeat center center; cursor: move;}

/* The followings will format the entire table row when a user is dragging it */

tr.myDragClass td {background-color: #fff; padding-left:2px;} /* change the background color all of the table cells in the row to white */
tr.myDragClass td a {color: #aaa;} /* change the text color to grey, or just lighter - note: I'm using links in the  TDs */
tr.myDragClass td img, tr.myDragClass td .taskDelete, tr.myDragClass td.napok div {display:none;} /* Do not display any of the images and other informations in the cells. Just show the most important information for dragging and dropping. Other information, icons, etc may confuse the user. */
tr.myDragClass td span, tr.myDragClass td span span {padding:0;} /* Pull the information closer to the drag icon */

After that formatting I played with the plugin itself. I set up it on the following way.


var oldSibling;
 $("#todoList").tableDnD({
 onDragClass: "myDragClass",
 onDragStart: function(table, cell) {

// Saving the row under the dragged one
 oldSibling=$(cell).parents("tr").next();

//Set the CSS class immediately to show the "ghosting" like effect when the user clicks on the row

$(cell).parents("tr").addClass("myDragClass");
 },
 onDrop: function(table, row) {
 var aHtml=$("a", row).html();
 var f=$.getUrlVar('f');
 if(confirm("\nAre you sure to move \""+aHtml+"\" task?")) {
 // Here comes the AJAX call
 $("#cover").show();
 $("#ajaxMessage").show();
 document.getElementById("cover").style.width="100%";
 document.getElementById("cover").style.height=docHeight()+"px";
 $("#bigCal").load("setTask.php?f="+f+"&orig="+row.title+"&"+$.tableDnD.serializeT(), function(){
 $("#cover").hide();
 $("#ajaxMessage").fadeOut(200);
 });
 }
 else {

//If the user Cancel the moving we have to take back the row to the original place
 $(row).insertBefore(oldSibling);
 }
 },
 dragHandle: "dragHandle"
 });

As you can see I made the drag-n-drop cancel functionality also. :)

TODO: Handle the oldSibling if the moved row was the last row in the table.

Do you have any thoughts or question?

Tags: , , , ,
Posted in General | 5 Comments »