Latest Edited: 06/02/12

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on() – Exactly as the title suggests!

jQuery Fundementals Course – An excellent free course in jQuery by Rebecca Murphy, hosted on Github.


var term = $('.twitter-anywhere-tweet-box-editor').val();
$(".stream-item:contains('" + term + "')").css('display','none');


If you save it as a bookmarklet you can use this by typing the term you want to disappear from your timeline in the search box and then clicking the bookmarklet.

javascript:var term = $('.twitter-anywhere-tweet-box-editor').val();$(".stream-item:contains('" + term + "')").css('display','none');

That has no practical application really as it doesn’t persist over page reloads and only lets you do one phrase at a time, but it helped me vent some frustration at dumb tweets!

I knew there had to be a way and the good people of Stack Overflow were able to answer my question.

Essentially what you need to do is use the option selector in order to grab the element you want, then it is fairly trivial.

$('#selectID option[value="knownValue"]').text('New Option Text');

So what we are saying here is for every element with the ID of ‘selectID’ look for an option with the value of ‘knownValue’.

Change the text of that option to ‘New Option Text’.

A use case for this (and indeed the reason why I was looking it up) is that if you have a collection of objects and you want to edit them dynamically by selecting them via dropdown then edit the fields you will most likely want to edit the ‘name’ field or some other field that represents the unique name which appears in the dropdown list.

If this is the case when you edit your name and hit save, assuming it is all done using ajax the value in the dropdown will no longer equate to the value stored in the database. This is a usability concern so you should use the method above to ensure that the option text of the dropdown gets edited accordingly.

• How to Protect Your WordPress Blog From Getting Hacked – Pretty self explanatory, unlike a lot of WordPress related posts, this isn’t just a list of plugins that are flavour of the month (although it does suggest some). An excellent read and essential if you have a WP blog.  I will definitely look into actioning some of the points. (via @designfollow).
• 5 WordPress Security Plugins To Check Hacked WordPress Blog – Along the same lines as the first post (although obviously just a list of 5 plugins to checkout) but it covers more about what to do if your server is compromised as opposed to stopping it from getting compromised.  Again, something I should really look at. (via @UCTweets).
• 40 Essential CSS Templates, Resources and Downloads – Not much to say about this, the title really sums it up, a fair bit of filler in the list but also some gems including a nice rule generator that will work as a shiv for IE when playing with CSS3 (via @designfollow)
• Essential JavaScript and jQuery design patterns – This is an article about a free ebook that I have just downloaded and skimmed through, at first glance it looks amazingly useful.  It explains many of the core design patterns and when to use them.  It also comes with printable materials. (via @elijahmanor)

It rules for a couple of reasons

• It it is such a laid back discussion from people who genuinely love jQuery.  A lot of tech podcasts are very dry, and just hard to listen to.
• It mixes n00b and l33t levels of discussion excellently.  As someone who is just above n00b not nowhere near l33t I have found nothing too under or over whelming.
• It lets you download it as a vodcast as well as a podcast.
• The source code on their site is AWESOME. (seriously, check out their site and view the source, awesome)

At the time of writing they are on episode[3], plenty of time to play catch up!

In order to do that I had to make some changes to my theme, which I figured I should document.

I went into my theme directory and created /js/themename.js

I edited the header (themename/header.php) to include jQuery and /js/themename.js…

<script src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery-1.3.2.min.js” type=”text/javascript” ></script>
<script src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/lightword.js” type=”text/javascript” ></script>

Inside of themename.js I created my $(document).ready() call and gave it the code it required.

I uploaded /themename/header.php, /themename/js/themename.js and themename/js/jquery-1.3.2.min.js to the site.

That is it!

What this plugin does is capture any links containing a certain class and instead of having them display in the current window it will create an iFrame on the fly for the content to display into.

We all know that iFrames are bad because they hide stuff from crawlers and different accessibility tools, however one of the really smart things about this is that because it looks for links of a certain class anyone coming along without JavaScript installed (say, a search engine for example) will just follow the link as normal with no negative effect.

I can see loads of potential uses for this tool and look forward to playing with it in an actual project.

Here is it in action.

Is twitter up?

Cool, huh?

As you can see if it is a fairly old post, and obviously this is hardly tackling a new or complicated issue, but I like how the author has put some thought into the amount of jQuery being used and also how it has been made to be just a little bit more generic than some solutions.