...

View Full Version : creating a new div..



shlagish
10-13-2003, 12:41 AM
I want to creat a new div when the user clicks...

something like onClick="create_div()"

The only way I know to do this would be to have a div and make it visible on click. But I don't want that. I want to be able to really create it (just for the time of that session of course)

liorean
10-13-2003, 12:44 AM
Well, you always have the DOM functions that you can use. document.createElement('div'); Then you probably need to put it somewhere in the code as well, and maybe fill it with content.

shlagish
10-13-2003, 12:51 AM
so:




function put()
{

document.createElement('div')

}

then

<body onClick="put()">


How do I fill that div with content?
Is there a way to name that div so I can reference to it later and apply actions to it?
Also, can I "uncreate" that div?
document.deleteElement('the div's name')

Thanks for the help, this will greatly help me:)

nolachrymose
10-13-2003, 02:17 AM
function put() {
var n = document.createElement('div');
n.id = "easyref";
n.innerHTML = "blah blah blah"; //easy, but not necessary standards-compliant (AFAIK)
// standards-compliant
//n.appendChild(document.createTextNode("blah blah blah"));
document.body.appendChild(n);
}

...and....


<body onload="put();">

...then you can reference it like any other element, by means of its ID (in this case, the id is 'easyref').

To delete, you can use a function like this:


function pull() {
var n = document.getElementById("easyref");
n.parentNode.removeChild(n);
}

Hope that helps!

Happy coding! :)

scriptkeeper
10-13-2003, 02:19 AM
Lets see if I can be of some help? First off yes it would be easy to asign it a name but I would recomend instead giving it an ID!

Example:



<script>
function makeEle(eleName){

//creates element
var d=document.createElement("DIV");

//gives element an id
d.id=eleName;

//gives element text
d.createTextNade("this is my text");
}

</script>



<body onClick="makeEle('myDiv')">



As for deleting I do not have an answer sorry!

EDIT: Oooops Someone beat me! Ohwell good luck!

nolachrymose
10-13-2003, 02:27 AM
Touché, scriptkeeper. :p

shlagish
10-13-2003, 02:33 AM
so:


<html>
<head>
<script type="text/javascript">
<!--
function put()
{
var x=document.createElement("DIV");
x.id="div_name";
x.background-color=red;
//this is the part I'm not sure about
x.onClick="x.parentNode.removeChild(x);";
//end of the part I'm not sure about
x.appendChild(document.createTextNode("<p>text here</p>");
}
-->
</script>
</head>
<body onClick="put()">
</body>
</html>

First, the red problem. Second, If I click on the body twice, will it create two divs?
Thanks for your help, I am now thinking that what I want to do is in fact possible :)

nolachrymose
10-13-2003, 02:43 AM
Well, a few problems....firstly, this line:


x.background-color=red;

...ought to be this:


x.style.backgroundColor = "red";

Secondly, this line:


x.onClick="x.parentNode.removeChild(x);";

...won't work like you are wanting it to, because you are not setting the event with a function. Try this instead:


x.onclick = new Function("x.parentNode.removeChild(x);");

Thirdly, there is a problem with this line:


x.appendChild(document.createTextNode("<p>text here</p>");

....because a text node is simply text, and therefore your paragraph elements will be rendered as plain text. That is why I'd suggest you start off with innerHTML property first, and slowly build your way up:


x.innerHTML = "<p>text here</p>";

....but if you really wanted to do it the W3C DOM Recommendation way, it would look something like this:


var pEl = document.createElement("p");
pEl.appendChild(document.createTextNode("text here"));
x.appendChild(pEl);

Also, at the end of the function you need it to append it to some container (I'd guess you'd want to append it to the body):


document.body.appendChild(x);

And yes, if you click twice, two divisions will be created. ;)

Hope that helps!

Happy coding! :)

shlagish
10-13-2003, 03:34 AM
so:


<html>
<head>
<script type="text/javascript">
<!--
function put()
{
var x=document.createElement("DIV");
x.id="div_name";
x.style.background-color="red";
x.onclick = new Function("x.parentNode.removeChild(x);");
x.innerHTML="<p>text here</p>";
document.body.appendChild(x);
}
-->
</script>
</head>
<body onClick="put()">
</body>
</html>

right?

Thanks for the help everyone

Could you explain the new function() thingy, never heard of it...

nolachrymose
10-13-2003, 04:20 AM
Just one slight problem...this line:


x.style.background-color="red";

....ought to be this:


x.style.backgroundColor="red";

The function thing is just an object that returns a function. It would be the same as making a function and setting that to onclick event instead.

Hope that helps!

Happy coding! :)

shlagish
10-13-2003, 05:01 AM
ok thanks to you all, I think I have enough to get pretty far in my project now :)

shlagish
10-13-2003, 05:04 AM
hmm, maybe not, when I click on the divs, they don't delete themselves...
What's up with that??

And, this line:

