Stylephreak Web Productions » Javascript

jQuery.loadStylesheet

anthony — Mon, 17 Nov 2008 21:30:20 +0000

I needed a simple function to load a media-specific stylesheet on-the-fly and came up with this jQuery function. You feed it two parameters, the stylesheet name and the media type, and jQuery takes it from there.

// load stylesheet(name,media)
loadStylesheet :function(e,m) {
  $('head').append('
    +e+'.css" type="text/css" media="'+m+' />');
}
 
$(document).ready(function(){
  loadStylesheet('test','screen');
}

jQuery.innerWrap

anthony — Sat, 27 Sep 2008 22:23:59 +0000

A friend of mine needed a method to wrap the inner content of a tag with another tag, and after a bit of digging around I found that Brandon Aaron, author of the fantastic Dimensions plugin, has created just the thing.

“jQuery provides a method for wrapping an element with one or more elements. This is a really nice method but sometimes you need to wrap the contents of an element. Now you can do so with one method, innerWrap. The innerWrap method acts almost identical to the wrap method. The only real difference is that it wraps the contents of the element instead of the actual element.” – Brandon Aaron

Here’s the function itself:

jQuery.fn.innerWrap = function() {
    var a, args = arguments;
    return this.each(function() {
        if (!a) a = jQuery.clean(args, this.ownerDocument);
        // Clone the structure that we're using to wrap
        var b = a[0].cloneNode(true),
        c = b; 
        // Find the deepest point in the wrap structure
        while (b.firstChild) b = b.firstChild; 
        // append the child nodes to the wrapper
        jQuery.each(this.childNodes,
        function(i, node) {
            b.appendChild(node);
        });
        jQuery(this) 
        // clear the element
        .empty() 
        // add the new wrapper with the previous child nodes appended
        .append(c);
    });
};

And the example below will effectively turn

Title

into
Title

$(document).ready(function(){
      $('h2').innerWrap('')
});

jQuery.attrToClass

anthony — Wed, 24 Sep 2008 22:25:10 +0000

I was in need of a very simple function: to append a css class to all form input elements on a page by extracting the input type from the element in question.

In effect, this:

<input type="text" name="name" value="" />
<input type="submit" name="submit" value="Submit" />

becomes this:

<input type="text" name="name" value="" class="text" />
<input type="submit" name="submit" value="Submit" class="submit" />

Until attribute selectors ( input [type=submit] {} ) become the standard, this function will allow me to style my inputs with CSS without having to manually apply classes in my html. The cleaner I can keep my code the happier I am.

attrToClass Source:

Comments and suggestions for improvement would be much appreciated:

jQuery.fn.attrToClass = function(e) {
	$(this).each(
		function(intIndex){
		    $(this).addClass($(this).attr(e));
	});
};
 
$(document).ready(function(){
       // designate the tag and the attribute to be extracted
	$("input").attrToClass("type");
});

Update

After playing with this function for a bit I realized it would be just as easy to pull just about any other attribute, from just about any other tags, and apply the classes. Names, for example, would be just as plausible, and probably more versatile, as class name:

<input type="submit" name="submitContact" value="Submit" />
 
to
 
<input type="submit" name="submitContact" value="Submit" class="submitContact" />

With that said, the function has been updated to allow you to designate the tag and attribute type within the function call. Any further updates/fixes will be at this Gist