Archive

Archive for March, 2009

Easily Create .htaccess Files Online with .htaccess Editor

March 22nd, 2009 No comments

In several web servers (most commonly Apache) .htaccess is the default name of directory-level configuration files. It provides the ability to customize configuration for requests to the particular directory. However, creating a .htaccess files can be tedious.

Now you can create .htaccess files easily online with .htaccess Editor. Simply fill in the form provided, you can then copy and paste the texts from the textarea box to your .htaccess files quickly. Please feel free to suggest your other favourite .htaccess online generators as well…

 

htaccess-editor

Categories: Webmaster Tools Tags: ,

Captify Displays Pretty Image Captions Appear On Rollover

March 22nd, 2009 No comments

Captify jQuery Plugin displays simple, pretty image captions that appear on rollover. Captions can be locked “always-on”, or set to fade in on rollover. Also, captions can slide in from the top or the bottom.

Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. unlike ImageCaptions at the moment, Captify is easy to use, small/simple, and completely ready for use in production environments. Captify has been tested on Firefox, Chrome, Safari, and Internet Explorer.

 

jquery-captify

Categories: Designing Tags: ,

Rendering Text With Javascript, Canvas And VML

March 21st, 2009 No comments

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.

 

typeface

Categories: Others, Programming Tags: , , ,

TinyTable – Easy to Use Javascript Table Sorter

March 21st, 2009 No comments

TinyTable is a JavaScript table sorter script is easy to use and feature packed at only 2.5KB. There are many features great include column highlighting, optional pagination, support for links, date/link parsing, alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. Also, the table styling is completely customizable via the CSS.

TinyTable has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. This script is available free of charge any project, personal or commercial, under the creative commons license and is offered AS-IS, no free support provided.

TinyTable

Odometer Style Javascript Counter in Mootools

March 21st, 2009 No comments

UvumiTools Odometer is an odometer style Javascript counter, where you can actually see the numbers spining. It is a Mootools plugin requires no Flash, it’s all CSS and Javascript. It can serve multiple purposes, like a live visit counter or a cashier style counter on a shopping website. It can be anything that involves updating a numeric value dynamically.

UvumiTools Odometer can be be updated manually or you can set it so it periodically calls a server script via an AJAX request and uses the returned value as a new target. This is also easy, you just need to specify the URL to that script when you initialize the counter. If the difference between two values is too big and the counter is spinning for several minutes. You can directly jump to the targeted value by simply double-clicking on the counter.

 

odometer

Categories: Webmaster Tools Tags: ,

FlashEff Contest Results

March 21st, 2009 No comments

Last week you were asked what you thought the best web design tool is. To sweeten the deal, the kind and talented folks over at jumpeyecomponents.comdecided to give away five licenses to their wonderful Flash effects component called FlashEff worth $199.00 U.S.D. a pop.

flasheff_leading_image

Over 270 people cast there votes, and today, I’m pleased to announce the five lucky winners.

The winners are…

Bryce – comment # 29752
Sirmc – comment # 29738
Delon Summersett – comment # 29731
Roman – comment #29596
Minksy – comment #29589

Screenshot

Here’s a screenshot of the MySQL query:

flasheff_sql_results

More contests on the way!

There are more similar contests in the coming weeks. If you’re interested in these types of contests, you should subscribe to the RSS feed so that you can be notified as soon as a contest is posted.

Thank you jumpeyecomponents.com

On behalf of Six Revisions, I’d like to thank jumpeyecomponents.com for offering up such a wonderful prize. There are already talks of even more jumpeyecomponents.com contests like this, so stay tuned!

Stay tuned for the follow-up article

The results of the previous contest will be tallied up and published in another article, so please do watch out for that.

Categories: Designing, Others Tags:

12 Excellent Tools for Picking a Domain Name

March 21st, 2009 No comments

Selecting the perfect domain name for your website is the most important, and oftentimes hardest, step in establishing a web presence. There are plenty of tools out there that can help you ease the burden of checking available domains and suggesting similar names that are related to your searches.

In this article, you’ll read about 12 neat web tools that will lend you a hand in finding and choosing domain names. You’ll find a variety of search and suggestion tools that have an assortment of features so that, hopefully, you’ll discover a few favorites.

