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?).
0Retrieve 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" />
Fun with jQuery – toggle() – Easy tips to visually enhance your website
Here’s a quick tip to add some cool effects with jQuery that require very little code to implement. In this example I’m going to so how use of the toggle function can make the simplest functionality and jazz it up.
.toggle()
In a nutshell, the toggle function will call the show() function if your element isn’t visible and the hide() function if it is.
- Hamburger
- Philly Cheese Steak
- Taco
- Pizza
- Something else greasy and unhealthy
<input onclick="$('#preview1').toggle();" type="button" value="Toggle My Menu" />
So as expected, clicking the button will toggle the menu. Now lets get a little more flashy:
0Using jQuery to rewrite all relative url’s
This post has been revisited, see the newer version here.
Problem:
I have a template file that has all relative url’s for all the links and I have this template on two different subdomains, one is used for processing and the other is for static files.
When I display something on my processing server I want it to make all the links point the the static pages without modifying the template.
Solution:
Use jQuery to parse all links and change to the proper domain.
Question:
Is there a better method that is automatic such as this? Or maybe a better way to write the jQuery as it stumped me to get it right for a bit.
Code:
0