JavaScript
Using jQuery to rewrite relative urls to absolute urls – [revisited]
After scanning my site stats and realizing that an old post about how to rewrite all the relative urls on a page with jQuery was one of my most visited, I decided to review the code and noticed it could be improved. My knowledge of JavaScript and jQuery has improved immensely since that previous post and this revisit is an attempt to improve upon it.
Problem: Need to change all the relative urls on a page and replace with an absolute url.
Different from my other post I’m going to separate the concerns of this problem: 1 being selecting only the links that are relative and not inline or mailto: links; 2 modifying the href.
Selecting the links on a page
The jQuery standard $(‘a’) will only solve half our problem because we only want links that are relative. There are several different methods we can use with jQuery to get exactly what you need, however first take into context what your page actually looks like. You may be able to save some time if your page has relatively few links, on the other hand if you have a page with hundreds of links you will need to chose your selectors wisely. To make the best and most informed decision, I suggest you test your various use cases @ http://jsperf.com/.
Here are three that I came up with:
$('a').not('[href^="http"],[href^="https"],[href^="mailto:"],[href^="#"]');
$('a:not([href^="http:"],[href^="https:"],[href^="mailto:"],[href^="#"])');
$('a:not([href*="://"],[href^="mailto:"],[href^="#"])');
5
jQuery Pluginifier – Plugin Instantiator & Plugin Boilerplate
After coming across a recent blog post on jQuery Plugin Boilerplate code it reminded me a few months back when I was looking at the best method for authoring plugins for use at work. After much googling and trial and error I finally came to grips with something and below is the end result.
The code in the jQuery Plugin Boilerplate blog post is very similar to the plugin authoring page in the jQuery Documentation. While they are both good resources, I think they favor single plugins and may potentially lead developers down a path of duplicate code. Similar to jQuery UI’s $.widget what I want to push here is a snippet of code that can transform your code into a “jQuery Plugin” (is there a real definition of this somewhere?).
0I want to be a jkweeree Ninja!
Below is my entry for Adam Sontag’s contest to win a ticket to the 2010 jQuery Summit. It pretty much sums up as per the spec of the contest, I want to be a jQuery Ninja [while wearing a Devo Whip It hat in jQuery blue 
].
Retrieve D-Link Router WPA Password via Firebug
Well I’ve done it a million times, I forget my WPA password and each time a new device comes along I have to change it for them all. Well no more!
0jQuery 1.4.2 Released
Such quick turn around for the last two point releases are building my confidence in jQuery! I love to see the huge performance improvements, its almost becoming an issue to try and fit each release into our codebase at work. Love jQuery nonetheless… keep up the good work.
Relase notes: http://blog.jquery.com/2010/02/19/jquery-142-released/
Quick Summary:
- New Methods
- Performance Improvements:
- Event Rewrite: Internal Changes (not much affect our end)
- Bugs Fixes: 40 bugs fixes
Api Changes: http://api.jquery.com/category/version/1.4.2/
0Fun with jQuery – Checkboxes!!!
Another day with jQuery, this time we are talking about checkboxes.
Just like I stated in my previous post about select boxes, jQuery and checkbox integration, if you will, isn’t cut and dry but damn near close. So how can jQuery assist with checkboxes? Lots of ways, here are a few examples to keep you entertained.
Try and manually select a checkbox and it will still toggle them correctly (turn them off it they are on and vice versa).
[inline]
[script type="text/javascript"]
function toggleChecks(){ $(‘input[type=checkbox]‘).each( function(){ if($(this).is(‘:checked’)){ $(this).removeAttr(‘checked’); }else{ $(this).attr(‘checked’,true); } }); }
[/script]
[/inline]
jQuery selector for checkboxes
Just like any input you can choose your checkbox(es) with any standard selector.
- By Class
//Selector $('.cb_class')<!-- Input Html --> <input type="checkbox" class="cb_class" />
- By Id
//Selector $('#cb')<!-- Input Html --> <input type="checkbox" id="cb" />
- By tag and attribute
//Selector $('input[type=checkbox]') //Note: This would select all checkboxes //(same code in the Toggle Checks button above)<!-- Input Html --> <input type="checkbox" />
- By tag and attribute
//Selector $('input[name=checkBoxname]')<!-- Input Html --> <input type="checkbox" name="checkBoxname" />
More jQuery Fun – Auto Populating a Select Box
Note: This post was updated 8/2/2011 to include jsfiddle code snippets and better/smarter code overall. Enjoy!
Problem: You want to dynamically populate a select box and you don’t know how.
Solution: Easy, I will show you.
First off, I lied there is no built in way in jQuery (why?, I don’t know) to automatically populate a select box. But it actually is very easy. There are plenty of methods to accomplish this but I like to do it this was because utilizes the Option object and it doesn’t require html string concatenation.
The basics
Example 1:
Here is the code for the onclick event of that button:
3