"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

Articles - jQuery entries

Using SocialCam without all the Facebook Mess

Don't you hate it when a website forces you to use Facebook for everything? SocialCam is yet another example. Using the bookmarklet below, you don't have to use Facebook anymore!

SocialCam Freedom - drag me into your bookmark toolbar and click when on Facebook or SocialCam

What do I do?

Simply click it once when on your Facebook news feed and all links will now work without needing the SocialCam app!

Simply click it when on a SocialCam webpage to view any videos in the sidebar without needing to log in!

Yes Pandora, I'm still Listening

Are you tired of having Pandora stop and wait for you to click "I'm still Listening" button? Well, drag the button below into your bookmarks, and when you start Pandora, click on it. Then, you'll never see that button again!

I'm Still Listening - drag me into your bookmark toolbar and click when viewing Pandora

How's it Work?

When Pandora revamped their interface a while back, they moved to an HTML based display. With that, it allows Javascript to interact with the controls. This script simply checks once a second if the button is there. If it is, it clicks on it. That's it!

Technical details: Pandora includes jQuery for use, so this bookmarklet uses that. The button is selectable because it has the CSS classes still_listening, button, and btn_bg. I find anything that has all three of those buttons and click on it! Pretty simple.

Creating input fields that only accept integers - jQuery

Wouldn't it be nice to force only certain characters into a text field? How about for a field asking for age? You would only want integers. Same with height, weight, or even a phone number. Well, here's a quick snippet that'll do just that!


$(document).ready(function() {
$("#inputField").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});
});

So, what's happening here? Well, it adds a keypress event to the input field with id "inputField" (feel free to change to whatever you need). Whenever a key is pressed, this function is fired. If the function returns false, the key pressed is not added to the input field. If it returns true, it is added.

The function is given an Event object, and the keyCode value is a numeric value. The String.fromCharCode converts that to the actual character that the user inputted. It is then tested if that character was an integer, using a regular expression test. If it is not an integer, false is returned, and the character is not added to the field! Pretty simple, huh?

Putting links into jTip

First of all, you will need the jTip library, which can be found here. Now, I recognize that this tooltip plugin is no longer supported, but a lot of people are still using it. So, for those people this is for you. If you want to check out the newer one, look up clueTip.

The Additional Code

If you open the jtip.js file, you will see that when the document loads, it starts the JT_init() function. This function sets a hover function on any link that has the class jTip. We want to modify this just a tad-bit to allow a tooltip to be shown after you mouse off.

Of course, we don't want ALL tooltips to do this. We will add a new class called "extendedJtip" that will represent a tooltip that we want to stay open for an extended period of time.

Let's replace the JT_init() function with this:

Collapsible Fieldsets jQuery plugin - Drupal Style

Well, let's get started. First, let's make a simple HTML page to start with.


<h1>Collapsible Fieldset - jQuery plugin</h1>
<fieldset>
<legend>Cannot collapse me</legend>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nisi magna.</p>
</fieldset>
<fieldset class="collapsible">
<legend>Can Collapse Me!</legend>
<h2>1914 translation by H. Rackham</h2>
<p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment...,"</p>
</fieldset>

You'll notice that the first fieldset has no class, while the second one has a class of collapsible. We will be using this later on. You'll also want to go ahead and include the javascript source file for jQuery.

The jQuery plugin

Now, let's take a look at the actual plugin. What makes it work? How's it do it? Well, let's find out!

Modify jQuery's Quicksearch plugin to include reset button

To follow through this tutorial, you will first need to have the quicksearch plugin, which can be found here.  

At work, we recently had a client that wanted to search through a table.  This plugin worked great for that.  Well, then he decided it would be great to have a little button next to the text field that allows the user to clear the search, and have the table return to its default state.  Well, that meant diving into the code.  So... here's how to do it...

 

When you open the file, you will find several functions that do different things.  You will also see near the bottom, a list of options.  We will need to first add some options for the reset button. Here is what I used:

reset: false,					//Is reset enabled? (true/false)
resetId: 'resetQS',				//ID for reset button.
resetClass: null,				//Class for reset button.
resetLabel: 'Reset',			//Text inside reset button.

You can see the comments for what each of these do. Now, let's put those to work!

We first will make the function that actually inputs the button.  Place this anywhere with the other functions (I put it in front of the init() function.