You Are Here Home > August 2008

August 2008

Password Support for Jeditable, a Cool jQuery Plugin

Here is the original plugin:
http://www.appelsiini.net/projects/jeditable

It let’s you implement inline editing capabilities and it’s supported by major browser.
Here are some examples:
http://www.appelsiini.net/projects/jeditable/default.html

An example usage is like this:

$(".edit_area").editable("http://www.example.com/save.php", {
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='img/indicator.gif'>",
         tooltip   : 'Click to edit...'
     });

The problem is, it doesn’t support password input types, but here is how to add this support.

1 – Open the plugin file.
2 – Find this code:

text: {
	element:function(settings,original) {
		var input=$('<input>');
		if(settings.width!='none') {
			input.width(settings.width);
		}
		if(settings.height!='none') {
			input.height(settings.height);
		}
		input.attr('autocomplete','off');
		$(this).append(input);
		return(input);
	}
},

3 – Add this after that:

password: { element:function(settings,original) {
		var input=$('<input type="password">');
		if(settings.width!='none') {
			input.width(settings.width);
		}
		if(settings.height!='none') {
			input.height(settings.height);
		}
		input.attr('autocomplete','off');
		$(this).append(input);
		return(input);
	}
},

Now you can do:

$(".edit_area").editable("http://www.example.com/save.php", {
         type      : 'password',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='img/indicator.gif'>",
         tooltip   : 'Click to edit...'
     });

It’s odd that the developers didn’t add this capability…

Password Support for Jeditable, a Cool jQuery Plugin
Comments (3)   Filed under: AJAX,JavaScript,Web Development   Posted by: Hamid

Fading images with Fireworks

Here is how to do it:

1 – Open your image
2 – On the top menu, go to Commands > Creative -> Fade Image
3 – A dialog box will open, choose the kind of fading effect that you want
4 – Click OK
5 – If you select your image, you will see a line with a dot and a rectangle on each side, hold the dot and move it around and experiment. Use the rectangle to move the whole effect around and the dot to resize it and change it’s direction.

Enjoy :)

Fading images with Fireworks
Comments (0)   Filed under: Web Design,Web Graphics   Posted by: Hamid
« Newer Posts — Older Posts »