If you need a button on the edge of your browser, you might want to take a look at this jQuery plugin

How to use:

$(“#myEdgeButton”).edgeButton();

The options:

• buttonPrefix = Add a prefix to the classes (for multiple buttons on one page)
• buttonText = The text that is put in the button (can be empty if you use an image)
• buttonTop = Number of pixels the button is located from top
• buttonDirection = Location of the button: “right” or “left”
• buttonPosition = Behavior of the button: “fixed” or “absolute”
• buttonFunction = The function of the button:
  • “scrollTop”: onClick you will scroll to the top of the page
  • “scrollBottom”: onClick you will scroll to the bottom of the page
  • “scrollUp”: onClick you will scroll up to the next page
  • “scrollDown”: onClick you will scroll down to the next page
  • “link”: onclick you will go to the URL that is in the button (you need an anchor tag in the button with the class “buttonLink”)
• colorText = Color of the text inside the button
• colorBackground = Color of the background in the button
• rotateButton = Rotate the button: “rotateLeft”, “rotateRight” or “rotateUpsideDown”. This doesn’t work in IE or Opera
• debugInfo = Turn on if your button doesn’t work propperly. It will provide info about some possible explenations

More explenation:

If you are using buttonFunction “link” you need to add an anchor tag in your button. Give your anchor a class “buttonLink” and the button will use that link!

If you want to use a button with a background, you can easely do that by adding a img tag in the button. Give is a class “buttonImage”, and the button will automaticly use that image as background. It will also use the width and height of that image. The image will be loaded 500 milliseconds after the page is loaded!

Developed with jQuery version: 1.4.2

Download

Example / Download