1

I am developing a cross-browser extension (add-on) that sits on the right side of each page. Right now, I overlay the sidebar on top of each page. But I'd prefer to have it sit on the side of each page on its own, not hiding any part of the parent page. I've been searching around for an answer to this with no luck. There seems to be built-in methods for creating sidebars in some browsers. But I am looking for a technique that involves only html and css (and jquery if need be).

As an example of what I'm looking for, the google Related extension sits at the bottom of each page but actually pushes up the page's content when it loads.

enter image description here

The Widgya add-on is part of the parent page's content, and you can see how Google Related pushes it up to avoid intruding on the page. This is the relevant html from the Related extension:

<div style="clear: both; height: 46px; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; "></div>
<iframe class="grelated-iframe" frameborder="0" id="grelated_iframe_189" src="http://www.gstatic.com/webgps/grelated_0_6_9/html/grelated_bar_iframe.html" style="z-index: 2147483647; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; vertical-align: baseline; position: fixed; bottom: 0px; left: 0px; right: 0px; top: auto; width: 100%; height: 49px; " scrolling="no"></iframe>

Using a div that invokes 'clear: both' and an iframe that is absolutely position, the effect is achieved. But I cannot seem to reproduce this effect on the right or left side of the screen. I've tried various methods with no success. I'd appreciate any insight into an approach to take.

Thanks

Update:

Here's the effect I'm trying to achieve:

enter image description here

Chrome has/had an experimental sidebar api, but I need the capability to do this in css & html without relying on a browser-specific api.

Community
  • 1
  • 1
Matt De Leon
  • 747
  • 1
  • 7
  • 15

1 Answers1

0

Do you mean "position: fixed"? I dont think "clear: both" could make the bar fixed on a certain position when scrolling.

A simple example is the notification bar on

http://chat.stackoverflow.com/
OpenGG
  • 4,345
  • 2
  • 24
  • 31
  • "clear: both" is being used by the Google Related extension. I'm assuming they wouldn't have included it if it wasn't necessary. Also, I am currently using "position: fixed" to keep my sidebar in a stable location, but what I'm looking to do is actually create a sidebar that is a separate frame. This way my sidebar won't overlap the page's content. – Matt De Leon Aug 31 '11 at 06:14
  • "clear:both", its job is to clear floating. See http://www.w3schools.com/cssref/pr_class_clear.asp – OpenGG Aug 31 '11 at 11:26
  • As for iframe, my suggestion is don't do that way. You can either write some extensions for browsers, or use javascript/jquery to load an iframe/div into the main pages. – OpenGG Aug 31 '11 at 11:29
  • I intend to load an iframe/div into the main page using jquery. My question is what exactly to insert and what css properties should it have to make a sidebar possible? – Matt De Leon Aug 31 '11 at 15:51
  • I wrote a user script for my school's BBS. It's probably not a well-written one, but it shows how ajax works. https://bbs.sjtu.edu.cn/frame2.html http://userscripts.org/scripts/review/107297 – OpenGG Aug 31 '11 at 23:12