x.onClick = new Function("x.parentNode.removeChild(x)");
could I make it close div_id instead of x (make it close the same thing, but get that thing with it's name instead of x..)?

shlagish
10-13-2003, 05:44 AM
This also doesn't work, it puts divs in when I click on the put button, but it doesn't take any of them out when I click the remove button...


<html>
<head>
<script type="text/javascript">
<!--

function put()
{
var x=document.createElement("DIV");
x.id="div 1";
x.style.backgroundColor="red";
x.innerHTML="<p>text here</p>";
document.body.appendChild(x);
}

function remove()
{
x.parentNode.removeChild(x);
}


-->
</script>
</head>
<body>
<input type="button" onClick="put()" value="put" />
<input type="button" onClick="remove()" value="remove" />
</body>
</html>

scriptkeeper
10-13-2003, 07:57 AM
The reason it does not remove the element is because x has no value! It only has a value inside the put function because it is a local variable! Give this a try! I tested it works IE6!



<html>
<head>
<script type="text/javascript">
<!--

function main()
{
var x, d;
d=document.buttons;
d.addEle.onclick=function()
{
x=document.createElement("DIV");
x.id="div 1";
x.style.backgroundColor="red";
x.innerHTML="<p>text here</p>";
document.body.appendChild(x);
}
d.remEle.onclick=function()
{
x.parentNode.removeChild(x);
}
}
-->
</script>
</head>
<body onload="main()">
<form name="buttons">
<input type="button" onClick="put()" value="put" name="addEle" />
<input type="button" onClick="remove()" value="remove" name="remEle" />
</form>
</body>
</html>

Good Luck And Good Coding!

liorean
10-13-2003, 10:00 AM
Try this instead:
x.onclick=function(){
this.parentNode.removeChild(this);
}Or, if you want to do it from another node:
d.onclick=function(){
var
node=document.getElementById([string elementId]);
node.parentNode.removeChild(node);
}

shlagish
10-13-2003, 06:15 PM
How would I do to remove a div using it's id?


d.remEle.onclick=function()
{
x.parentNode.removeChild('div 1');
}

maybe?

shlagish
10-13-2003, 06:46 PM
<html>
<head>
<script type="text/javascript">
<!--

var x=1;
var a="div 1";

function put()
{
var n=document.createElement("DIV");
n.id="div "+x;
n.style.backgroundColor="red";
n.innerHTML="<a href='#null' onClick='remove(a)'>click</a>";
document.body.appendChild(n);
alert(n.id);
x=x+1;
}

function remove(the)
{
document.all(the).style.visibility='hidden';
}

-->
</script>
</head>
<body>
<form name="buttons">
<input type="button" onClick="put()" value="put" name="addEle" />
</form>
</body>
</html>


Here is what I want.
Click on "put" button, it creates a div named "div 1"
Click on "put" button again, it creates a div named "div 2"
Click on the link that is IN "div 1", it closes "div 1"
Click on the link that is IN "div 2", it closes "div 2"


With my code, there are problems:
1.Instead of "erasing" the div for real, it only hides it (visibility='hidden')
2.All the links that are in divs close "div 1", I would like the to close the div in which they are contained...


Is there a way to tweak my code to make the divs really be erased when I click the links (instead of just hide them...)?
Is there a way to tweak my code to make the links close their "container", or something like that?

The reason I want to use my code instead of yours (everybody) is because I understand it more, and I am more "used" to that syntax... But if there is no way to acheive what I want with my "style", I will change...

Thank you all for spending time on this :)

liorean
10-13-2003, 09:01 PM
Shlagish - see my post above.

Id's are restrained in what characters they may contain, and space is not one of them. Roughly it has to match /[_a-z-][_a-z0-9-]*/i .

shlagish
10-13-2003, 09:10 PM
Thanks liorian. I had tested your solution but it didn't work. It works fine now :)

I'll post the final version of the code in a few minutes :)

shlagish
10-13-2003, 09:29 PM
Here is what I have


<html>
<head>
<script type="text/javascript">
<!--

function put()
{

var n=document.createElement("DIV");

with(n.style)
{
backgroundColor="#FF0000";
width="5px";
height="5px";
position="absolute";
top=event.clientY-2.5;
left=event.clientX-2.5;
}

document.body.appendChild(n);


n.oncontextmenu=function()
{
this.parentNode.removeChild(this);
}

}

-->
</script>
</head>
<body onClick="put()">
</body>
</html>

I set the height to 5px, but the divs stay taller than 5px.... Why?

Also, I had it so a right click will destroy the div being clicked on... But I don't want the context menu to appear, because now, each time I "erase" a div, the context menu appears and it's really frustrating (well, not that much, but still:p)

Thanks for all your help, I'm getting there faster than I thought :)

liorean
10-13-2003, 09:38 PM
The height will only be respected on positioned elements or elements with overflow set to anything other than visible.

Try to return false for the context menu.

shlagish
10-13-2003, 09:41 PM
<html>
<head>
<script type="text/javascript">
<!--

function put()
{

var n=document.createElement("DIV");

with(n.style)
{
backgroundColor="#FF0000";
width="5px";
height="5px";
position="absolute";
top=event.clientY-2.5;
left=event.clientX-2.5;
overflow="hidden";
}

document.body.appendChild(n);


n.oncontextmenu=function()
{
this.parentNode.removeChild(this);
return false;
}

}

-->
</script>
</head>
<body onClick="put()">
</body>
</html>


That's it, that's all !

Thank you so much for all the help. I've got enough to go to the next step now;)

scriptkeeper
10-14-2003, 03:03 AM
Another variation it removes the elements in the ordr in which they where created and can be reversed!



<html>
<head>
<script type="text/javascript">
<!--
function main()
{
var x,d,i=0,obj=new Array();
d=document.buttons;
d.addEle.onclick=function()
{
i++
x=document.createElement("DIV");
x.innerText="HELLO"+i;
x.id="box"+i;
document.body.appendChild(x);
obj.push(x.id);
}
d.remEle.onclick=function()
{
i--;
document.body.removeChild(document.getElementById(obj.shift()));
}
}
-->
</script>
</head>
<body onload="main()">
<form name="buttons">
<input type="button" value="put" name="addEle" />
<input type="button" value="remove" name="remEle" />
</form>
</body>
</html>

shlagish
10-15-2003, 10:01 PM
Thank you, but what I have now is really what I want :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum