Javascript: How do I add a top bar to a short url?

I've been trying to understand how is possible to develop a bit.ly style URL shortener which also adds a bar to the website.

For example: http://om.ly/BSdZu

There's a group on twitter that shares all their URLs starting with "om.ly" and they have a top bar in each of the URLs they share.

How is that done? I imagine is with JavaScript but how? Also, is there any service you know th开发者_开发问答at does that so I can understand how?

you can do this in 2 ways (at least):

• via framesets -- not recommended as it's old style; but you can set the top frame to display your toolbar and the bottom frame set the url to the page
• via iframes -- have your url load a page from your website which shows to iframes: the top one is your toolbar and you display in it whatever you want, and the bottom one you set the url to the long url. This is how bit.ly, linkedin and many others do it.

you can do this by

 position: fixed;

see this example

There are many different methods, but my preferred method would be to make a DIV field, and tell it to float: example code here

EDIT

Here's the basic code you need:

    <div id="fixeddiv" style="position:absolute;width:200px;height:50px;right:10px;top:10px;padding:16px;background:#FFFFFF;border:2px solid #2266AA">  
    This is a (Javascript/CSS) Fixed menu.  
    </div>