Safari for Windows
Jun 12 2007Good news for all Windows-based web developers: Safari for Windows is now available (via).
Hopefully this means that we can make our web sites even more cross-browser (and hopefully doesn't just add another browser with its own quirky differences).
View 6 Comments | Add a commentAdding Style Blocks Using JavaScript
Jun 7 2007Who’s Got Style? - Nicholas C. Zakas writes a good analysis of dynamically creating and attaching
<style>elements to a page using JavaScript. He ends up with a function that works in Internet Explorer, Firefox, Opera and Safari.Making a 100% height interface
Jun 2 2007With interfaces on the web that resemble those of the desktop (and better), we often want to get rid of the ubiquitous scroll bar in our web applications. We want all the action to happen directly within the visible browser area. Instead of scrolling, we can offer users new ways to interact with the page like Ajax-based page flipping and sliding panels.
The basis of most scroll-less 100% height interfaces contain some CSS looking like this:
html, body { /* get rid of default spacing on the edges */ margin: 0; padding: 0; /* get rid of that 2px window border in Internet Explorer 6 */ border: 0; /* fill the height of the browser */ height: 100%; /* no more scroll bar */ overflow: hidden; }This resets the margins and padding of the page, gets rid of the chrome border in IE6, sets the height to 100% of the available space, and hides anything that goes outside the 100%. This needs to happen on both the html and body elements. Having a hidden overflow isn't mandatory, but it makes sure that nothing will cause that scroll bar to pop back up, even if you are dragging things off the edge of the screen.
Now, anything you put directly into the body can also be given
height: 100%and it will do exactly what you expect (fill the page). This way, you can have the interface of the page grow and shrink along with the size of the browser. You can even have multiple layers fill the page like this:/* css */ div.layer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } <!-- html --> <body> <div class="layer"> .. some stuff .. </div> <div class="layer"> .. some other stuff .. </div> </body>You can easily give an element within the page a scroll bar by throwing in
overflow: autoon something that hasheight: 100%and some padding or margins.We can also use JavaScript to calculate the size of the browser and use this to decide how much content we display at a time. We can do this with some relatively easy code, now that our body is the exact width and height of the browser "viewport":
function getPageSize() { return [ document.body.offsetWidth, document.body.offsetHeight ]; }Note that this code only really works with 100% height. On a page with a variable height, it's not reliable at all.
I've put this stuff to use with a lot of projects lately, most notably PictureSandbox (formerly FlickrCash).
For more details on calculating the width of the viewport, check out Viewport Properties at QuirksMode.
Request a Quote
Recent Articles
- Parse Accept-Language to detect a user's language
- Three years of The Future of the Web
- Saving data to a file with PHP
- Easy web scraping with PHP
- See all the articles
- IBM: Where and when to use Ajax
- Code Igniter 1.6.0 Released
- Update a Dev Site Automatically with Subversion
- JavaScript Functions are Variables
- See All...
Older Articles
- May 2008
- April 2008
- February 2008
- January 2008
- December 2007
- November 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
- February 2006
- January 2006
- December 2005
- November 2005
- October 2005
- September 2005
- August 2005
- April 2005
- See All...
