dynamic/javascript: div in div = 3 divs..!?

R

.rhavin grobert

<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript" >

//
-----------------------------------------------------------------------
function test()
{
// basically, this fn parses for 'qsel'-tags (a placeholder) and
// *should* replace them whith a div-contianer containing another
// div and a select-element. to see whats going on, we fill the
// textarea with the result of that process and also do some fancy
// coloring to show the ** THREE ** (!?!) divs resulting.

var qualsGroup = document.getElementsByTagName("qsel");

var cnt = qualsGroup.length;
while (cnt-->0)
{
var qid = qualsGroup[cnt].id;
var parent = qualsGroup[cnt].parentNode;
var zIndex = qualsGroup[cnt].zIndex;

// to free the id, we remove the placeholder
parent.removeChild(qualsGroup[cnt]);

// we set up a new selector with the dummys id
// and fill it with a test-option.
var qsel = document.createElement('select');
qsel.name = qid;
qsel.id = qid;
qsel.zIndex = zIndex + 1;
var opt = new Option;
opt.value = '1';
opt.text = 'test-1';
qsel.options[0] = opt;
qsel.style.background = 'transparent';
qsel.style.width = '400px';

// this is our container-div; it should contain one
// additional div and a selector
var qselCont = document.createElement('div');
qselCont.style.display = 'inline';
qselCont.style.border = '2px solid #00f';
qselCont.style.padding = '10px';
qselCont.style.background = '#555';
qselCont.zIndex = zIndex;
qselCont.id = qid + '_c';

// this is the other div inside the container
var qselFlow = document.createElement('div');
qselFlow.style.border = '1px solid #f00';
qselFlow.style.width = '80px';
qselFlow.style.height = '40px';
qselFlow.style.background = '#77F';
qselFlow.id = qid + '_f';


// now we append the flow-div and the selector
// to our container-div
qselCont.appendChild(qselFlow);
qselCont.appendChild(qsel);

// and append our container to the parent
// of our placeholder
parent.appendChild(qselCont);
}

// we fill the textarea with the resulting html
document.getElementById('rs').value =
document.body.parentNode.innerHTML;
return true;
}

</script>

</head><body onload="test()">

<p>test a1 <qsel id="a1" /></p>
<textarea id="rs" cols="100" rows="50"></textarea>

</body><html>
 
R

RobG

<html><head>
Click to expand...

Assuming HTML 4.01.

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
Click to expand...

There's no need to confuse things with XML-style markup, just use
plain HTML 4.01.
<script type="text/javascript" >

//
-----------------------------------------------------------------------
Click to expand...

Be careful with wrapping when posting, others should be able to copy
and paste your code without having to fix errors introduced by auto-
wrapping. Manually wrap lines at about 70 characters, check that the
code can be copy and pasted without additional errors.

