I hope you’ll forgive a little self-promotion, as I’d just like to play a few quick notes on my own trumpet. The latest issue of Net magazine is now on sale, and features a tutorial article, Create A Dynamic Content Panel, written by me.
In the article I explain how to build a dynamic Contact area, as we did on our recent redesign of Preloaded.com, using the Web Storage API and the BBC’s Glow Javascript library.
I’m not sure what the rights situation is with this article, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the meantime, you can buy a copy of Net magazine in the UK at all good newsagents, as the saying goes (I don’t know if it will be in overseas editions also).
On the subject of print, I’m also currently writing a book about CSS3 which should be published later this year. I’ll have more information on that nearer the time.
Hi Peter,
Thought I should contact you regarding the tutorial for this. First of all, fantastic use of the Glow library, been getting to grips with it recently over on my website at http://www.matrixwebdesign.co.uk .
I’m wondering if you were aware of a slight bug though, and it’s that basically the external panel html that the contact details are on are pre-maturely loaded onto the webpage, and it takes a click of the contact link to restore it to how it should act. If you hover over the webpage you will see the v-card div contents already displayed.
Any advice to this would be great, Preloaded seem to have it working but not sure where to begin.
Hi Scott,
Thanks very much for the kind words. Yes, this has been pointed out to me already; I missed a declaration from the tutorial. The parent element needs to have
overflow: hiddenapplied to it; in my example code, it would be like so:#contact_panel {
background-color: #36a;
color: white;
margin-bottom: 1.5em;
overflow: hidden;
}
Hope that sorts it for you.