Easy jQuery Tooltip

Pretty basic post here. At work the other day, I needed a quick tooltip and didn’t want to install an over-burdened jQuery plugin, so I whipped this up. The usage is pretty basic, in that it uses the the “alt” attribute for the tooltip text. You can change the “x/y” variables to control the position offset from the mouse. Customize the styling in your own stylesheet. A sample is provided below.

var tooltips = { //tooltip to show Alt text
x = 10;
y = 10;

var tip = jQuery(this).attr('alt');

"+ tip +"

jQuery("#btooltip").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn(250);

}, function(e){ jQuery('#btooltip').remove(); });


jQuery(selector).css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");



//init tooltips
tooltips.init(jquerySelectorHere); //use any kind of normal jQuery selector.

You also need some simple styling. The only thing required is for display to be none for the fade-in to work. Here’s a sample.

border:2px solid #000;

How to Use Multiple Twitter Accounts on One Gmail Account

There are many times when you might want multiple Twitter accounts. You might have one for your personal use and one for your company.

Twitter restricts accounts to one per unique email address. Who wants to manage multiple email accounts unnecessarily?

Add Some Variety to Your Gmail Address

Gmail has a cool feature that’s been around for many years. You can extend your email address by applying “+uniquetext” to the end of your address before the @ symbol.

For example, my personal Twitter account is http://twitter.com/geuis. I also have another one I just started for Javascript conferences, http://twitter.com/jsconferences.

For my personal account, I signed up with ‘geuis.teses@gmail.com’. For jsconferences, I used ‘geuis.teses+jsconferences@gmail.com’. Twitter recognizes each as a unique email address, and Gmail nicely delivers mail to both addresses to my one email account.

Keeping Organized: Apply Labels Automatically

If you’re running multiple Twitter accounts, all of those notification emails could get confusing. Lets filter them into their own labels in Gmail.

If you’re new to labels, just think of them as versatile folders. Also, Gmail offers “filters”, which are similar to “Rules” in a mail program like Outlook.

Ok, there’s 2 steps.

  1. 1) Make the label(s).
  2. 2) Setup the filter(s).

Make the Label

Go to your inbox and at the top look for the Labels drop down button. Click on “Manage Labels” at the bottom of the menu.

On the Settings screen that appears, at the very bottom create a new label. For me, I’m adding “jsconferences”. Click the Create button to make it so.

Setup the Filter

Click the Filters tab, then click “Create a New Filter”. In the To: field, put your email address with the “+uniquetext” you used to register your Twitter account. For me, this is geuis.teses+jsconferences@gmail.com.

Click the “Next Step” button.

Check the box “Apply the label” and the label you created a minute ago from the list. When you’re ready, click the “Create Filter” button. You’re done!


Send an email to your email address with the “+uniquetext” text. When it is received back in your inbox, it should now have the label.

That’s it. Twitter on!

Detecting Technological Advancement in Alien Civilizations

Here in the U.S. we are converting all of our tv broadcast signals from analog to digital for the first time since people started broadcasting television signals. It indicates an advancement that is potentially detected far beyond our own blue marble. It prompted a thought about SETI’s search for an alien civilization’s broadcast signal over the years, and how we might be able to detect their rough level of advancement if we listened long enough.

There’s some hypothetical assumptions we have to make to illustrate this idea. First, that we have detected an alien civilization’s broadcast signals and have been listening for a while. Second, that we have been able to get more information from the signal beyond the fact that it exists. It not only has to be strong enough to be detectable, it must still be carrying information we can decode.

A fact that has been widely talked about over the years is that since people started broadcasting radio in the early 20th century, there has been an ever-expanding envelope of radio signals emanating from the earth and into surrounding space. By now, its possible that our earliest radio and tv signals have spread across a volume of space almost 90 light years in all directions. There are thousands of stars in this small region of space, and a sufficiently advanced civilization living out there could have been listening to us for decades.

In our scenario, lets switch roles. We have detected a civilization that isn’t too far away and have been recording their broadcasts for a number of decades. Over the years, we’ve seen their signals get stronger and more sophisticated. If we are able to interpret their broadcasts, we could get a lot more information about their societies that would add to our estimates of their development. Depending on the rate of change over time, we can make rough estimates about their level of technological advancement.

  1. If the change has been slow, we might assume they have are advancing at a slower rate than we are.
  2. Alternatively, we might deduce they are advancing more quickly than us.
  3. If we detect a variable level of complexity in their signals over a long period of time it could indicate a civilization-wide war, natural disaster, or even economic collapse has occurred that set them back.
  4. Finally, if their signals stop suddenly and never return it might indicate either a complete collapse or it could be an indicator that they have gone through their own Singularity.

