views:

1467

answers:

5

When i call window.open, I can include a list of parameters. One of these paramaters is scrollbars, which can be set to yes or no.

When I put javascript in the child window, the javascript needs to detect if scrollbars were set to yes or no when the window was opened. I want to know if the window has scrollbars enabled by default or not.

I only care about doing this in IE. How do I check? window.scroolbar does not work in IE.

How do I do this? To be perfectly clear, I'm not talking about div overflows, I'm talking about the scrollbar property of the window.

edit:
- I am in IE so window.scrollbars/this.scrollbars won't return anything
- The windows scrollbars exist outside the body.
- Looking at the document's width will tell me about the document. I can even figure out if there are scrollbars in the document. This will not tell me anything about the window itself.
- The width of the window's scrollbar changes dependent on what the currently selected Windows Desktop Theme is, for ascetic reasons.

A: 

Try this

scrollwindow = window.open("file.htm", "anotherwindow", "width=400,height=250");
  if (scrollwindow.scrollbars) 
  {
alert("Yes we have  scrollbars");
  }
 else 
{
    alert("Sorry doesnt support scrollbars");
  }
streetparade
While that explains how to check from the parent window, how can the child check? I'm talking about javascript that's present in file.htm
diadem
A: 

This is a little hacky, but it seems to work:

function has_scrollbar() { 
    if (document.documentElement.clientHeight < document.body.offsetHeight) {
        alert("vertical scrollbar");
    } else {
        alert("no vertical scrollbar");
    }
}

You check the size of the offsetHeight (html content) and compare it with the documentElement.clientHeight (window height for IE). You can switch out "width" for "height", obviously.

Hope this helps!

Stephano
Unfortunately, this does not work in IE.window.scrollbars and this.scrollbars is not supported in ie
diadem
Ah wonderful. You can always count in IE :) . What version are you using?
Stephano
IE7 or IE8 under IE7 compatibility mode. IE8 standard mode has hard crashes with certain types of valid html (caused by two stylesheet bugs giving conflicting orders), so we always force compatibility mode.
diadem
edited the code. if you put that in the "popup window" it should tell you if it has a vertical scrollbar.
Stephano
I'm afraid that only tells me the document width. It doesn't take into account that little gray bar to the left of IE that lets you resize the window or the scrollbar to the right. When you call window.resize it takes both of those to account, so i need to know the actual window width, not just the width of the document inside the window before the application adds padding.
diadem
+8  A: 

Alongside your script that opens the child window (the one where you set scrollbars=yes or no), add a window-level variable that's true if scrollbars=yes, or false if no.

Then in your child window's script, you look up the value that's been set from self.opener.myWindowLevelVariable.

You could also namespace the variable. The important part is self.opener or window.opener if you prefer.

Update:

In response to your update about not wanting to use a variable in the parent...Then reverse my initial suggestion. Put the variable in the child when it's created.

Parent:

var scrollwindow = window.open("file.htm", "anotherwindow", "width=400,height=250,scrollbars=no");
scrollwindow.hasScrollbars = false;

Child:

alert(hasScrollbars);

If you want to handle the case where the child window is opened directly, then it gets more interesting...

Child:

try {
    // do something with hasScrollbars
    // If it isn't true or false, ie undefined, using it will throw you into the catch.
    alert(hasScrollbar);
} catch (e) {
    // scrollbars weren't explicitly added or forbidden, so they'll automatically
    // show up if the content is larger than the window. In this case, use a
    // scrollbar sniffing technique.
    var hasVerticalScrollbar = document.body.scrollHeight > document.body.clientHeight;
    var hasHorizontalScrollbar = document.body.scrollWidth > document.body.clientWidth;
}

Scrollbar sniffing: I think this is what Stephano was going for. He was on the right track. But use clientWidth, scrollWidth, clientHeight, and scrollHeight in combination. From quirks mode:

If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.

When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.

So, you'll have to adjust the scrollbar sniffing part a bit for IE, but that's the basic idea.

DaveS
Thank you so much for the detailed post. I'll be able to test this Monday morning. I gave you an upvote to be sure you get credit for your post if I don't "mark as answer" in time.
diadem
+2  A: 

You can determine if the window has a visible scrollbar in IE by using this little JavaScript trick:

//You'll have to modify this so as not to do it unless your user is running IE
window.attachEvent('onload', getChrome);

function getChrome() {
    //read the window width and height
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;

    //set the window to that size
    window.resizeTo(w, h);

    //read the window width and height again
    var newW = document.documentElement.clientWidth;
    var newH = document.documentElement.clientHeight;

    //calculate the difference
    var diffX = w - newW;
    var diffY = h - newH;

    //set the window back to what it was
    window.resizeBy(diffX, diffY);

    alert('diffX: ' + diffX + '\ndiffY: ' + diffY);

    //If diffX is larger than 10 (in Vista and Windows 7, the borders are 5px each)
    //then you're scrollbar is visible.
}
Gabriel McAdams
This is very clever, though technically the most complicated. It looks like I hit "mark as answer" a few seconds too late :-/ It auto-marked without my intervention because my time expired.
diadem
For the record, this is what I used and it works fine with one exception - if the user has the left mouse button down window.resizeby will not fire. We added some workarounds to this limitation and everything functions as desired.
diadem
A: 

You can check document height, then check window height and if document height is a bigger number, then you have scrollbars.

However, because IE will display always scrollbars (even if you don't have anything to scroll) you may want to set overvlow:auto for body tag.

Ionut Staicu
As both my original post and the linked site included state, IE does not support window height directly. It tells you the body height, which is not what I was asking for. There's a difference between the body having a scrollbar and the window having one. They can both have scrollbars or neither. I dont' care about the body, i just care about the widnows. This is not always on. it is set by window.open and cannot be changed.
diadem
I guess you cannot have scroll if the document height is bigger than window height...
Ionut Staicu