Preserved Topic: Creating DIV's on the fly?

Hmm, I know I've asked about this in a couple of threads, but thought perhaps it'd be best if I did so in a thread named after what I was looking for! I'm searching for a good tute, or even better, and simple example, of a Javascript that will allow me to create a <div> on the fly, assign it attributes and styles, fill it with content, etc... I already have the scripts in place to alter anything about an existing div on the fly, but now I want to eliminate the need for specifying things in the CSS and writing out my <div id="foo">&nbsp;</div> stuff inside the HTML. I know this should be pretty easy, I'm just not to sure where to start digging. One simple example and I'd be off and running! Anyone have one for me to peek at? (Apologies if this has already been answered at length in a different post, cool?)

Your pal, -doc-

you can do it the DOM way:

var myDiv = document.createElement('DIV');
myDiv.id = layerid;

or the old fashioned way for IE:

document.body.insertAdjacentHTML("BeforeEnd",'<div id="layerid"></div>');
var myDiv = eval("document.all.layerid");

or the old fashioned way for NS:

var myDiv = document.layers[layerid] = new Layer(width);

Thanks Cal! I'm going to try and implement that right now as a new "Zobject" for my latest project, this would rock. I'm getting sick of writing HTML, it'd be fun to create one of my crazy pages without resorting to HTML at all, heh. (Anyone interested in following the progress of this, I'm working at http://www.Znippets.com/template/ right now, starting with a modification of the scrollBar2 script.) Let's see if I can create the rest of the page without mucking with the .shtml page! I'm going to try and add the header and side menubar with dynamic creation.

Your pal, -doc-