1. Domainr

domainer

Nowadays, it’s difficult to find a domain name that end with the popular .com, .net, and .org TLD’s. Domainr is an innovative web tool that helps you explore other TLD’s that have made popular websites like last.fm and del.icio.us stand out from the crowd. Of course, searches will also include popular top-level domains that are available.

2. Dot-o-mator

 

dot-to-mator

Dot-o-mator is a web tool that suggests site names based on prefixes and suffixes that you’ve entered (keywords). Alternatively, you can use a category of prefixes (like "Tech" or "Games") and suffixes (like "Hardware" or "Web 2.0 words") to generate suggested site names for you. It’s a helpful tool for, at the very least, obtaining inspiration for a site name.

They also have a fun tool called Web 2.0 Domain Name Generator that generates "Web 2.0" site names like "Yakidoo" or "Zoompulse".

3. BustAName

 

bustaname

BustAName is a robust and feature-packed domain finder that uses linguistic data to help you search domains. BustAName allows you to save and manage/organize your searches for later use. It has a "List of Words" feature that advise you of similar words to your search – which you can then organize inside folders.

Available domains that are returned can be sorted in a number of ways such as "by quality (readability)" or "by length" for easier viewing. Though the web tool is very intuitive, the creators have a video tutorial on how to utilize BustAName.

4. Domain Tools

domaintools

Domain Tools is a set of domain name search engines that will help you uncover relevant information about certain domain names. They have a "Whois" search that reveals records about the party who registered the domain, a "Suggestions" search to help you find similar domain names, a "Domain Search" which shows you what TLDs of a domain name are available, and domain names that are "For Sale" or "At Auction".

5. Domize

 

domize

Domize is a fast, Ajax-based search engine that you can use to rapidly check the availability of domains. Domize has a widget that you can install on your website to provide a domain search engine to your visitors. Domize also has an iPhone app – because domain name inspiration can hit you at anytime (hopefully you have your iPhone with you when it happens).

6. squurl

squurl

squurl is another fast Ajax-based domain search engine. It has a "Suggestions" feature to help you discover similar domains to the ones you’ve typed.

7. DomainsBot

domainsbot

DomainsBot is a domain search engine that has an "Advanced" search feature so that you can conduct a more customized and refined search. For example, you can set the maximum domain character length to eliminate lengthy domain names from the results or exclude domain results that have a hyphen (-).

8. dnScoop

dnscoop

dnScoop tries to estimate the value of a particular domain based on several statistics such as site traffic, links pointing to the domain, and other factors. This will help you gain some insight on the value of a particular domain name in case the name you really want is "for sale" and you want to see if the asking price is fair, or to make an offer to a site owner that owns the domain you really want.

9. StuckDomains

stuckdomains

StuckDomains is a database of expired domain names that previous owners have not renewed. This can be an opportunity to find a domain name that doesn’t involve odd names like "fujiyakuku.com".

10. Nameboy

nameboy

Nameboy is a popular domain name generator. This straightforward web tool asks for a "Primary Word" and "Secondary Word" that describe the topic of your website, and based on your input, it suggests possible domain names.

For example, typing in "web" as the Primary Word and "superman" as the Secondary Word returned results such as webhero, supeweb and supermanweb. There’s a "Rhyme" option that tries to suggest domain names that rhyme with the search phrases, but the feature didn’t seem to work on the above example.

11. dyyo.com

dyyo

It’s common practice to keep domain names as short as possible so that it can be quickly typed and also so that they’re easier to remember. dyyo.com specializes in helping you find 4-letter domain names to keep your URLs terse.

12. Ajax Whois

ajaxwhois

Ajax Whois is a simple Ajax-based domain search that makes domain-name-hunting effortless and rapid. To make your searches even faster, they have a set of useful keyboard shortcuts to satisfy the power user in you.

Categories: Others, Webmaster Tools Tags:

Best Text Editor for Developers? 10 Prizes to Give Away.

March 21st, 2009 No comments

When building a website/web application or editing your source code, sometimes all you really need is a trusty text editor.

best_text_editor

We’d like to know what you think the best text editor is.

