DOM alteration rendering

**Mick White** · Jul 23 '05, 06:07 PM

Re: DOM alteration rendering

alexandre damiron wrote:
[color=blue]
> The following Addel function renders a new line on Mozilla but nothing
> on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
> explanation ? Thanks a lot.
>
> <html>
> <head>
> <title>Mozill a Rich Text Editing Demo</title>
> <link rel=stylesheet href="./css/Flux.css" type="text/css" />
>
> <script language="JavaS cript" type="text/javascript">
> function Addel(){
> var newtr = document.create Element("tr");
> var newtd = document.create Element("td");
> var oTextNode = document.create TextNode("Test if text");
> document.getEle mentById("table paratest").appe ndChild(newtr);
> newtr.appendChi ld(newtd);
> newtd.setAttrib ute("class", "imagebutto n");
> newtd.setAttrib ute("height", "100px");
> newtd.appendChi ld(oTextNode);[/color]

I would approach this differently:
newtd.className ="imagebutto n"
Forget about "height", no such attribute for a <td>

[color=blue]
> /*
> var newli = document.create Element("LI");
> document.body.a ppendChild(newl i);
> newli.appendChi ld(oTextNode);
> */
> if(navigator.ap pName == "Microsoft Internet Explorer"){
> document.getEle mentById("table paratest").refr esh();[/color]

I don't think the table element has a "refresh()" method
[color=blue]
> document.recalc (true);[/color]

What is "recalc()" ?
[color=blue]
> }
> }
> </script>
> </head>
> <body onLoad="Addel() " >
> <table id="tableparate st" cellpadding="0" cellspacing="0" >
> <tr>
> <td>
> <iframe id="edit" name="testnamei e"
> width="600px" allowTransparen cy="true" scrolling="no"
> style="border-width:0px; margin:0px" class="normal"
> frameborder="0" ></iframe>[/color]

Where's the <iframe> "src", and what is "allowTranspare ncy"?
[snip]

Mick

**Grant Wagner** · Jul 23 '05, 06:07 PM

Re: DOM alteration rendering

"alexandre damiron" <wpceuro@yahoo. com> wrote in message
news:421b94cc$0 $13194$626a14ce @news.free.fr.. .[color=blue]
> The following Addel function renders a new line on Mozilla but nothing
> on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
> explanation ? Thanks a lot.
>
> <html>
> <head>
> <title>Mozill a Rich Text Editing Demo</title>
> <link rel=stylesheet href="./css/Flux.css" type="text/css" />
>
> <script language="JavaS cript" type="text/javascript">
> function Addel(){
> var newtr = document.create Element("tr");
> var newtd = document.create Element("td");
> var oTextNode = document.create TextNode("Test if text");
> document.getEle mentById("table paratest").appe ndChild(newtr);
> newtr.appendChi ld(newtd);
> newtd.setAttrib ute("class", "imagebutto n");
> newtd.setAttrib ute("height", "100px");
> newtd.appendChi ld(oTextNode);
>
> /*
> var newli = document.create Element("LI");
> document.body.a ppendChild(newl i);
> newli.appendChi ld(oTextNode);
> */
> if(navigator.ap pName == "Microsoft Internet Explorer"){
> document.getEle mentById("table paratest").refr esh();
> document.recalc (true);
> }
> }
> </script>
> </head>
> <body onLoad="Addel() " >
> <table id="tableparate st" cellpadding="0" cellspacing="0" >
> <tr>
> <td>
> <iframe id="edit" name="testnamei e" width="600px"
> allowTransparen cy="true" scrolling="no" style="border-width:0px;
> margin:0px" class="normal" frameborder="0" ></iframe>
> </td>
> </tr>
> <tr>
> <td height="50px" class="imagebut ton">static test</td>
> </tr>
> </table>
> </body>
> </html>[/color]

Whether or not it shows in your HTML code, the browser creates a <tbody>
element to contain the rows. You can not append a <tr> directly to a
<table>, you must append it to the <tbody>. The easiest thing to do is
simply include the <tbody> element in your HTML, then append to that:

<table ...>
<tbody id="myTbody">

and your code:

document.getEle mentById('myTbo dy').appendChil d(newTr);

If you don't include the <tbody> in your HTML, then you must rely on
code to find it:

var myTable = document.getEle mentById('myTab le');
if (myTable)
{
var myTbody;
for (var ii = 0; ii < myTable.childNo des.length; ++ii)
{
if ('tbody' == myTable.childNo des[ii].nodeName.toLow erCase())
{
myTbody = myTable.childNo des[ii];
break;
}
}
if (myTbody)
{
// ...
}
}

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

**alexandre damiron** · Jul 23 '05, 06:07 PM

Re: DOM alteration rendering

Thank you Mick
- working on "className" attribute is a better practice, you are right.
- yes, let's forget about the height. I'll take care of that. But I
should be able to read "Test if text". I think my line isn't in fact
displayed at all on IE while it is in Mozilla.
- Sorry for the Iframe. It is just a part of another dynamic loading
feature which has nothing to do with the current problem.
- Yes, recalc() and refresh() are microsoft-only functions created by
them to "patch" rendering difficulties on IE. It did not work in my case.
- The disabled 3 lines worked on IE when enabled, and output a point
line. It worked on Mozilla too, but in this case Mozilla does not output
the new line anymore, cause oTextNode is unique and can be assigned one
time only. This is normal. But what is that IE problem with newtr ? Does
IE limit output to one generation (no subchildren) ?

