Archive for the 'jQuery' Category


jquery.fieldtag.js – watermarks for inputfields 24

Posted May 7, 2009

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);

jquery.url.js – read request variables 12

Posted April 18, 2009

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);