To make things interesting, the people over at SSLmatic, a SSL service offering RapidSSL, Geotrust and Verisign SSL certificates for up to 70% discounted prices, are offering 10 RapidSSL certificates, each worth $19.99 a year, to 10 participants.

How to participate

Simply state your vote for the best text editor in the following format:

vote: name of text editor

The details
  • Leave a valid email address in the comment form so that we can reach you.
  • You can only vote once.
  • Contest ends on March 23, 2009 after which commenting will be disabled.
  • Winners will be randomly selected via a MySQL database query similar to previous giveways.
  • Only one vote will be counted per person. If you mention more than one text editor, only the first text editor that you mention will be counted.
About SSLmatic

SSLmatic is a provider of cheap ssl certificates. They currently offer SSL certificates of 3 major SSL brands for discounted prices, and you can find out more about them in their Certificates / Prices page. Want to learn more about SSL and SSLmatic? Check out their FAQ page.

11 Excellent Twitter Improvement Ideas

March 21st, 2009 No comments

Last week, I wrote about 10 Features That Will Make Twitter Better – the response was astounding and many people contributed their own ideas in the comments.

What became clear was the need to write a follow-up article that discusses even more user interface suggestions that can improve the Twitter web experience. To provide a well-rounded mix of ideas, the article would have to be from a combination of authors that contributed to one article.

What follows are ideas by ten professionals from different various spheres of expertise.

1. Location, location, location: the Twitter @Locals tab

Jason Finch, Blended Networking Evangelist, The dotSno Project / @dotsno

One of the greatest benefits of Twitter is being able to connect in real-time with conversations going on between those you follow, enabling you to become part of a global conversation on topics in which you have a shared interest. Any time of day or night you’re able to jump into the conversation. Imagine the power of combining this with local knowledge and conversations with local people who you have yet to discover. Think about who is around right now, on your block, talking about the stuff in which you’re interested, the strangers in the coffee shop a few blocks away tweeting about the very subjects that fascinate and engage you and who could easily become your friends. Run along, go meet them!

locals_tab

Introducing a @Locals tab to Twitter would enable you to connect immediately with those around you in the physical world. Clicking it would show the tweets happening around you, right now, wherever you are; integrating the tweets with a 3D virtual world would enable you to ‘walk through’ conversations happening in your neighborhood; it would enable Twitter to show conversation "hotspots" where ideas and thoughts are developing; it would start your journey into blended social networking, creating a seamless connection between your online conversations and your offline relationships, whether business or personal.  As social animals, we find the human web to be a great place, but nothing can replace face-to-face contact. The @Locals tab would blend everything by combining "time" and "place".

Twitter’s existing location awareness is poor and even third-party applications can rely only on the data presented by Twitter, with some people providing only their city or their country. By enabling us to accurately specify our location, and by providing the security of allowing us to provide exact location without it being revealed publicly, Twitter could provide us with so many more services on a local basis. The guy on the next block really needs two extra bottles of vodka for the party and you can join in too if you bring one! The business owner around the corner desperately needs some flyers printed before this afternoon, you can have the work if you deliver the order to her door. Traffic is getting backed up thanks to a traffic accident near the location of your next meeting, you can avoid it simply by checking out the local tweets.

We don’t need to be precise about our location, broad localization can still bring people together, enabling serendipitous discovery of new friends and relationships. Like the farm-hand who looks for the needle in the haystack, only to find the farmer’s daughter, so we may find extraordinary new relationships on our doorstep simply by clicking the @Locals tab and interacting with our neighbors.

2. Time Shifting Prime-Time Tweets

Arley McBlain, Web Designer / Developer, Debut Creative / @ArleyM

setting_prime-time

By Arley McBlain

The concept of Time Shifting tweets is a simple one and has been used throughout other broadcasting media for decades. It is my opinion that Twitter, like anything else has Prime-Time. For example, one of the first web developers I started following was @boagworld. He is currently in GMT (+0.00), and I am in EST (-5.00). From my perspective, as an office employee his Prime-Time will be his 9am – 5pm. I am following him and many others to see how the giants of the industry work. Sadly, when I get to my computer in the morning he’s already going for lunch! I am not dedicated enough to see what those I am following have been up to for the morning, so onward the day goes. Before too long he has gone home and is tweeting about his free time while I am still working away. While there’s nothing wrong with his "non-prime-time" tweets, I am following him because of his expertise in the field. Wouldn’t it be nice if when you got to your computer you were seeing everyone’s "hello world" messages in the context of your day?

