creazione dinamica tag DIV

**venzo** · 22-06-2009, 20:15

Ho creato una funzione per una creazione dinamica di un tag DIV per la creazione di una finestra.
Prima l'ho costruita in una pagina HTML per verificare se il codice funzionasse. Tutto ok.
Poi ho prodotto tutto tramite document.createElement; viene creato tutto con un piccolo particolare: (parte del codice)

var newdiv1 = document.createElement("div");
newdiv1.setAttribute("class", "box");
newdiv1.setAttribute("id", "divIdName");

mi restituisce:
<DIV id=container class="box">
</DIV>

Gli apici che non sono presenti nell'attributo ID, non mi fa funzionare il tag, che provato con gli apici: id="container", funziona.

Dove sbaglio ??

**cavicchiandrea** · 22-06-2009, 22:10

Ma non è chiarissimo, idee un po confuse? La guida al DOM l'hai letta? Se si qual'è la parte che non hai capito?

Sopratutto chiarisci parli di due id diversi crei "divIdName" poi parli di "container" :master:, nell'esempio non mostri "appendChild" l'appesa del oggetto (se non posti tutto come si fa a capire dove è l'errore?) meglio impostare la classe cosi newdiv1.className="box"; non come l'hai scritta tu.
Come fai a capire che non scrive le virgolette "....." visto che le creazione di elementi tramite DOM è "virtuale" non effettiva nel documento.

**venzo** · 22-06-2009, 22:39

Questa è la pagina html:

<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css" />
<STYLE type=text/css>.box {
BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #000000 1px solid; COLOR: #000000; PADDING-TOP: 0px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffff00
}
.bar {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; CURSOR: move; COLOR: #ffffff; PADDING-TOP: 2px; BACKGROUND-COLOR: #008080
}
.content {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 1em
}
</STYLE>

<style type="text/css">
#container #divAlert
{ border-right: black 2px solid;
padding-right: 5px;
border-top: black 2px solid;
display: none;
padding-left: 5px;
right: 0px;
padding-bottom: 5px;
border-left: black 2px solid;
width: 400px;
color: black;
padding-top: 5px;
border-bottom: black 2px solid;
position: absolute;
top: 50px;
height: 00px;
background-color: white;
text-align: justify; }
p.title
{
padding: 0px;
border: 0px;
margin: 0px;
text-align: center;
background-color:blue;
color:white;
font-weight:bold;
}
</style>

<script type="text/javascript">
//<![CDATA[
function myTextContent(obj,s){
if(document.all)
obj.innerText = s;
else
obj.textContent = s; }

function creaDiv() {
var newdiv1 = document.createElement("div");
newdiv1.setAttribute("class", "box");
newdiv1.setAttribute("id", "container" );
text = document.createTextNode(String.fromCharCode(10));
newdiv1.appendChild(text);

var newdiv2 = document.createElement("div");
newdiv2.setAttribute("id", "divAlert");
newdiv2.setAttribute("class", "bar");
newdiv2.getElementsByTagName
newdiv2.setAttribute('onmousedown', "dragStart(event, 'container')" );

var newdiv3 = document.createElement("p");
newdiv3.setAttribute("class", "title") ;
text = document.createTextNode("text goes here");
newdiv3.appendChild(text);
newdiv2.appendChild(newdiv3);

var newdiv4 = document.createElement('p');
newdiv4.setAttribute("id", "pAlert");
newdiv4.setAttribute('align', 'justify');
newdiv2.appendChild(newdiv4);

var newdiv5 = document.createElement('p');
newdiv5.setAttribute('align', 'center');

var newdiv6 = document.createElement('input');
newdiv6.setAttribute("id", "ok");
newdiv6.setAttribute('style.width', '50px');
newdiv6.setAttribute('onclick', "document.getElementById('divAlert').style.display ='none'" );
newdiv6.setAttribute('type', 'button');
newdiv6.setAttribute("value", "OK");
newdiv5.appendChild(newdiv6);
newdiv2.appendChild(newdiv5);
newdiv1.appendChild(newdiv2);

document.getElementsByTagName('body')[0].appendChild(newdiv1);
alert(newdiv1.outerHTML);
}

function centerDiv(idDiv, heightDiv, widthDiv) {

var frameWidth = 0;
var frameHeight = 0;
if (self.innerWidth) { /* Firefox */ String.fromCharCode(39)
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
document.getElementById(idDiv).style.top = (frameHeight - heightDiv) / 2;
document.getElementById(idDiv).style.left = (frameWidth - widthDiv) / 2; }
else if (document.documentElement && document.documentElement.clientWidth) { //alert('documentElement');
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
document.getElementById(idDiv).style.top = document.body.scrollTop + (frameHeight - heightDiv) / 2;
document.getElementById(idDiv).style.left = document.body.scrollLeft + (frameWidth - widthDiv) / 2; }
else if (document.body) { /* IE 6 */
frameWidth = document.body.clientWidth ;
frameHeight = document.body.clientHeight;
var nlarghezza = document.body.scrollTop
var nAltezza = document.body.scrollLeft
document.getElementById(idDiv).style.height = heightDiv;
document.getElementById(idDiv).style.width = widthDiv;

document.getElementById(idDiv).style.top = document.body.scrollTop + (frameHeight - heightDiv) / 2;
document.getElementById(idDiv).style.left = document.body.scrollLeft + (frameWidth - widthDiv) / 2; }
else { return;
} }

function showAlert(s){
creaDiv();
centerDiv(document.getElementById('divAlert').id,1 00,400);
myTextContent(document.getElementById('pAlert'), s);
document.getElementById('divAlert').style.display= 'block';
}

function mouse_down(event, ele_name) {
being_dragged = true;
element = ele_name;
document.getElementById(element).style.cursor = 'move';
}

function mouse_up() {
being_dragged = false;
element = "container";
document.getElementById(element).style.cursor = 'auto';
document.getElementById(element).style.top = y +'px';
document.getElementById(element).style.left = x +'px';
}

function Browser() {

var ua, s, i;

this.isIE = false;
this.isNS = false;
this.version = null;

ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

// Treat any other "Gecko" browser as NS 6.1.

s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

var el;
var x, y;

// If an element id was given, find it. Otherwise use the element being
// clicked on.

if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;

// If this is a text node, use its parent element.

if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Save starting positions of cursor and element.

dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);

if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;

// Update element's z-index.

dragObj.elNode.style.zIndex = ++dragObj.zIndex;

// Capture mousemove and mouseup events on the page.

if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}