function test()
{
// basically, this fn parses for 'qsel'-tags (a placeholder) and
Click to expand...

It doesn't seem to "parse" anything. It uses getElementsByTagName to
collect elements with an invalid tag name, then uses the properties of
those elements for properties of DOM elements.

// *should* replace them whith a div-contianer containing another
// div and a select-element. to see whats going on, we fill the
// textarea with the result of that process and also do some fancy
// coloring to show the ** THREE ** (!?!) divs resulting.

var qualsGroup = document.getElementsByTagName("qsel");
Click to expand...

It is a bad idea to use non-standard markup to store data as values
and properties. If you want to store data, use a javascript object.

var cnt = qualsGroup.length;
while (cnt-->0)
Click to expand...

That would be better as:

while ( cnt-- )
{
var qid = qualsGroup[cnt].id;
var parent = qualsGroup[cnt].parentNode;
var zIndex = qualsGroup[cnt].zIndex;

// to free the id, we remove the placeholder
parent.removeChild(qualsGroup[cnt]);
Click to expand...

There is no need to set the ID of that element in the first place,
just set the id and name of the new element directly.

[...]
var opt = new Option;
opt.value = '1';
opt.text = 'test-1';
qsel.options[0] = opt;
Click to expand...

Those four lines could be:

qsel.options[0] = new Option('1', '1');

qsel.style.background = 'transparent';
qsel.style.width = '400px';

// this is our container-div; it should contain one
// additional div and a selector
var qselCont = document.createElement('div');
qselCont.style.display = 'inline';
Click to expand...

Would a span element do the job?

[...]
// we fill the textarea with the resulting html
document.getElementById('rs').value =
document.body.parentNode.innerHTML;
Click to expand...

It is not a good idea to write HTML markup to a textarea element's
innerHTML property, especially if the text contains (or might contain)
markup. Use the (standards compliant) value property.
return true;
Click to expand...

Why?
 
C

Claus Reibenstein

..rhavin grobert said:
<html><head>
[...]
</body><html>
Click to expand...

Und was wolltest Du uns in de.comm.software.mozilla.browser damit jetzt
sagen?

Gruß. Claus
 
S

Sven Ebert

Claus said:
.rhavin grobert said:
<html><head>
[...]
</body><html>
Click to expand...

Und was wolltest Du uns in de.comm.software.mozilla.browser damit jetzt
sagen?
Click to expand...

Die Frage ist sicher übergreifend gestellt, so ganz nach dem Motto:
"Funktioniert das was ich da in Javascript bastel überhaupt (sofern das
Javascript funktioniert) in einem der Mozilla-Browser?" :)

Ciao
Sven
 
T

Thomas 'PointedEars' Lahn

RobG said:
Assuming HTML 4.01.
Click to expand...

One should emphasize that the document must not start like that. A DOCTYPE
declaration before that is required, not least because a missing declaration
triggers Compatibility/Quirks Mode.
var opt = new Option;
opt.value = '1';
opt.text = 'test-1';
qsel.options[0] = opt;
Click to expand...

Those four lines could be:

qsel.options[0] = new Option('1', '1');
Click to expand...

That is not equivalent. I also find the former approach better because I
tend to confuse the position of the arguments for value and text; it is not
as efficient, though.


PointedEars
 
R

.rhavin grobert

Has anybody even read that part? The question is:
why in the world do i get 3 divs?
It is a bad idea to use non-standard markup to store data as values
and properties. If you want to store data, use a javascript object.
Click to expand...

I disagree. it works well because unknown markup is to be ignored.
That would be better as:

      while ( cnt-- )
Click to expand...

it's internally compiled to while(cnt-->0) so it wouldnt be better
- just a little shorter.
 var qid    = qualsGroup[cnt].id;
 var parent = qualsGroup[cnt].parentNode;
 var zIndex = qualsGroup[cnt].zIndex;

 // to free the id, we remove the placeholder
 parent.removeChild(qualsGroup[cnt]);
Click to expand...

There is no need to set the ID of that element in the first place,
just set the id and name of the new element directly.
Click to expand...

of course there is and the explanation stand right in the code: i have
to
first kill the old tag to free the id and than i set the new elements
id to the saved value.
var opt = new Option;
opt.value = '1';
opt.text  = 'test-1';
qsel.options[0] = opt;
Click to expand...

Those four lines could be:

qsel.options[0] = new Option('1', '1');
Click to expand...

yes, in that case. in tthe original code there is some computing that
i dont want to put into a single line.
Would a span element do the job?
Click to expand...

not from a logical point of view: i want a rectangle, not something
that could span like a tetris-shape 4.
It is not a good idea to write HTML markup to a textarea element's
innerHTML property, especially if the text contains (or might contain)
markup. Use the (standards compliant) value property.
Click to expand...

er... thats exactly what i do: i write TO the textareas value
property.
Why?
Click to expand...

that a fossil from the original code.

THX - really - for your elaborate answer, but it still doesnt answer
my
original question: why do i get 3 divs?

~.rhavin;)
 
R

.rhavin grobert

Claus said:
.rhavin grobert schrieb:
<html><head>
[...]
</body><html>
Click to expand...
Click to expand...

Und was wolltest Du uns in de.comm.software.mozilla.browser damit jetzt
sagen?
Click to expand...

Die Frage ist sicher übergreifend gestellt, so ganz nach dem Motto:
"Funktioniert das was ich da in Javascript bastel überhaupt (sofern das
Javascript funktioniert) in einem der Mozilla-Browser?" :)

Ciao
Sven
Click to expand...

de: Nein, die Frage ist: warum rendert der FF _3_ divs und nicht 2,
wie er im
sourcecode (textarea) anzeigt?

en: the original question is: why does the FF render 3 divs instead of
the
expeced and (inside the textareas code represented) two divs?
 
R