The benefits of this are obvious: seeing more of what makes the rock-stars of this industry tick, seeing what your friends from around the world are doing in context of the day. This feature is not without it’s problems though.

For one thing it only works for people you are following East of your location. So what do you do about users to the West? The easy answer is "too bad". For me, someone like @dburka from the West Coast (PST -8.00) would have to be either set to -21 hours (which is arguably way too long in the twitterverse), or have some kind of rotating time scale where the balance of the 9 – 5pm day wraps-around the next day. This is disorienting and only works for people using Twitter from 9 – 5. Naturally @replying to any time shifted tweets would be senselessly out of context for the followed, but by clicking their tweet you could go to their profile page to see the message in context.

tweets_in_context

By Arley McBlain

Brainstorming this feature raises a lot of questions. Would you set the Prime Time by the followed user, or globally for time zones? Could I as a Twitter author choose to shift my tweets for those who follow me, or conversely would I have the option to decline time shift? Who knows, but I love the extreme example of kids years from now setting Prime-Time to -20 years to follow the pioneers of the internet in the context of their days.

3. Add Pagination with date select to search through archived tweets.

Charity "Shelly" M. Colvin, Multimedia and User Experience Design Specialist / Texas Dream Designs, @Texasbrat

update2

By Charity "Shelly" M. Colvin

Currently tweeters often get frustrated when they need to locate a tweet from someone they are following.  Twitter prides itself on the idea that less is best, and on this theory, the best solution to reduce the convolution is to incorporate pagination.  Since tweets are organized by time stamps incorporating a calendar drop down with pagination will enable users to pick which date they wish to view tweets.
This will provide users with a quick and simple method of searching through their archived tweets.  This also practically eliminates the need to press the dreaded “older” button a hundred times.

Since Twitter is already using pages to catalog tweets, implementation of this feature shouldn’t affect the results as far as SEO (search engine optimization).

  • View a clickable prototype
4. Follow these tweeps!

Adam Pieniazek, Co-founder – Writer, Consultant & Host,

The 42nd Estate / @AdamPieniazek

At one point or another nearly every Twitter user asks the same question: who should I follow now

Twitter could and should utilize our existing connections and interactions to recommend additional tweeps to follow. There’s already an application, WhoshouldIfollow, which suggests users to check out, but integrating this feature into Twitter’s web interface would ease the transition to Twitter for newcomers and help all of us find good users quickly and easily.

For example, say you go to mommyblogger’s profile and choose to follow her, a small field right below the follow button could show who else her readers are following. After clicking follow, a box would appear stating: Tweeps who follow mommyblogger also follow IamMom, iTwitmykids, and howtomothermytweeps, with links to those users’ profiles. Twitter could also list mommyblogger’s closest contacts. After you click follow on her profile, Twitter would list the three users she most often tweets with or about.

Twitter could also implement a you should follow feature in the sidebar that would combine the data from our current relationships and communications to list a few users you would enjoy following. As you choose to follow or not follow tweeps from the sidebar, Twitter would pick up on your tendencies and then analyze which data set is most likely to suggest someone you’d actually end up following, refining itself over time.

The addition of user recommendations to Twitter’s web interface would significantly lower the barrier to entry for new users and keep veterans up to date on the latest people they should follow. The one big unknown is the effect the extra data and analysis would have on Twitter’s servers, though much of this data is already there. If the Twitter team could implement these features without compromising speed and stability, it would greatly improve our ability to find users we should follow.

5. Mark Tweets as Seen

Japheth Thomson, Web Developer, Japheth Thomson / @japh

Monitoring your tweets between all the different avenues available can be quite challenging at times.  At home I use TweetDeck, in the office I use TweetDeck, in between times on my iPhone I use Tweetie, and occasionally I’m in a spot where I need to use the web.

