2

I'm sorry if the title is not very good, any suggestions are welcome.

The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).

My issue in this case is that it covers the scrollbar on the right. I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.

What are my options for working around that? I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is? Is there a way to place the overlay at a position WITHIN the iframe instead?

Nathan H
  • 48,033
  • 60
  • 165
  • 247

3 Answers3

0

yes. just set the right to 40 for example right: 40px;

Atef
  • 73
  • 4
  • 1) If a page has no scrollbar, it will appear way off the side. 2) scrollbars have different widths on different computers. – Nathan H Mar 03 '11 at 00:49
  • ahh in that case you would need to run some javascript at the top of the page to change the right property of your box inline. somethign like this: – Atef Mar 03 '11 at 01:01
  • $(document).ready(function() { // Check if body width is higher than window width :) if ($("body").width() > $(window).width()) { document.getElementById("yourFlodboxid").style.right="40px"; } }); – Atef Mar 03 '11 at 01:05
  • I can only write javascript in the parent, not within the iframe. So the body is the body of the parent, which is always equal to the window. – Nathan H Mar 03 '11 at 01:50
0

There is an example here that shows you how to detect if an iframe has a scrollbar:

How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?

And there is also an example here that measures the scrollbar width

http://4umi.com/web/javascript/scrollbar.php

Once you know these you can place your overlay however many pixels from the right

Community
  • 1
  • 1
LostLin
  • 7,762
  • 12
  • 51
  • 73
  • 1
    I believe those only work if the code is written WITHIN the iframe no? As it's measuring the window height and the document height. Instead of the height of the document inside the iframe. – Nathan H Mar 03 '11 at 01:46
  • do you mean the second one? Because the first link talks specifically about scrollbars inside an iframe. And I'd assume that the scrollbar width would be the same on you page as inside your iframe. – LostLin Mar 03 '11 at 02:39
0

There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.

Community
  • 1
  • 1
Marcel
  • 27,922
  • 9
  • 70
  • 85