My Name In Print

Warning This article was written over six months ago, and may contain outdated information.

I hope you’ll for­give a lit­tle self-pro­mo­tion, as I’d just like to play a few quick notes on my own trum­pet. The lat­est issue of Net mag­a­zine is now on sale, and fea­tures a tuto­r­i­al arti­cle, Cre­ate A Dynam­ic Con­tent Pan­el, writ­ten by me.

In the arti­cle I explain how to build a dynam­ic Con­tact area, as we did on our recent redesign of Preloaded.com, using the Web Stor­age API and the BBC’s Glow Javascript library.

I’m not sure what the rights sit­u­a­tion is with this arti­cle, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the mean­time, you can buy a copy of Net mag­a­zine in the UK at all good newsagents, as the say­ing goes (I don’t know if it will be in over­seas edi­tions also).

Printed TutorialPrinted TutorialPrinted Tutorial

On the sub­ject of print, I’m also cur­rent­ly writ­ing a book about CSS3 which should be pub­lished lat­er this year. I’ll have more infor­ma­tion on that near­er the time.

2 comments on
“My Name In Print”

  1. Hi Peter,

    Thought I should con­tact you regard­ing the tuto­r­i­al for this. First of all, fan­tas­tic use of the Glow library, been get­ting to grips with it recent­ly over on my web­site at http://www.matrixwebdesign.co.uk .

    I’m won­der­ing if you were aware of a slight bug though, and it’s that basi­cal­ly the exter­nal pan­el html that the con­tact details are on are pre-mature­ly loaded onto the web­page, and it takes a click of the con­tact link to restore it to how it should act. If you hov­er over the web­page you will see the v‑card div con­tents already displayed.

    Any advice to this would be great, Pre­loaded seem to have it work­ing but not sure where to begin.

  2. Hi Scott,

    Thanks very much for the kind words. Yes, this has been point­ed out to me already; I missed a dec­la­ra­tion from the tuto­r­i­al. The par­ent ele­ment needs to have overflow: hidden applied to it; in my exam­ple code, it would be like so:

    #contact_panel {
    back­ground-col­or: #36a;
    col­or: white;
    mar­gin-bot­tom: 1.5em;
    over­flow: hidden;
    }

    Hope that sorts it for you.