I need to achive the following requirements by use of CSS/JS in page. Do not rely in using the style tags in the header of the page, all style attributes must be in the JS. There might be multiple instances of the toolbar within the page, so make sure each instance can have its own setting and still work.
There is a toolbar div (it basically holds 5 other divs with an icon each - you can use some dummy 15x15 or 20x20 icons) nested within a parent div. I can specify through use of JS (function call with parameters) if the toolbar div:
- is displayed always or on mouseover of the parent
- if it is displayed/docked within the parent, or outside the parent (visually overlayed on top of the parent - or outside the parent). I need to also specify the disdtance from the parent border in pixels.
- which corner is displayed on : the top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom.
Do not rely on the id of the parent DIV. Either rely on the fact that is the parent.
Use camelCase for functions. Start private functions (helper functions) with "_" like "_privateFunction()".