Mick White a écrit :[color=blue]
> alexandre damiron wrote:
>[color=green]
>> The following Addel function renders a new line on Mozilla but nothing
>> on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
>> explanation ? Thanks a lot.
>>
>> <html>
>> <head>
>> <title>Mozill a Rich Text Editing Demo</title>
>> <link rel=stylesheet href="./css/Flux.css" type="text/css" />
>> <script language="JavaS cript" type="text/javascript">
>> function Addel(){
>> var newtr = document.create Element("tr");
>> var newtd = document.create Element("td");
>> var oTextNode = document.create TextNode("Test if text");
>> document.getEle mentById("table paratest").appe ndChild(newtr);
>> newtr.appendChi ld(newtd);
>> newtd.setAttrib ute("class", "imagebutto n");
>> newtd.setAttrib ute("height", "100px");
>> newtd.appendChi ld(oTextNode);[/color]
>
>
>
> I would approach this differently:
> newtd.className ="imagebutto n"
> Forget about "height", no such attribute for a <td>
>
>[color=green]
>> /*
>> var newli = document.create Element("LI");
>> document.body.a ppendChild(newl i);
>> newli.appendChi ld(oTextNode);
>> */
>> if(navigator.ap pName == "Microsoft Internet Explorer"){
>> document.getEle mentById("table paratest").refr esh();[/color]
>
>
> I don't think the table element has a "refresh()" method
>[color=green]
>> document.recalc (true);[/color]
>
>
> What is "recalc()" ?
>[color=green]
>> }
>> }
>> </script>
>> </head>
>> <body onLoad="Addel() " >
>> <table id="tableparate st" cellpadding="0" cellspacing="0" >
>> <tr>
>> <td>
>> <iframe id="edit" name="testnamei e"
>> width="600px" allowTransparen cy="true" scrolling="no"
>> style="border-width:0px; margin:0px" class="normal"
>> frameborder="0" ></iframe>[/color]
>
>
> Where's the <iframe> "src", and what is "allowTranspare ncy"?
> [snip]
>
> Mick[/color]

**alexandre damiron** · Jul 23 '05, 06:07 PM

Re: DOM alteration rendering

That was the problem. Thank you Grant.

Grant Wagner a écrit :[color=blue]
> "alexandre damiron" <wpceuro@yahoo. com> wrote in message
> news:421b94cc$0 $13194$626a14ce @news.free.fr.. .
>[color=green]
>>The following Addel function renders a new line on Mozilla but nothing
>>on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
>>explanation ? Thanks a lot.
>>
>><html>
>><head>
>><title>Mozill a Rich Text Editing Demo</title>
>><link rel=stylesheet href="./css/Flux.css" type="text/css" />
>>
>><script language="JavaS cript" type="text/javascript">
>>function Addel(){
>>var newtr = document.create Element("tr");
>>var newtd = document.create Element("td");
>>var oTextNode = document.create TextNode("Test if text");
>>document.getE lementById("tab leparatest").ap pendChild(newtr );
>>newtr.appendC hild(newtd);
>>newtd.setAttr ibute("class", "imagebutto n");
>>newtd.setAttr ibute("height", "100px");
>>newtd.appendC hild(oTextNode) ;
>>
>>/*
>>var newli = document.create Element("LI");
>>document.body .appendChild(ne wli);
>>newli.appendC hild(oTextNode) ;
>>*/
>>if(navigator. appName == "Microsoft Internet Explorer"){
>>document.getE lementById("tab leparatest").re fresh();
>>document.reca lc(true);
>>}
>>}
>></script>
>></head>
>><body onLoad="Addel() " >
>><table id="tableparate st" cellpadding="0" cellspacing="0" >
>><tr>
>><td>
>><iframe id="edit" name="testnamei e" width="600px"
>>allowTranspar ency="true" scrolling="no" style="border-width:0px;
>>margin:0px" class="normal" frameborder="0" ></iframe>
>></td>
>></tr>
>><tr>
>><td height="50px" class="imagebut ton">static test</td>
>></tr>
>></table>
>></body>
>></html>[/color]
>
>
> Whether or not it shows in your HTML code, the browser creates a <tbody>
> element to contain the rows. You can not append a <tr> directly to a
> <table>, you must append it to the <tbody>. The easiest thing to do is
> simply include the <tbody> element in your HTML, then append to that:
>
> <table ...>
> <tbody id="myTbody">
>
> and your code:
>
> document.getEle mentById('myTbo dy').appendChil d(newTr);
>
> If you don't include the <tbody> in your HTML, then you must rely on
> code to find it:
>
> var myTable = document.getEle mentById('myTab le');
> if (myTable)
> {
> var myTbody;
> for (var ii = 0; ii < myTable.childNo des.length; ++ii)
> {
> if ('tbody' == myTable.childNo des[ii].nodeName.toLow erCase())
> {
> myTbody = myTable.childNo des[ii];
> break;
> }
> }
> if (myTbody)
> {
> // ...
> }
> }
>[/color]

**Fred Oz** · Jul 23 '05, 06:08 PM

Re: DOM alteration rendering

alexandre damiron wrote:[color=blue]
> Thank you Mick[/color]
[...][color=blue][color=green]
>> alexandre damiron wrote:[/color][/color]
[...][color=blue][color=green][color=darkred]
>>> newtd.setAttrib ute("class", "imagebutto n");
>>> newtd.setAttrib ute("height", "100px");[/color][/color][/color]

Might also be worth considering using the style object rather
than setAttribute:

newtd.style.cla ssName = 'imagebutton';

[...]

--
Fred

DOM alteration rendering

DOM alteration rendering

Comment

Comment

Comment

Comment

Comment