Creating a floating button

Posted by Robert Smith on Stack Overflow See other posts from Stack Overflow or by Robert Smith
Published on 2010-09-17T17:29:44Z Indexed on 2010/12/26 8:54 UTC
Read the original article Hit count: 168

Filed under:
|
|
|
|

Hey all,

I'm working on a Firefox extension and am out of ideas on how to implement a floating button. I need a button that is overlayed on my page that I can show/hide and dynamically position just about anywhere on my page. I thought I could do something like a fancy CSS tool-tip except replace it with button functionality, but that idea failed because I couldn't pull my example apart well enough to understand what all I need to include, need to change, etc.

I've thought about using jQuery(though wouldn't mind avoiding, unless it makes this painfully easy) but will be looking more into that as a possibility now. If anyone can offer a tutorial link, ideas, sample code, anything to help get me moving in the right direction I will greatly appreciate it!

Thanks!

Edit: Clarification

I'm not entirely sure how to actually create the overlayed button. I tried to create a a floating div with some text in it, and nothing showed up, but I got no errors, which means I'm doing something wrong, but I have no idea what that is. http://www.fijiwebdesign.com/blog/css-tooltips-floating-html-elements.html If you take a look at that webpage you see that there is that floating "feedback" button, I would like to create something similar, only it wouldn't be anchored to the sides, but I could position it over text, etc.

#floatingBtn
{
  position: absolute;
  z-index: 10000;
  top: 50%;
  left: 50%;
}

Thats the CSS I used to try and float my div. I don't know if I'm creating the div in the wrong place or... I thought if I could get a floating div with some text, I could turn that into my button.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery