Make a web toolbar load on any webpage

I've created a toolbar in html that I need to be able 开发者_运维知识库to load of any given webpage; I'm thinking of loading it on the page through the use of a bookmarklet but I can't quite get my head around how I go about doing it.

An example of what a need to happen is as follows.

I navigate to any webpage on the internet, I click the bookmark for my toolbar and it appears at the bottom of the page without affecting any of the content on the page, it will stay fixed even when scrolling.

I've added a picture of how the toolbar will look, any suggestions on how I can implement the required functionality?

http://d.pr/bVeM

Many Thanks

What you will need to do is use CSS to keep it at the bottom. Basically you stick your toolbar html code in a <div> tag and then use CSS to keep it at the bottom. Try reading this link or this link on how to do it

Create a script file that you can host somewhere (if it's just for you, you can use localhost). In that script build the toolbar. Your bookmarklet will look something like this:

javascript: document.body.appendChild(document.createElement("script"))
    .src = "http://myserver/myscript.js"; void 0;

It wraps here for readability. It won't wrap in your bookmarklet.

The javascript: tells the browser you are executing a script. The void 0 at the end prevents the page from navigating to the return value of the JavaScript.