.rhavin grobert

Claus Reibenstein schrieb:
.rhavin grobert schrieb:
<html><head>
[...]
</body><html>
Und was wolltest Du uns in de.comm.software.mozilla.browser damit jetzt
sagen?
Click to expand...
Click to expand...
Die Frage ist sicher übergreifend gestellt, so ganz nach dem Motto:
"Funktioniert das was ich da in Javascript bastel überhaupt (sofern das
Javascript funktioniert) in einem der Mozilla-Browser?" :)
Click to expand...
Ciao
Sven
Click to expand...

de: Nein, die Frage ist: warum rendert der FF _3_ divs und nicht 2,
wie er im sourcecode (textarea) anzeigt?

en: the original question is: why does the FF render 3 divs instead of
the expeced and (inside the textareas code represented) two divs?
Click to expand...

i should add: IE does the same,
but FF is a browser, and it is still developed by developers;-)
 
R

.rhavin grobert

On 20 Nov., 05:25, RobG <[email protected]> wrote:
Click to expand...
The question is:
why in the world do i get 3 divs?

not from a logical point of view: i want a rectangle, not something
that could span like a tetris-shape 4.
Click to expand...

that one rang the bell!! the "3" divs i noticed were 1 rectangle div
and
one span-like div. getting rid of the "error" was simple:

qselCont.style.display = 'inline-block';


THX to all,

~.rhavin;)
 
S

SAM

Le 11/20/09 2:19 AM, .rhavin grobert a écrit :
<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript" >

