Detemining browser dimensions and document scroll offsets. Determining browser dimensions and document scroll offsets Before we officially march in, it is essential that everyone understands first how to determine a browser's dimensions and document scroll offset coordinates.
Only then will it be possible to correctly position an element statically on the page. Let's go through the techniques for both. -Determining browser dimensions A browser's dimensions refer to its physical width and height, and is represented in JavaScript differently, depending on whether the browser is Firefox (including NS6) or IE4+ the following two properties are involved: Here are the IE 4+ equivalent properties: Take a look at the below example, which writes out the current dimensions of your browser using the above properties: Example (Try resizing then reloading the browser): Your browser's dimensions are: 1024 by 1002 Simple enough, right?
-Determining document scroll offset coordinates (DSOC) Testing Document.body and doctype Ok, a IE pitfall that I must mention now. Window size and scrolling. Finding the size of the browser window Clue browser can only work out window width. Tkhtml Hv3 has the body/documentElement clientHeight/Width values reversed - versions before September 2007 also do not support innerHeight/Width, so they cannot work with this script. There are some constants available that give the document area of the window that is available for writing to. These will not be available until after the document has loaded and the method used for referencing them is browser specific. The available constants are: Provided by most browsers, but not Internet Explorer 8-, and even in Internet Explorer 9+, it is not available in quirks mode. Provided by many browsers, including Internet Explorer. Provided by most DOM browsers, including Internet Explorer. As you can see, the browsers seem to have settled on at least one reliable property; .
The most accurate method I could come up with uses the following algorithm: Finding how far the window has been scrolled. Modal Dialogs using CSS & JavaScript. Why Bother? The showModalDialog function in IE6 provides a rudimentary modal dialog capability. However, quite apart from the fact that it is IE specific it has become increasingly difficult to rely on it owning ot the fact that users can configure browsers to block popup dialogs from opening. Even when this is not done, some firewalls provide such functionality by default.
How It Works To deliver a pseudo modal dialog using CSS we make use of positioned and floated div elements, modify backgrounds, sizes and display types to create what to all intents and purposes is a modal dialog box. It is possible to create a modal dialog using CSS alone. Download our CSS & JavaScript source for creating modal dialogs from the download link below. The .overlay Selector We need to accomplish two things when the popup dialog is on show The underlying text and form controls must appear dimmed to give the viewer an indication of the fact that they are currently disabled. The .diadiv Selector .diacapt Anchors. Create a Modal Dialog Using CSS and Javascript. Back in my early programming days, before I switched over to web development, I spent most of my time writing software for Windows.
I look back on that time with fond memories. 8-bit icons, OLE2, and no silly Start menus. With the recent Web 2.0 boom, many web developers have returned to their roots and begun building sites that resemble desktop applications. AJAX (the second coming of javascript) lets designers borrow elements from the desktop paradigm and use them on their websites. One element that I find myself using quite a bit are modal dialogs. In a desktop application, a modal dialog is a box or message that forces you to dismiss it before you can use any other part of the program. Measure the impact of your design changes on your site’s performance with Raven’s SEO auditor, rank tracking and Google Analytics integration.
The code behind this effect is surprisingly simple. The overlay <div> At the bottom of your HTML, create a <div> with id = “overlay”.