With so many different platforms, and so many tweets streaming past all the time, it can be difficult to keep track of which ones you have an haven’t read.  TweetDeck has a feature to mark tweets as "seen", but as this doesn’t actual carry between installations, or to other applications, it’s actually not as useful as it could be.

I admit this may not be as useful for the web interface as it would be across applications.  Having it added into the Twitter API would enable the various applications to utilise the feature, and make for a much more seamless Twitter experience, however you choose to use it.

6. ReTweet Button

Ted Graf, Front-End Web Developer, TedGrafx / @tedgrafx.

For the longest time the need for a "ReTweet" button has seemed obvious to me.

In my opinion it should be a simple, small icon nestled neatly near the "Favorite" and "Trash" icons.

My vision is simple, and would work like this:

Once a user clicks the "ReTweet" button, it would automatically place the entire message you’re re-tweeting into the Update text box like so: "RT: @username user’s message" – giving the user the option of adding their own bits to it. This would save the user the hassle of copying/pasting this every time. I wouldn’t know of any reasons why this may hinder this feature’s implementation.

retweet_pagination. By Ted Graf

*NOTE: As I’m writing this I noticed a tweet from @mashable about PleaseRT.me.

7. Newer / Older + Pagination

Ted Graf

I’ve tweeted @twitter about this in the past and it seems to make sense – at least to me.

I can only speak for myself here, but when I sign on in the morning, I usually want to catch up on what I’ve missed overnight.

So, my practice has been to go "back" to the page that had my "goodnight" tweet and read on from there, which usually takes me back 5-10 pages.

It would be terrific to have the "Older / Newer" navigation at the TOP of the list as well as at the bottom.

retweet_pagination.

By Ted Graf

And while we’re at it, why not add some page numbering (pagination) to that navigation as well? This would save the user time by not always having to scroll to the bottom of the page to go back or forward – buy only one page, mind you. Again, I wouldn’t know of any reasons why this may hinder this feature’s implementation.

8. Search users by tags

Joerg Pfennig, Internet Product Manager,

What’s still missing is a tagging for the users themselves.

By allowing users to tag their profile with keywords that they’re interested in, you will have the option to not only search for tweets with some relevant content in it – but also for user profiles containing these keyword tags.

This is a web 2.0 feature you can already find, for example, on business networking platforms such as LinkedIn, where you usually tag your main competencies

In Twitter you could use your profile tags to describe, for example, your main interests or hobbies, with which you want to be found by others. That way you can find users with whom you share the same interests without waiting until they drop "the keyword" in one of their tweets.

Maybe you are a real cat’s lover – but do you use "cat" in every single tweet because of this? See.

To prevent misusage/spam the profile tagging should be limited to a small number like 3 to 5.

9. A notification system of relevant tweets

Cesare Rocchi, RIA Designer and Developer, Studio Magnolia / @funkyboy

Twitter is a great source to find smart answer to smart questions.

Many have proven the question-answer scenario: ask a questions a get replies almost instantly and this can be considered the top feature which fits your quick question needs.
There’s more. Twitter is a sort of river of thoughts where many people pass by and drop some tip.

If you are interested in a field I think twitter is the best way to have an almost up-to-date knowledge of that field. But sometimes you don’t have enough time to sit down by the river and look when an interesting drop passes.

A notification system can be really helpful in such a scenario.
Say I usually am able to keep track of what I am interested in on Twitter. Say for a week I am out of office (e.g. to a conference) and during the day and busy talking and gathering new clients.

For sure I have no time to check out what’s happening on twitter, and during a week many thoughts pass by in the twitter river.

This can even lead to some frustration. I could do a quick check in the evening but I might be already overwhelmed by tons of emails.

