When you click to create an event in Google Calendar, does this make use of layers, for example when the speech bubble comes up asking for the event details? If it does not make use of layers, then how does it work?

Hey Mark,

 

Google Calendar uses absolutely-positioned <div>s for those bubble pop-ups. These are the easiest and most browser-compatible way of showing pop-up content that can change location every time.

 

To be honest, I'm not even sure if layers could accomplish that.

 

I suggest you download the Firebug add-on for Firefox (which every web designer should already have) and take a look yourself.

 

If you have any questions, you know where we are

 

Darren

Thanks darren. I use firebug already, probably the most useful web development tool ever!

 

I completely forgot about CSS positioning. If I use absolute will this be positioned above all the other elements or do I need to use the z-index property?

 

I have noticed some websites pop up message boxes such as to get user feedback on the design of the website etc. Are these done in the same way?

Hi Mark,

 

Yes, absolutely positioned divs will appear above all other static/fixed/relative positioned elements. If two absolute divs overlap then I believe the default is for the div which appears later in the code will by default be on top. You can however change this default action by using the z-index property.

 

I hope this helps.

 

Darren

Ok that solves a lot of mystery, although I'm kicking myself for not coming up with the answer myself!! If you can use absolute positioning and the z-index with divs then what is the point in layers? I suppose the div container can serve as a type of layer.

 

Still on the topic, and my last question. There are some sites that open, presumably an absolutely positioned div, a "window" (for want of a better term) to input details etc. When this "window" opens, the rest of the page goes dark and cannot be used by the user. This is something I'd like to use in an online app I'm working on for a company, any idea how this might be accomplished?

Hi Mark,

 

I think nowadays layers are deprecated code, you're better off using the absolutely positioned div for content or using iframes if you want to include an external URL in a div-like element on your page.

 

The effect you're talking about is called Lightbox, it's a pretty common feature of photo galleries today (which does use absolutely positioned divs). I have used quite a few different ones before, the original Lightbox, a variant called Slimbox, a few jQuery based ones, but my favourite has always been Shadowbox. It's got a large footprint (lots of files, meaning some time to load), but it offers huge flexibility and lets you put any kind of content (including HTML page content) into a lightbox effect. Honestly, if you ask 100 different web developers which Lightbox program they prefer and you'll get 100 different answers, so don't take my opinion as necessarily the direction you should go in. Do some research and find the right one for your requirements. If you are interested in Shadowbox, the URL is http://www.shadowbox-js.com/

 

Good luck!

 

Darren