November 26th, 2010 Posted by Don Albrecht
I just stumbled across a great post on StackOverflow. A contributed answered a question with a sweet plugin for dynamically creating CSS rules that apply page wide on the fly with javascript.
Here’s a simple example:
$.style.insertRule(['p','h1'], 'color:red;');
$.style.insertRule(['p'], 'text-decoration:line-through;');
$.style.insertRule(['div p'], 'text-decoration:none;color:blue');
Pretty sweet when you need to change styling on the fly, no?
You can view the original StackOverflow post here:
http://stackoverflow.com/questions/4232557/jquery-css-write-into-the-style-tag
The code is also cross posted to jsfiddle here:
http://jsfiddle.net/doktormolle/ubDDd/
June 9th, 2010 Posted by Don Albrecht
I know there’s a slew and a half of tutorials on this out there, but I’m adding my own to the mix. I’ve been working on a generic template for plugin development and have cobbled together what I feel is a solid one.
First thing first, however, building a plugin is about being a good citizen
- You’ve got a naming convention to deal with. jquery[your plugin name].js
- Be considerate of the $.XXX namespace. Only claim 1, and try to make it both developer friendly and unique. In our case it will be $.plugin
- Always return this.
- Always end with a “;”
- Wrap the entire thing in an anonymous function call, this will protect the plugin from instances where jquery has been renamed.
So, with all that said and done, the skeleton of a plugin looks like this:
1: (function($) {
2:
3: $.fn.myPlugin = function(settings) {
4: var config = {'foo': 'bar'};
5: if (settings) $.extend(config, settings);
6: this.each(function() {
7: // element-specific code here
8: });
9: return this;
10: };
11:
12: var newMethods = {
13: a : function() {
14: var config = {'foo': 'bar'};
15: if (settings) $.extend(config, settings);
16:
17: this.each(function() {
18: // element-specific code here
19: });
20:
21: return this;
22: },
23: b : function() { return this },
24: c : function() { return this }
25: };
26:
27: jQuery.each(newMethods, function(i) {
28: jQuery.fn.myPlugin[i] = this;
29: });
30:
31:
32: })(jQuery);
Note, what this code is doing.
First, we define the core behavior of the plugin, then extend the plugin once. This way we keep our declarations concise, clear and well encapsulated.
We have an established closure structure for shared private functions.
We keep everything encapsulated to protect the jquery namespace as much as possible, and iterate over the child functions to extend the plugin.
PS– most of this is adapted from the jquery extension guide here: http://docs.jquery.com/Plugins/Authoring
November 14th, 2007 Posted by Don Albrecht
Here’s a quick and dirty little jQuery plugin to create text areas that automatically resize.
I based it off of Richard McMahon’s Prototype Version
jQuery.fn.smartArea = function (){
return this.each(function() {
if (!jQuery(this).is("textarea")) {
return false;
}
jQuery(this).click( function(){
jQuery.SA.resizeArea( this ); } )
.keyup( function(){
jQuery.SA.resizeArea( this ); } );
return this;
});
}
jQuery.SA = {
resizeArea : function ( t ) {
var lines = t.value.split('\n') || [];
var newRows = lines.length;
var oldRows = t.rows;
for (var i = 0; i < lines.length; i++)
{ var line = lines[i]; if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
}
if (newRows > t.rows) t.rows = newRows;
if (newRows < t.rows) t.rows = Math.max(1, newRows);
}
}
October 31st, 2007 Posted by Don Albrecht
One of the most powerful jQuery plugins is dimension. Using dimension you can obtain the position, height & width of just about any element on the page and the window itself.
Uses:
- Determine dimensions of document
- Determine dimensions of window
- Determine scroll offsets of containers
- Set scroll offsets of containers
- Determine dimensions of container contents
- Determine absolute position of elements
- Determine dimensions & offsets of parent elements.
Find Plugin & API Documentation here:
http://brandonaaron.net/docs/dimensions/
Latest Posts