Point 4 has some special meaning. If the complexity of another civilization’s signals have steadily increased over the years and then suddenly stopped or drastically altered in a short amount of time, this could be interpreted as a very good indicator of a Singularity event. Depending on the civilization’s distance from our own and how long the delay is between when it was broadcast and when it was received, this could be an early warning indicator that we could be on the receiving end of first contact in a short amount of time. It might be our only warning before we encounter whatever came out the other end of their Singularity. A short review of human history teaches good lessons for what happens to the less-developed in situations like that.

We should look at our own progress over the last 100 years and imagine what another species nearby might be seeing.

ReloadCSS Stylesheet Reloader – make development a bit easier

ReloadCSS Bookmarklet: Reload CSS

The ReloadCSS source: Source

A while back I ran into an annoying problem. I was working on a couple of projects that were Java/JSF/JSP based. We were using Eclipse with Tomcat to run the project. The annoying bit was that whenever I made a change to a stylesheet, it would take several seconds to a minute before Eclipse updated the working deployment. Despite refreshing the browser repeatedly, a simple change just wouldn’t refresh immediately.

Also, if the remote dev servers for the database were running slow, each page refresh would take a while depending on what the application was trying to do.

My continuing interest in jQuery as a primary javascript development platform led me to a quick temporary solution. I wanted to make a JS bookmarklet that would dynamically reload all of the stylesheets on the page. I’ve since updated it a bit to make it more robust.

I’ve set this up as a code demo. You can add the bookmarklet to your browser by dragging the link to your toolbar in Firefox, or adding it as a favorite in IE. Safari is a little trickier, but basically just add it as a bookmark and it should work.

When you are on a page you are working on, hit the Reload CSS bookmarklet. This will insert a “Reload CSS” button floating in the top-right of the browser window. Every time you click this it will reload all stylesheets loaded via <link> tags. Sorry, it doesn’t load stylesheets with @import right now.

Each <link> tag href attribute gets a counter incremented as #num. This tricks the browser into updating the CSS.

The bookmarklet checks for jQuery in the DOM, then loads in v1.3.1. If you already have jQuery loaded, it isn’t loaded again. The script itself is then loaded from from my code stash here. When I make updates, they’ll automatically be updated. Also, feel free to copy the code itself if you want to use it or host it locally.

This has been tested and verified working in Firefox 3 and Safari on Mac OS and Windows. This is where I do my primary development and was my only concern when developing this.

Feedback is really appreciated, and hopefully this will help someone out.

ReloadCSS Bookmarklet: Reload CSS

The ReloadCSS source: Source

Introducing Fathomer

Project Page: http://code.google.com/p/fathomer/

I started working on this late last week after brainstorming with a friend. We wanted a way to dynamically promote some one’s Twitter account to users who are most likely to already be Twitter followers themselves. Imagine you are working at a large company with lots of traffic (like us) and want to promote your company’s Twitter account to your users, but don’t want to have to explain to the 95% of non-Twitter users just what the hell you’re talking about. The idea is that you can grow your community much easier if users are already on Twitter. As more of your general audience join Twitter themselves, they are introduced to the promo. Fathomer tries to work along the principal of gradual discovery of features.

If you are a Twitter user, you are most likely seeing Fathomer on this site. Its the orange badge in the top-right of the page.

Fathomer is a highly customizable tool that detects if a visitor to your site is a Twitter user and shows a badge, or ad, with your message and a link to your Twitter account.

It works by detecting if a user has visited the account settings page on Twitter, which is a URL you can only access once you have been logged in to the service. The user does not have to enter any personal account information, nor do you. You can configure Fathomer in many ways:

  1. Custom message – A default is used if none is set.
  2. Specify your account name. This is the only required piece of information and is used for display purposes only.
  3. Custom CSS and badge html – A complete default badge comes installed. Its possible to customize the CSS and even make your own html for the badge.
  4. Change detection url – You can change the Twitter url that is being checked if you need to.
  5. Target badge placement – By default, the badge loads in the top-right corner of the browser. However this can be changed to whatever load in whatever html element you want.

I’m also thinking about some improvements to the detection methods that could increase the precision of the targeted promotion. If there’s enough interest in Fathomer to warrant improvements, they’ll get added in. I’m also interested in adding some conversion metrics, but that takes Fathomer from being a simple and easy to install tool to being a larger project. If it grows, so will its capabilities.

You can visit the project page at http://code.google.com/p/fathomer/ or you can install Fathomer directly by adding the following script to your page somewhere and configuring the username and/or message.

All feedback is requested and appreciated!

<script type="text/javascript" src="http://fathomer.googlecode.com/files/fathomer-latest-min.js"></script>
<script type="text/javascript">
// Required. Your account name.
fathomer.account = 'yourAccountName';

// Optional. The message that is displayed.
//fathomer.message = 'Sample override message.';

