470,591 Members | 1,586 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,591 developers. It's quick & easy.

dynamically building layers?

Not really sure how to ask this. I'm new to CSS/DHTML

I want to create something similar to how yahoo and gmail handle the
"to" field when you type an email.

If you start typing "d" you will see a list of all the the people in
your address book whos last names start with "d". Type another letter
"e" for example and the list is narrowed to people who's names start
with "de". etc etc.

I'm experience enough with javascript that I'm able to create an array
and resize it based on what you've typed, ie, I've got an array that I
can resize to just have my people with "de" in the name.

It's the next step that has me stuck. How do I create the new layer and
dynamically populate it with the contents of my array?

(Step 2 will be how do I tell when someone has clicked on text in this
new layer.)

Is anyone aware of any web page that shows you how to do something like


Sep 30 '05 #1
1 1536

engwar wrote:

It's the next step that has me stuck. How do I create the new layer and
dynamically populate it with the contents of my array?

If you know the HTML structure you want to build (HTML does not know
layers but it has elements like <div> elements and then CSS can be
applied to those elements to stack them if needed (position and z-index
CSS properties) then you simply need to learn the W3C DOM where in a
HTML document you can create any element if you know its tag name as
var element = document.createElement('tagname')
e.g. for a <div> element object you do
var div = document.createElement('div');

Now within the HTML DOM you can script most HTML attributes of the HTML
element as properties of the script object created so you can do
div.id = 'layer1';
// class attribute is scripted as className property
div.className = 'css-class-name-here';

If you want to script the CSS inline style of an element object then you
can set and read
div.style.position = 'absolute';
div.style.zIndex = '10';
div.style.left = '100px';
div.style.top = '200px';

To fill an element with content you simply create other nodes (e.g.
elements and text nodes) as needed and use DOM methods like appendChild
or insertBefore to put one node into the other e.g.
var p = document.createElement('p');
p.appendChild(document.createTextNode('Kibology for all.'));
// insert into div created earlier

Now you have a complete <div> element object with CSS inline style and
with content created and all you need to do to have it show up is insert
it into some other node already in the document e.g. in the document
body as the easiest approach
So there is nothing special nowadays to create layers, the DOM allows to
use the same approach to create any HTML element there is as an object,
set its attributes as properties and insert content by creating contents
as nodes as well and inserting them into some container element.

You can do that with IE 5 and later, Netscape 6 and later, Opera 7 and
later, and other modern browsers around like Safari or Konqueror.

Granted, in reality there are some issues with the general approach
working flawlessly where implementations are not complete or build on
legacy stuff but it surely helps to understand and use that approach
first and then look for the issues with one browser or the other for
certain elements or attributes.
The DOM inspector of Mozilla or Firefox is a nice tool to learn about
the DOM by simply loading a static HTML document and see how this
translates into the DOM tree object model with the document node having
anything else as child nodes or descendant nodes, with the root element
(the <html> element in HTML) being a child node of the document node and
that root element containing all other elements as child or descendant


Martin Honnen
Oct 1 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by TheKeith | last post: by
27 posts views Thread by Nicholas Couch | last post: by
17 posts views Thread by Nick | last post: by
5 posts views Thread by Jason | last post: by
reply views Thread by Craig G | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.