I suggest to implement a functionality that allows me to set periodical searches over twitter (by string or by pragma, e.g. #swsx) and receive the results on the channel I prefer (email, sms or even im). This way I am sure that someone will collect the stuff that I like and I will receive it the way I like it.

Of course there are potential problems in the implementation of such a feature. For example databases might not like too frequent searches. Real time notification over IM (or push technology to dekstop applications) can be even more challenging. In any case
I think such a feature will enormously enhance the fruition of Twitter drops.

10. Ability to Mark Direct Messages as a Favorite

Invoice Ninja, Guest Writer, SugarPatch / @InvoiceNinja

A new feature that I’d most like to see Twitter implement is the ability to favorite direct messages. Obviously the whole point of DM’s on Twitter is to have conversations privately without them appearing in your feed, and likewise, I don’t mean that DM’s should have the ability to appear in the publicly available favorites tab.

What I mean is that within the DM’s screen, I’d like to have the ability to star them as well, and have a separate tab to view them. Twitter has various uses for everyone, and for me, it gives me the means to keep in touch with long-distance friends who are always online but can’t call me. It’s made it possible for me to turn my tired old cell phone into an instant messaging client of sorts – they can DM me, and I can receive them and reply at any time wherever I may be.

It’s a wonderful thing, but the end-result is hundreds of DM’s saved up, and a good handful of them are those special ones where they’ve really made me laugh or brightened my day. By being able to star them and pull them up separately, I could reread them without digging through countless pages, and I’d be sure that I never accidentally deleted them or anything. I’m inclined to think that it’d be very simple to implement, and I can’t really see any drawbacks to it, especially since it doesn’t affect the actual feeds whatsoever. It’s always a good thing to be able to get a little more organized!

11. Easier way to post links to tweets.

Maija Haavisto, journalist and medical writer, Fiikus / @ DiamonDie

easier_tweets

Twitter users sometimes post tweet links to other users’ tweets. Currently the only way to do this is to copy & paste the URL of the tweet and you may also have to use TinyURL or a similar to shorten it, because the URLs are rather long.

Many websites use easier methods of posting links to content on that site. DeviantART, for example, allows users to post thumbnails of a particular Deviation (piece of art) by using the syntax :thumb########: where the #’s denote the number of a Deviation. Similarly Twitter could allow us to post a link to a particular Tweet by using the syntax :########: where the #’s denote the number of the tweet, already visible in the URL. So you could write :12345678: and it would translate to a link to tweet number 1234578.

To make things even easier, the web interface should include a button (similar to the Reply and Favorite buttons) for linking to a particular Tweet, which would automatically create a link using the aforementioned syntax.

Categories: Others, Tips and Tutorials Tags:

Create a Nice, Lightweight JavaScript Tooltip

March 21st, 2009 No comments

Editor’s note: This tutorial was written by Michael Leigeber, a web designer and .NET developer who runs the Leigeber Web Development Blog- a blog that’s setting the blogging community buzzing with his beautiful, lightweight JavaScript solutions.

Introduction

To begin, create the 3 files needed for this tutorial (index.html, style.css and script.js) and include the stylesheet and the script from index.html. To make things easy the starter files are available by clicking here. 

The most important things to remember when writing JavaScript are to keep the code simple and to script logically. The first thing that needs to be established is precisely what you would like the script to accomplish. Based on the desired functionality it then helps to create a diagram or flow description for any complex script before you get into the code. Doing so can help streamline the logic and keep the script clean.

What we are trying to accomplish…

Create a lightweight script that fades a tooltip with rounded corners in relation to the cursor position.

How does the script need to flow…
  1. Setup the namespace and global variables.
  2. Create a function to display the tooltip that takes two variables, the string to display and an optional width integer.
  3. When the function is called build the tooltip markup if it does not exist and register an onmousemove listener to position the tooltip. Insert the tooltip content into the tooltip and call a function to incrementally fade the tooltip to the target opacity.
  4. On the mouseout event of a “hotspot” reference a function that calls the fade function to incrementally hide the tooltip.

Let’s begin by setting up the JavaScript file. We want to create a namespace to encapsulate the functionality of our script. By doing so, we virtually eliminate the possibility of a conflict with some other script or framework.

var tooltip(){
	return{};
}();

Next, we need to add any variables we want to include on the global level of the namespace. By setting these variables globally we can access them in any of the child functions and quickly change them without sorting through the code.

  • id (string) – id of the tooltip
  • top (integer) – number of pixels to offset the tooltip from the top of the cursor
  • left (integer) – offset to the right of the cursor
  • maxw (integer) – maximum width in pixels of the tooltip
  • speed (integer) – value to increment the tooltip opacity during transition
  • timer (integer) – represents the speed at which the fade function in performed
  • endalpha (integer) – target opacity of the tooltip
  • alpha (integer) – current alpha of the tooltip
  • tt, t, c, b, h – these represent global variables to be set later
  • ie (boolean) – global variable based on browser vendor
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;

We need to determine how we want the tooltip to look so we can figure out how to build out the elements to add to the DOM… a rectangle with rounded corners on the top and right corners only. To accomplish this we need a wrapper div and then three nested divs. We can style the divs with the CSS. The markup should look something like this once generated.

<div id="tt">
	<div id="tttop"> </div>
	<div id="ttcont"> </div>
	<div id="ttbot"> </div>
</div>

The first function we will name ‘show’ and it will be accessible by calling tooltip.show(). It will need to take two parameters… the content string and an optional width integer. To begin, it will need to check and see if the tooltip has been added to the DOM yet. If it does not exist the divs need to be built and added to the body. Either way the innerHTML of the contentdiv will need to be set to the content parameter, the height and width set and the fade function set to a timer.

show:function(v,w){
if(tt == null){
 tt  = document.createElement('div');
 tt.setAttribute('id',id);
 t  = document.createElement('div');
 t.setAttribute('id',id  + 'top');
 c  = document.createElement('div');
 c.setAttribute('id',id  + 'cont');
 b  = document.createElement('div');
 b.setAttribute('id',id  + 'bot');
 tt.appendChild(t);
 tt.appendChild(c);
 tt.appendChild(b);
 document.body.appendChild(tt);
 tt.style.opacity  = 0;
 tt.style.filter  = 'alpha(opacity=0)';
 document.onmousemove  = this.pos;
}
tt.style.display  = 'block';
c.innerHTML =  v;
tt.style.width  = w ? w + 'px' : 'auto';

if(!w  && ie){
 t.style.display  = 'none';
 b.style.display  = 'none';
 tt.style.width  = tt.offsetWidth;
 t.style.display  = 'block';
 b.style.display  = 'block';
}

if(tt.offsetWidth  > maxw){tt.style.width = maxw + 'px'}

h =  parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer =  setInterval(function(){tooltip.fade(1)},timer);
},

The next function we need is the position function that will set the top and left values of the tooltip as the cursor moves. First we calculate the position based on the browser and then we set the values taking into consideration the global offset variables.

pos:function(e){
 var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
 var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
 tt.style.top = (u - height) + 'px';
 tt.style.left = (l + left) + 'px';
},

Next we need to create a function that will fade the tooltip from its current opacity to the target opacity based on the direction variable that is passed to it.

fade:function(d){
 var a = alpha;
 if((a !=  endalpha && d == 1) || (a != 0 && d == -1)){
   var  i = speed;
   if(endalpha  - a < speed && d == 1){
      i  = endalpha - a;
   } else  if(alpha < speed && d == -1){
      i  = a;
  }
  alpha  = a + (i * d);
  tt.style.opacity  = alpha * .01;
  tt.style.filter  = 'alpha(opacity=' + alpha + ')';
   }else{
     clearInterval(tt.timer);
     if(d  == -1){
     tt.style.display  = 'none';
  }
 }
},

Finally the function to hide the tooltip onmouseout.

hide:function(){
	clearInterval(tt.timer);
	tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}

That completes the JavaScript. We are left with a 2kb script that is compatible with IE6, IE7, Firefox, Opera and Safari.

Here is the full script
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();

Now on to the CSS for the tooltip which is completely customizable to match any interface.

#tt {
 position:absolute;
 display:block;
 background:url(images/tt_left.gif) top left no-repeat;
 }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 background:url(images/tt_top.gif) top right no-repeat;
 overflow:hidden;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}

To build and hide a tooltip call the script as below. The second parameter in the show function is optional, if not passed the width will automatically adjust to the content within the maxh limit.

onmouseover="tooltip.show('Testing  123 ', 200);"
onmouseout="tooltip.hide();"

If you run into any issues with this script or have any questions don’t hesitate to contact me at my blog’s contact form.

Categories: Webmaster Tools Tags: ,