pin floating box to left corner only after viewport is > 600px

[two7s_clash]

Hi -

I've got a little flash movie over here: http://f1shw1ck.com/junk/index.html

Basically, I'd like to duplicate this functionality in JavaScript if possible. If the viewport is expanded to over 600px high, a bar is revealed in the bottom left corner of the screen and is pinned there. Oh, and there would be content behind it of course, of the liquid type

I have been a failure at doing this in good css and think js could be the ticket... any advice is welcome. I've tried stuff along these lines, and it works okay in FF for MAc, but that is it.


<div id="wrapper">
</div>

#wrapper {min-height:572px; height: 572px;position:absolute; height:100%; background-image: url('keystone_header.gif');background-position: 0 100%;background-repeat: no-repeat; width:300px;
}
html>body #wrapper {height: auto;}

Thanks!

[Greyfish]

May I ask why you are trying to build a site that displays best at 800x600, it is a very outdated resolution and most computers that view your website will be 1024x768. I'm also kind of confused at what you are trying to do here.

[felgall]

May I ask why you are trying to build a site that displays best at 800x600, it is a very outdated resolution and most computers that view your website will be 1024x768. I'm also kind of confused at what you are trying to do here.

You are getting screen resolution and browser viewport size mixed up. The question was correctly asking about viewport size which is the size inside the browser that is available to display the web page and which has nothing whatsoever to do with the screen resolution. The only fixed viewport size is the one where the page is being printed where you have the equivalent of 748px width. While many computer screens are using larger viewport sizes, most other devices connecting to the internet currently use much smaller viewport sizes.

To answer the original question, there is no way I know of to actually test viewport size within the CSS, you need to use JavaScript to be able to work that out. I have info on the simplest JavaScript code for retrieving the viewport width and height at http://javascript.about.com/library/blbom10.htm

[Greyfish]

My bad, I was mistaken. Listen to Felgall, haha!

[two7s_clash]

felgall -

You are probably on the right track with the javascript suggestion. I was just wondering if there is a way to get something like this to work with min-height, height 100% , and bottom declarations... but as I said, I can't get the look I want across browsers. Thanks for the link.