// Optional. Can specify a specific element to attach to. ID, class, or css selector
//fathomer.target = '';

// Optional. Turn off default css if you have your own styles.
//fathomer.loadcss = false;

// Optional. Can be changed to a different Twitter url to check the visited history state.
//fathomer.urlcheck = '';

// Optional. If a custom html structure is needed, it can be loaded using standard jquery methods in altbadge. Properties are accessed/set via fathomer.var, e.g. fathomer.message.
//fathomer.altbadge = function(){};



Quick tip to save a lot of memory on your iPhone

There’s a great app called FreeMemory that quickly frees up a lot of memory. It’s definitely worth the $0.99.

The last update adds a great feature that let’s you see all of the processes running on your phone.

Last night I started noticing that sometimes MobileSafari stays running as a background process. This only seems to occur if you close Safari with a web page open.

In these screenshots, you can see what I mean. The quick tip to save a lot of memory is to close any open pages before you quit Safari. I didn’t use the free memory button on this. I just closed the page between uses in Safari

Twitter "protects" API user status call… but doesn't

John Resig alerting about the authentication change

UPDATE 2/24/09: Twitter has changed their API and this technique no longer works.

For the last week or so, there’s been a lot of commentary about how you could detect if a Twitter user was visiting your site based on the response of a public, non-authenticated API call. It was documented at Ajaxian.

John Resig was one of the first to notice earlier today that Twitter has placed the API call in question behind http authentication. Indeed, the link he provides to Venture Hacks issues a login alert when you visit the page.

However, this does absolutely nothing to prevent a 3rd party from still accessing this information. Twitter is likely to fix this soon, but here’s how to use it in the mean time.

Basically, the API url that is now issuing the authentication requirement was this:


By simply changing the query string slightly, you bypass authentication and retrieve the user’s status data again if they are logged in. This works without the “/?callback=” part, but this is needed to have have Twitter wrap the json object so that it can be used in the browser, ala jsonp.


If you use jQuery, the simple bit of code that returns this is:

dataType: 'jsonp',
data: '',
jsonp: 'callback',
url: 'http://twitter.com/statuses/user_timeline/',
success: function(jsondata) {

To use this to determine if a visitor is logged into Twitter or not, use the methods described in the Ajaxian article and just change the link. Happy hacking!

Javascript – RGB to Hexadecimal Color Converter

While working on a side project today, I found the need for an RGB to hex color code converter in javascript. There are a number out there within a couple of easy Google searches, but I wasn’t happy with any of the ones that I found.

Every example I found other people had posted over the years involves using a string using 0-9, a-f and then using character matching and some math shifting to return a hex conversion. This irked me because javascript is perfectly capable of doing these conversions with native methods.

So what you will run into from time to time is that some browsers like Firefox and Safari return the css color value of an element as an RGB format, like RGB(204,0,0). Other browsers, namely Internet Explorer, return the hex code, like #cc0000.

What I wanted was a reusable method that will convert an RGB value to the equivalent hex number. It also had to be flexible enough to not be abused if I pass in a hex or non-RGB value. This helps it play nicely across different browsers. Its using native javascript “parseInt” and “toString” methods to do the converting. So enough chit-chat, here’s the damn code. =)

rgbhex = function(rgbval){
var s = rgbval.match(/rgbs*x28((?:25[0-5])|(?:2[0-4]d)|(?:[01]?d?d))s*,s*((?:25[0-5])|(?:2[0-4]d)|(?:[01]?d?d))s*,s*((?:25[0-5])|(?:2[0-4]d)|(?:[01]?d?d))s*x29/);

var d='',e;
if(s){ s=s.splice(1); }
	if(s && s.length==3){
		for(i in s){
			e == "0" ? d+="00":d+=e;
		} return '#'+d;
	}else{ return rgbval; }

The Double-class/Double-ID CSS Hack for IE6 & IE7

I haven’t seen this CSS hack for Internet Explorer before. I encountered this by accident today while trying to work out an IE6 display error. My preliminary Google searches and few hours of research didn’t find this documented anywhere, but I highly doubt I’m the first one to encounter this. In any event, I’m tentatively calling this the “Double-class” IE hack. It lets you target IE6 specifically, or IE6 and IE7 both. I haven’t found a way to specifically target IE7 using this.

In a nutshell, if you want to target IE6 use two class periods:

..className{ /* styles here */ }

To target IE7 and IE6 both, double-declare the class name:

..className, .className{ /* styles here */ }

Or, an alternate way to do this and target both IE6 and IE7 is this:

., .className{ /* styles here */ }

This also works with IDs:

.#classID{ /* styles here */ } /* IE6 Only */

., #classID{ /* styles here */ } /* IE6 and IE7 */