//
-----------------------------------------------------------------------
function test()
{
// basically, this fn parses for 'qsel'-tags (a placeholder) and
// *should* replace them whith a div-contianer containing another
// div and a select-element. to see whats going on, we fill the
// textarea with the result of that process and also do some fancy
// coloring to show the ** THREE ** (!?!) divs resulting.

var qualsGroup = document.getElementsByTagName("qsel");

var cnt = qualsGroup.length;
while (cnt-->0)
Click to expand...

usualy it is : while(cnt--)
{
var qid = qualsGroup[cnt].id;
var parent = qualsGroup[cnt].parentNode;
var zIndex = qualsGroup[cnt].zIndex;
Click to expand...

/* zIndex is a style */
var zIndex = qualsGroup[cnt].style.zIndex;
// to free the id, we remove the placeholder
parent.removeChild(qualsGroup[cnt]);

// we set up a new selector with the dummys id
// and fill it with a test-option.
var qsel = document.createElement('select');
qsel.name = qid;
qsel.id = qid;
qsel.zIndex = zIndex + 1;
Click to expand...

qsel.style.zIndex = zIndex + 1;
/* I do not understand why you need a z-index ... */
var opt = new Option;
opt.value = '1';
opt.text = 'test-1';
qsel.options[0] = opt;
qsel.style.background = 'transparent';
qsel.style.width = '400px';

// this is our container-div; it should contain one
// additional div and a selector
var qselCont = document.createElement('div');
qselCont.style.display = 'inline';
qselCont.style.border = '2px solid #00f';
qselCont.style.padding = '10px';
qselCont.style.background = '#555';
qselCont.zIndex = zIndex;
Click to expand...

qselCont.style.zIndex = zIndex;
qselCont.id = qid + '_c';

// this is the other div inside the container
var qselFlow = document.createElement('div');
qselFlow.style.border = '1px solid #f00';
qselFlow.style.width = '80px';
qselFlow.style.height = '40px';
qselFlow.style.background = '#77F';
qselFlow.id = qid + '_f';


// now we append the flow-div and the selector
// to our container-div
qselCont.appendChild(qselFlow);
qselCont.appendChild(qsel);

// and append our container to the parent
// of our placeholder
parent.appendChild(qselCont);
}

// we fill the textarea with the resulting html
document.getElementById('rs').value =
document.body.parentNode.innerHTML;
Click to expand...

var val = document.body.parentNode.innerHTML.replace(/</g,'&lt');
document.getElementById('rs').value = val;
 
T

Thomas 'PointedEars' Lahn

..rhavin grobert said:
Has anybody even read that part?
Click to expand...

No, you see, we are all analphabets here. Idiot.
The question is: why in the world do i get 3 divs?
Click to expand...

You are not getting 3 divs. Because your markup is not Valid you have two
`div' elements creating a block each and the third element that causes
invalidity to be rendered in as if it generated a block of its own. You
have a wrong definition of `div' anyway.
I disagree. it works well because unknown markup is to be ignored.
Click to expand...

You are mistaken. Unknown *tags* are to be ignored which should cause

<qsel>foo</qsel>

to be parsed as

foo

(and surely rendered so). Besides, in a fully compliant DOM implementation
based on a fully compliant markup parser there would not be an element
object in the document tree, so you are wrong there as well.
it's internally compiled to while(cnt-->0)
Click to expand...

No, it most likely is not. Think about what would happen if `cnt' were less
than 0 when execution enters the loop.
so it wouldnt be better
Click to expand...

Yes, it would. It moves this step into the faster (usually machine-
dependent) code of the implementation and saves one RelationalExpression
to be parsed.
- just a little shorter.
Click to expand...

And it has a noticable positive effect on runtime efficiency.
var qid = qualsGroup[cnt].id;
var parent = qualsGroup[cnt].parentNode;
var zIndex = qualsGroup[cnt].zIndex;

// to free the id, we remove the placeholder
parent.removeChild(qualsGroup[cnt]);
Click to expand...

There is no need to set the ID of that element in the first place,
just set the id and name of the new element directly.
Click to expand...

of course there is and the explanation stand right in the code: i have
to first kill the old tag to free the id and than i set the new elements
id to the saved value.
Click to expand...

You clearly don't know what you are talking about, so a bit more humility on
your part would be appropriate in the future. That is, if you would like to
have further replies.

And leave de.comm.software.mozilla.browser out of the equation. F'up2 set.
not from a logical point of view: i want a rectangle, not something
that could span like a tetris-shape 4.
Click to expand...

SPAN elements can be display:block.
er... thats exactly what i do: i write TO the textareas value
property.
Click to expand...

He was probably talking about `value' property of the BODY element object's
first textnode child. So do you want markup code to be displayed in the
TEXTAREA? If yes, you are correct (but you should lose the reference
worms).


Score adjusted

PointedEars
 
T

Thomas 'PointedEars' Lahn

..rhavin grobert said:
de: [...] die Frage ist: warum rendert der FF 3 divs und nicht 2,
wie er im sourcecode (textarea) anzeigt?
Click to expand...

Das tut er nicht. Du solltest Dich erst mit den Grundlagen beschäftigen,
bevor Du einen Browser-Bug annimmst, denn bis dahin ist es weitaus
wahrscheinlicher, dass stattdessen Du etwas falsch gemacht hast.

Abgesehen davon crosspostet man nicht ohne Followup-To in zwei verschiedene
Gruppen für zwei verschiedene natürliche Sprachen mit zwei verschiedenen
Themen. Es gibt (mindestens) eine internationale (hauptsächlich englisch-
sprachige) Newsgroup zu Mozilla (in der mozilla.*-Hierarchie), in die Du
hättest crossposten können, und es gibt eine deutschsprachige Newsgroup zu
JavaScript, de.comp.lang.javascript, in die Du stattdessen hättest
crossposten können.

en: the original question is: why does the FF render 3 divs instead of
the expeced and (inside the textareas code represented) two divs?
Click to expand...

It doesn't. Please get a minimum clue before complaining about "wrong"
browser behavior, because until then very likely any problem you observe is
your fault instead.

Besides, it is considered inappropriate to cross-post without followup-to
to newsgroups serving two different languages *and* two different
topics. There is an international (primarly English-speaking) Mozilla
browser group to which you could have crossposted (in the mozilla.*
hierarchy), and a German-speaking JavaScript newsgroup,
de.comp.lang.javascript, to which you could have crossposted instead.

Please read and adhere to the hints in
<http://www.catb.org/~esr/faqs/smart-questions.html> so you can do better in
the future.


F'up2 poster

PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I fix this issue in sqaurespace code block? 1
Maybe a bug in JavaScript? 2
Check forms With JavaScript 1
Filename undefined for Blob ? 1
JavaScript: how to keep track of the circle in canvas on specific path? 0
Help with code 0
Php modal form to email 1
Only one table shows up with the information 2

Members online

Total: 78 (members: 2, guests: 76)
Robots: 395

Forum statistics

Threads
473,982
Messages
2,570,189
Members
46,734
Latest member
manin

Latest Threads

Top