Full-Screening your WebImageViewer
Last week, I posted 2 web apps (here and here) as part of our 31 Apps in 31 Days promotion. They both have one thing in common (outside of the fact that they're online): being full screen WebImageViewers. There are a few hoops that you need to hop through to make it happen, and this article will walk you through it.
1. Create a new Web Site project with nothing on the Default.aspx page except for the Atalasoft WebImageViewer.
2. Set the Width and Height properties in the image viewer to 100%.
3. Height is a funny beast. It needs to be set in every tag going up the tree to (AND INCLUDING) <html>. To set the height of each of these properties, add the following attribute to each of those elements up the tree:
style="height:100%; width:100%"
4. In your body tag, we need to make all the browsers not show the main windows scroll bars so that we only see the scroll bars of the WebImageViewer. To do that, add this attribute to the <body> tag:
style="overflow:hidden;"
This basically means that if the browser detects any content that stretches beyond the height of the page, it will just not show it. In our case, this is perfect because anything the browser thinks is there is probably just an off-by-one-pixel issue...
5. Lastly, we need to fix a little issue with IE. Internet Explorer doesn't get rid of the vertical scroll-bar after simply adding the style in step 4. It just grays it out. That's not good enough. Add this last attribute to the <body> tag:
scroll="no"
Visual Studio will say it's not a valid property (the same would have happened when you added the style to your <html> tag, but that's ok.
That's it! Now, the tricky part is figuring out how to build your interface on top of the image viewer instead of around it. In ThinDoc, the elements are absolutely positioned to the right (for the controls) and on the bottom-center (for the thumbnails). They appear whenever the mouse moves, but won't go away when the user is hovering over either of those controls.
For a sample of this in action, go to my post about ThinDoc and download the source.