(Note: this page blows up in Netscape 4.x right now, so it goes. Welcome to the Asylum also Cal, great way to make youself known, you're batting 100% so far! =)



[This message has been edited by DocOzone (edited 09-18-2001).]

~puts the little fecker back in the hip pouch~

Damn cheap snaps keep popping open.







ICQ:# 10237808

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Hmm, the DOM method isn't workig for me too well, though the IE example is a piece of cake, got it up and running in minutes. (I'll wait on the Netscape version, the currect design doesn't work with NS anyway.) The part that always confuses me is the myDiv bit, you've got...

var myDiv = document.createElement('DIV');
myDiv.id = layerid;

These kind of examples always make me crazy, I know I hope to have the equivalent of <div id="menuDiv"></div>, which I can then do all sorts of things to using my existing code, but which would be "menuDiv" - "myDiv" or "layerid"? Right now all my variations of this just make Mozilla fail.

Your pal, -doc-

to get the equivilent of this:

<div id="bob"></div>

do this:

var elm = document.createElement('div');
elm.id = "bob";

then when you need to refer to the element, you can either keep the variable 'elm' handy somewhere (this is a js ref to the new div) or you can use the DOM method:

var that_div_i_created = document.getElementById("bob");

then you can do stuff with it. in IE:

that_div_i_created.style.color = '#0000ff';

or in NS:

that_div_i_created.color = '#0000ff';


here's a bit of code you might like to pick through:

function createLayer(id,nestref,left,top,width,height,content,bgColor,visibility,zIndex) {

	if (is.ns5){

		var div = document.createElement("div");

		div.id = id;

		div.style.position = "absolute";

		div.style.left = left + "px"; 

		div.style.top = top + "px"

		if (width != null){div.style.width = width + "px";}

		if (height != null){div.style.height = height + "px";}

		if ((width != null) && (height != null)){div.style.clip = "rect(0px " + width + "px " + height + "px 0px)";}

		if (bgColor != null){div.style.backgroundColor = bgColor;}

		div.style.padding = "0px 0px 0px 0px";

		if (zIndex != null){div.style.zIndex = zIndex;}

		if (visibility != null){div.style.visibility = visibility;}



		div.innerHTML = content;



		var parentEl = document.body;

		if (nestref){parentEl = document.getElementById(nestref);}

		parentEl.appendChild(div);



	}else if (is.ns){

		if (nestref){

			var lyr = eval("document."+nestref+".document."+id+" = new Layer(width, document."+nestref+")");

		}else{

			var lyr = document.layers[id] = new Layer(width);

			eval("document."+id+" = lyr");

		}

		lyr.name = id;

		lyr.id = id;

		lyr.left = left;

		lyr.top = top;

		if (height!=null){lyr.clip.height = height;}

		if (bgColor!=null){lyr.bgColor = bgColor;}

		lyr.visibility = (visibility=='hidden')? 'hide' : 'show';

		if (zIndex!=null){lyr.zIndex = zIndex;}

		if (content){

			lyr.document.open();

			lyr.document.write(content);

			lyr.document.close();

		}

	}else if ((is.ie4) && (is.mac)){

		

		///////////////////////////////////////////////////////////////////////



		var str = '<DIV id="'+id+'" style="position:absolute; left:'+left+'; top:'+top;

		if (width != null){str += '; width:'+width;}

		if (height != null){str += '; height:'+height;}

		if ((width != null) && (height != null)){str += '; clip:rect(0,'+width+','+height+',0)';}

		if (bgColor!=null){str += '; background-color:'+bgColor;}

		if (zIndex!=null){str += '; z-index:'+zIndex;}

		if (visibility){str += '; visibility:'+visibility;}

		str += ';"></DIV>';



		if (nestref){

			index = nestref.lastIndexOf(".");

			var nestlyr = (index != -1)? nestref.substr(index+1) : nestref;

			nestlyr = document.all[nestlyr];

			nestlyr.insertAdjacentHTML("BeforeEnd",str);

		}else{

			document.body.insertAdjacentHTML("BeforeEnd",str);

		}

		var newobj = eval("document.all."+id);

		if (content){

			newobj.innerHTML = newobj.innerHTML + content;

		}



		///////////////////////////////////////////////////////////////////////



	}else if ((is.ie5) && (is.mac)){



		///////////////////////////////////////////////////////////////////////



		var div = document.createElement("div");

		div.id = id;

		div.style.position = "absolute";

		div.style.left = left + "px"; 

		div.style.top = top + "px"

		if (width != null){div.style.width = width + "px";}

		if (height != null){div.style.height = height + "px";}

		if ((width != null) && (height != null)){div.style.clip = "rect(0px " + width + "px " + height + "px 0px)";}

		if (bgColor != null){div.style.backgroundColor = bgColor;}

		div.style.padding = "0px 0px 0px 0px";

		if (zIndex != null){div.style.zIndex = zIndex;}

		if (visibility != null){div.style.visibility = visibility;}



		div.innerHTML = content;



		var parentEl = document.body;

		if (nestref){parentEl = document.getElementById(nestref);}

		parentEl.appendChild(div);



		///////////////////////////////////////////////////////////////////////



	}else if (is.ie){

		var str = '<DIV id="'+id+'" style="position:absolute; left:'+left+'; top:'+top;

		if (width != null){str += '; width:'+width;}

		if (height != null){str += '; height:'+height;}

		if ((width != null) && (height != null)){str += '; clip:rect(0,'+width+','+height+',0)';}

		if (bgColor!=null){str += '; background-color:'+bgColor;}

		if (zIndex!=null){str += '; z-index:'+zIndex;}

		if (visibility){str += '; visibility:'+visibility;}

		str += ';">'+((content)?content:'')+'</DIV>';

		if (nestref){

			index = nestref.lastIndexOf(".");

			var nestlyr = (index != -1)? nestref.substr(index+1) : nestref;

			document.all[nestlyr].insertAdjacentHTML("BeforeEnd",str);

		}else{

			document.body.insertAdjacentHTML("BeforeEnd",str);

		}

	}

}

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Oh, I know what I'm moving towards, and as usual, none of my efforts are *ever* driven by "sparing myself effort", but by understanding, ie: understanding *everything*. The Znippets are intended as a resource for other webmasters and coders, sure, but a big part of the thrust of them is going to be "you can understand this too!" Once I get a couple more useful Znippets in place, I'm going to start de-constructing them in the presentation, explaining what it is I'm doing and hopefully helping others get more into writing their own code and away from simply using scripts in a "cookie cutter" fashion. There are several good APIs for doing this sort of thing, Dan Steinman's work is laudable, but heck, I hardly ever understand what he's doing or how he's doing it! (I'm exagerating just a bit, I am able to dig through his code, I just don't like other people's code typically. I've always found that after I dig into a concept and boil it down to it's *very* simplest elements, then I can make it work, and it's easy to explain to former non-coders as well.

Creating new DIVs for IE is almost laughably simple, but for some reason I can't get the Mozilla DOM version to work as shown here, even when I just paste it into place as-is, it doesn't seem to work on my pages, totally driving me crazy. Still, I *will* get it to work, and when it does I'll feel capable of explaining it to others, a big part of my goal. (The biggest part is to simple do my own creations, the most fun for me!)

I do think making things sweeter and neater is a great goal, and I am pursuing this in my own fashion. One of the things I'm making a point of doing is using long, descriptive variable and function names, something I don't always do, but in this case I think it's important that folks be able to figure out what's supposed to be happening. (I had shortened all the variable and function names for the scroller down at one point to conserve bandwidth, a big part of my tasks these last few days has been replacing them all back to the longer variants for clarity.) I dug through the scripts in the darg36 project, and had to really work to guess what some of the 2 and 3 character function names stood for.

So! While I agree with you in theory, I also know that I need to make my part of this thing work, one step at a time, understanding each and every aspect as I go, otherwise the effort has been wasted for me, I may have some scripts that do cool things, but that's all they will do, that one cool thing. Me, I need more, I gotta know.

Your pal, -doc-

BTW, I think I do know what you're talking about with that grid, I've also done that in my notes, laying out all of my variables and possible values in a grid, is there any other way?



[This message has been edited by DocOzone (edited 09-18-2001).]

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

See if this helps

<HTML>

<HEAD>

	<title>CreateDiv</title>

<SCRIPT language="JavaScript">

function createDiv(divId)

{

	var styleText = "position:absolute;left:0px;top:0px;visibility:hidden";



	elem = document.createElement("DIV");

	elem.setAttribute("style",styleText);

	elem.setAttribute("id", divId);



	document.body.appendChild(elem);

	return elem;

}

function doIt()

{

	var myLayer = createDiv("myId"); //Should really give it a unique id

	myLayer.style.color="#FF0000";

	myLayer.style.left = Math.random()*200;

	myLayer.style.top  = Math.random()*200;

	myLayer.innerHTML="Hello World";

	myLayer.style.visibility="visible";

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR="black" TEXT="white" ALINK="yellow" VLINK="yellow" LINK="yellow">

Click here to <A HREF="javascript:doIt()">Create A Layer</A>

</BODY>

</HTML>

The important bit is the "append" to append it to the document after it has been created. You can append to other "DIV"s to create "child layers"

I have to disagree with InI. (Sorry )
You cannot do something like this
Dynamically add bouncing balls
using the document.write method.


JavaScript Gadgets'n'Gizmos

• WELCOME TO THE ASYLUM Cal :::: Enjoy your stay

Wonderfull intro

"I am about to -- or I am going to -- die: either expression is correct."
~~ Dominique Bouhours, French grammarian, d. 1702


[This message has been edited by Dark (edited 09-19-2001).]

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

the "analogue techniques" in NS 4 are document.write, which is very very slow for netscape.

to dynamically create layers, you can either do a root document.write with a <div> or invoke "new Layer(w)" but even then you have to call layer.document.write to populate the layer. urgh.

Hi InI
I guess I should've read your post more carefully
I saw "writing HTML on the fly" and just assumed document.write.
I saw
document.all.scr.innerHTML += "<div id='"+name+"'></div>";
and thought "document.all.scr" was some IE attribute that I hadn't yet found out about.

I then read your first post about creating the "screen" DIV and looking at the Arkanoid demo I now get what you mean. I went back to the "darg36" link and saw where you have the 5 DIV's that you append dynamic content to.
I have never seen this technique before!

Well, I learn something new every day

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Coolness, it looks like the append... bit was what I was leaving out, I'll add this to my scripts tonight, and see if I can get that page for http://znippets.com/template/ going, if it seems stable to me, I may just eliminate all the HTML writing of <div>'s, except for the obvious parts that people would most likely want to do themselves. Cal and Roy, I know you don't post too often, but you're a great asset to the asylum, I totally appreciate all your help! InI, noone who knows you here doubts your skills, relax!

I must say, the DHTML/Javascript forum is booming with new ideas and thoughts lately, makes me happy it does! (Especially since I'm working on so many new (to me) things, heh.)

Your pal, -doc-