dynamically building layers?

engwar · Sep 30, 2005

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
this?

Thanks.

Martin Honnen · Oct 1, 2005

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
follows:
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.cssPropertyName
e.g.
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
div.appendChild(p);

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
document.body.appendChild(div);

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
nodes.

How to go about building a crud app when you are a noob	1	Jan 2, 2023
Split IE window into two independent layers	2	Dec 10, 2009
building a dictionary dynamically	6	Feb 4, 2012
Add a list of videos each one in a different button in a web page	1	Dec 10, 2022
How to create language translation program from dsl or bgl (by Open Source)	0	Nov 12, 2022
toggle layers and background-image of clicked tab	14	Apr 1, 2009
What should I do Before I give up programming?	6	Jan 14, 2023
Help with winForms recursive backtracking maze generation	1	Jan 15, 2023

dynamically building layers?

engwar

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads