I know that this changing layout technique has been dealt for many times by others, and I’m not the last one to deal with it.
I tend to make things flexible, not just a web design, but also real-life stuffs (so don’t fix a time with me, lol). OK, to make a layout flexible, it means to make everything inside it as flexible as possible. I have to decide what parts of the site is extensible while what’s not. The header and content area should expand according to user’s screen width, and in this case, I’ll leave the sidebar to its fixed size.
The things follows are regular:
- Design the layout in any graphic apps you like( I use Macromedia Fireworks)
- Keep in mind that what parts I was going to make flexible, so that I don’t put complicated graphic or effect to the extensible areas.
- Prepare graphics
- Export from the graphic design program, and ajust them as needed.
- Decide the markup
- Some people may want to put this first
- Write style sheet as if you’re making a flexible style
- Make the whole layout flexible first, then it’ll be easier to fix it later if needed.
After the flexible layout is done, I need to wrap an extra div around the whole markup, so that the alternation of width will be a step away. The purpose of adding this layer is to make it the “canvas” of the page, to do so, just set its position to relative, so that absolute positioned elements won’t lose their way.
There, we got a flexible layout, but it’s now fixed, I’ll add a script to allow it to change width:
The first function fnToggleLayout(nLayout) is called on-demand by the user, when called, it changes the width directly by setting the style properties of the wrapper. The second function fnLoadSavedLayout() is automatically called when page loads. It writes html code to the document directly. You may ask why not re-use the first function in the window.onload handler. That’s because there’s a delay between the layout changing take place, and it’s annoying to see this effect every time you load a page.
There’re another two functions that I don’t list, the getCookie and newCookie, since they’re not the main points and could be found on the internet easily.
However there’re some problems currently. As you may notice, I use the sIFR method to replace heading text. When switching from a wider layout to a narrower layout, the width of headding is not recaculated. But I think this could be easily fixed by re-calling the corresponding sIFR function.