Ajax Css Blog » jQuery http://ajaxcssblog.com mental farts of a web developer Fri, 26 Jun 2009 13:17:31 +0000 http://wordpress.org/?v=2.8 en hourly 1 jquery.fieldtag.js – watermarks for inputfields http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/ http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/#comments Thu, 07 May 2009 17:14:27 +0000 mat http://ajaxcssblog.com/?p=58 Did you ever see some input fields that have a description tag in it and as soon as you click into them, in order to write something, the description disappears? That's exactly what this jQuery plugin does for you. Even picture watermarks are a piece of cake, in fact everything handled by a string of Text and/or a CSS-class assigned to an input field, is possible.]]> Description
Nifty, isn't it?

Nifty watermarking and styling.

Did you ever see some input fields that have a description tag in it and as soon as you click into them, in order to write something, the description disappears? That’s exactly what this jQuery plugin does for you. Even picture watermarks are a piece of cake, in fact everything handled by a string of Text and/or a CSS-class assigned to an input field, is possible. For more creative ideas, just visit the demo page.

How do I use it?

This plugin works with jQuery 1.3.2+ (it should also work with earlier versions, but this is untested). Proper loading of a jQuery plugin is explained in my previous post.
As soon as the document is ready, just call $(".selector .of input").fieldtag()

To make use of the appended CSS class feature, while the field is tagged, you just have add some styles to your stylesheet: 

input{ /*this are your existing styles*/ }
input.tagged{ /*appended while tagged, for example background-image*/ }

Sometimes you want to set the text manually, this is done by calling
$("input").fieldtag({ standardText:"Your text" })

Demo and source

As jQuery itself, this plugin released under dual MIT/GPL license. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

/*
jQuery Fieldtag Plugin
    * Version 1.1
    * 2009-05-07 10:10:35
    * URL: http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/
    * Description: jQuery Plugin to dynamically tag an inputfield, with a class and/or text
    * Author: Matthias Jäggli
    * Copyright: Copyright (c) 2009 Matthias Jäggli under dual MIT/GPL license.
	*
	* Changelog
	* 1.1
	* Support for proper clearing while submitting the form of tagged fields
	* 1.0
	* Initial release
*/
(function($){
	$.fn.fieldtag = function(options){
		var opt = $.extend({
				markedClass: "tagged",
				standardText: false
			}, options);
		$(this)
			.focus(function(){
				if(!this.changed){
					this.clear();
				}
			})
			.blur(function(){
				if(!this.changed){
					this.addTag();
				}
			})
			.keyup(function(){
				this.changed = ($(this).val()? true : false);
			})
			.each(function(){
				this.title = $(this).attr("title"); //strange IE6 Bug, sometimes
				if($(this).val() == $(this).attr("title")){
					this.changed = false;
				}
				this.clear = function(){
					if(!this.changed){
						$(this)
							.val("")
							.removeClass(opt.markedClass);						
					}
				}
				this.addTag = function(){
					$(this)
						.val(opt.standardText === false? this.title : opt.standardText )
						.addClass(opt.markedClass);
				}
				if(this.form){
					this.form.tagFieldsToClear = this.form.tagFieldsToClear || [];
					this.form.tagFieldsToClear.push(this);
 
					if(this.form.tagFieldsAreCleared){ return true; }
					this.form.tagFieldsAreCleared = true;
 
					$(this.form).submit(function(){
						$(this.tagFieldsToClear).each(function(){
							this.clear();
						});
					});	
				}
			})
			.keyup()
			.blur();
		return $(this);
	}
})(jQuery);
]]> http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/feed/ 31 jquery.url.js – read request variables http://ajaxcssblog.com/jquery/url-read-request-variables/ http://ajaxcssblog.com/jquery/url-read-request-variables/#comments Sat, 18 Apr 2009 21:10:58 +0000 mat http://ajaxcssblog.com/?p=3 This jQuery plugin gives the ability to read request parameters of the actual url and makes them available for further use in your javascript files. Download the source or view a demo!]]> So what?
Using request parameters in JavaScript

Using request parameters in JavaScript

This jQuery plugin gives the ability to read request parameters of the actual URL and makes them available for further use in your javascript files.

How do I use it?

This plugin works with jQuery 1.2.6+ (it may also work with older versions, but this is untested). So first of all you have to load the jQuery core (duh?) and this plugin as well. This may look something like this: 

1
2

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.url.min.js"></script>

After that you can use the $.url.param() function to get the values of the specific parameters.

For example we’ll take this URL: http://example.com/?name=john&last=doe. Now we would like to know the value of the variable ‘name’ and call $.url.param("name") this returns a string, containing “john”. Inexistent or empty variables like $.url.param("inexistent") return an empty string “”.

Demo and source

As jQuery itself, this plugin released under dual MIT/GPL license. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/*
jQuery Url Plugin
	* Version 1.0
	* 2009-03-22 19:30:05
	* URL: http://ajaxcssblog.com/jquery/url-read-get-variables/
	* Description: jQuery Url Plugin gives the ability to read GET parameters from the actual URL
	* Author: Matthias Jäggli
	* Copyright: Copyright (c) 2009 Matthias Jäggli under dual MIT/GPL license.
*/
(function ($) {
	$.url = {};
	$.extend($.url, {
		_params: {},
		init: function(){
			var paramsRaw = "";
			try{
				paramsRaw = 
					(document.location.href.split("?", 2)[1] || "").split("#")[0].split("&") || [];
				for(var i = 0; i< paramsRaw.length; i++){
					var single = paramsRaw[i].split("=");
					if(single[0])
						this._params[single[0]] = unescape(single[1]);
				}
			}
			catch(e){
				alert(e);
			}
		},
		param: function(name){
			return this._params[name] || "";
		},
		paramAll: function(){
			return this._params;
		}
	});
	$.url.init();
})(jQuery);
]]> http://ajaxcssblog.com/jquery/url-read-request-variables/feed/ 14