By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,817 Members | 2,152 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,817 IT Pros & Developers. It's quick & easy.

dynamically building layers?

P: n/a
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.

Sep 30 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a


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.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 1 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.