function dragGo(event) {

var x, y;

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Move drag element by the same amount the cursor has moved.

dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";

if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}

function dragStop(event) {

// Clear the drag element global.

dragObj.elNode = null;

// Stop capturing mousemove and mouseup events.

if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
//]]>
</script>

</head>
<body>

/*------ questo è il codice che la funzione dovrebbe creare. In questo modo funziona. Creandolo conb la funziona no ?

<div class=box id="container" >
<div class=bar id="divAlert" onmousedown="dragStart(event, 'container')">
<p class="title">ATTENZIONE</p>
<p id="pAlert" align="justify"></p>
<p align="center">
<input id="ok" style="WIDTH: 50px" onclick="document.getElementById('divAlert').style .display='none';" type="button" value="OK">
</p>
</div>
</div>

*/-------

<input type="button" value="alert" onclick="showAlert('Saluti')" />
</body>

Dacci uno sguardo.

**cavicchiandrea** · 23-06-2009, 10:37

Originariamente inviato da cavicchiandrea
Ma non è chiarissimo, idee un po confuse? La guida al DOM l'hai letta? Se si qual'è la parte che non hai capito?

Originariamente inviato da venzo
.....
Dacci uno sguardo.

Riflettici e ricordati che alla fine il problema è il tuo, la comunità può darti un aiuto non fare il lavoro per te, chiaramene è solo un consglio.

P.S. Comunque in futuro quando posti codice tipo html/script/css/etc... usa il tasto [#] facilita la lettura, grazie.

**venzo** · 23-06-2009, 16:59

Ci mancherebbe che voi, oltre al grande contributo che ci date, facciate anche il nostro lavoro.
No, è che ho letto il manuale e ho prodotto l'esempio che ti ho allegato. Io riproduco in toto il gruppo DIV, ma la stranezza che non riesco a capire, è che quando copio quello che creo con outerHTML e lo incollo nella pagina funziona. Se invece lancio la funzione, come da esempio, il DIV compare, ma senza formazzazione del css.

**cavicchiandrea** · 23-06-2009, 20:47

Originariamente inviato da venzo
Ci mancherebbe che voi, oltre al grande contributo che ci date, facciate anche il nostro lavoro.
No, è che ho letto il manuale e ho prodotto l'esempio che ti ho allegato. Io riproduco in toto il gruppo DIV, ma la stranezza che non riesco a capire, è che quando copio quello che creo con outerHTML e lo incollo nella pagina funziona. Se invece lancio la funzione, come da esempio, il DIV compare, ma senza formazzazione del css.

Ok, adesso è + chiaro, come t'ho già (e non ho capito se l'hai provato?) imposta la classe cosi:
elemento.className='nomeclasse'.

**venzo** · 23-06-2009, 22:28

Grazie, funziona.

Discussione: creazione dinamica tag DIV

Strumenti discussione

Ricerca discussione

Visualizza

creazione dinamica tag DIV

Permessi di invio