Lightbox pops up when size too small

[Icarion]

I was wondering if it is possible to have it when browser window size reaches
a certain point (too small), I can have a lightbox (layer)
come up giving notice that site will look #*$!ty at this
window size? anyone have code for that?

[tedster]

You could do it with Javascript, using window.screen.availableWidth as the trigger.

[MarkFilipak]

> You could do it with Javascript, using window.screen.availableWidth as the trigger.
Erm... Isn't window.screen.availableWidth the width of the desktop? I think Icarion wants the width of the browser window. That's a bit more complex:

Believe it or don't, when I want the browser width I append an invisible, static div to the document.body. The div is filled with window.screen.availableWidth number of space-period (' .') pairs with font-size set to '1px'. I then read the div's offsetWidth and, to 1 pixel accuracy, I have the width of the browser. After doing a removeChild, the page is back to its original condition.

The standard way to do it is a long logical-or of a bunch of offsetWidths and/or scrollWidths and/or (whatever I've forgotten) of various parentages. What I do takes slightly longer, but there's no guesswork and it's backward and forward compatible.

[tedster]

Isn't window.screen.availableWidth the width of the desktop

I did make a mistake there, but I don't think it was what you suggest. The correct version is window.screen.availWidth, not window.screen.availableWidth.

The object here is "window" and that means the the number returned is the pixel width of the window. Without that term, screen would be the object, and screen.availWidth would give the total available width of the screen/desktop.

[penders]

I did make a mistake there, but I don't think it was what you suggest. The correct version is window.screen.availWidth, not window.screen.availableWidth.

I believe that window.screen.availWidth is the same as screen.availWidth, which as you say returns the available width of the screen/desktop, not the width of the window. (Out of curiosity window.availWidth is undefined in all browsers I've tried)

But more specifically, it is not really the width of the window that's important, but the width of the client area inside this window. The width of the viewport. And as MarkFilipak points out, this does seem to be rather more complex to work out.

In a recent-ish thread, "Browser Viewport Statistics [webmasterworld.com]", pageoneresults publishes a function to calculate this. Although on looking at this again, I notice all the "Width" properties are given as "width" (lowercase 'W') - I'm sure this can't be right!? This won't give an error, but will produce incorrect results in IE! But even if this is corrected it is not perfect, IMHO. Using this function FF and Opera seem to include the width of the vertical scrollbar; IE ignores it. So, it's approximate. On digging deeper, the correct values are available in other properties but I'm not sure at the mo how to decide which to pick. So, in short, I'm still very much open on this one!

May be creating/destroying an object is more accurate?! But how accurate do you need to be?

I can have a lightbox (layer) come up giving notice that site will look...

Is a lightbox/popup perhaps a bit too obtrusive?

[penders]

Although on looking at this again, I notice all the "Width" properties are given as "width" (lowercase 'W') - I'm sure this can't be right!?

EDIT: My bad (partly) - all the width properties are correct afterall, as in ".clientWidth" (uppercase 'W'). Except if you've come from a search engine and webmasterworld has highlighted the search words - it also makes them lowercase! Dang!