DOM alteration rendering

alexandre damiron

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>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChi ld(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh() ;
document.recalc(true);
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie" width="600px"
allowTransparency="true" scrolling="no" style="border-width:0px;
margin:0px" class="normal" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td height="50px" class="imagebutton">static test</td>
</tr>
</table>
</body>
</html>

Jul 23 '05 #1

Subscribe Reply

2030

Mick White

alexandre damiron wrote:

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>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChi ld(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

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

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh() ;
I don't think the table element has a "refresh()" method
document.recalc(true);
What is "recalc()" ?
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie"
width="600px" allowTransparency="true" scrolling="no"
style="border-width:0px; margin:0px" class="normal"
frameborder="0"></iframe>

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

Mick

Jul 23 '05 #2

Grant Wagner

"alexandre damiron" <wp*****@yahoo.com> wrote in message
news:42***********************@news.free.fr...

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>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChi ld(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh() ;
document.recalc(true);
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie" width="600px"
allowTransparency="true" scrolling="no" style="border-width:0px;
margin:0px" class="normal" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td height="50px" class="imagebutton">static test</td>
</tr>
</table>
</body>
</html>

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.getElementById('myTbody').appendChild(new Tr);

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

var myTable = document.getElementById('myTable');
if (myTable)
{
var myTbody;
for (var ii = 0; ii < myTable.childNodes.length; ++ii)
{
if ('tbody' == myTable.childNodes[ii].nodeName.toLowerCase())
{
myTbody = myTable.childNodes[ii];
break;
}
}
if (myTbody)
{
// ...
}
}

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #3

alexandre damiron

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 :

alexandre damiron wrote:
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>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChi ld(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

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

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh() ;

I don't think the table element has a "refresh()" method
document.recalc(true);

What is "recalc()" ?
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie"
width="600px" allowTransparency="true" scrolling="no"
style="border-width:0px; margin:0px" class="normal"
frameborder="0"></iframe>

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

Mick

Jul 23 '05 #4

alexandre damiron

That was the problem. Thank you Grant.

Grant Wagner a écrit :

"alexandre damiron" <wp*****@yahoo.com> wrote in message
news:42***********************@news.free.fr...
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>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendC hild(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh ();
document.recalc(true);
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie" width="600px"
allowTransparency="true" scrolling="no" style="border-width:0px;
margin:0px" class="normal" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td height="50px" class="imagebutton">static test</td>
</tr>
</table>
</body>
</html>

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.getElementById('myTbody').appendChild(new Tr);

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

var myTable = document.getElementById('myTable');
if (myTable)
{
var myTbody;
for (var ii = 0; ii < myTable.childNodes.length; ++ii)
{
if ('tbody' == myTable.childNodes[ii].nodeName.toLowerCase())
{
myTbody = myTable.childNodes[ii];
break;
}
}
if (myTbody)
{
// ...
}
}

Jul 23 '05 #5

Fred Oz

alexandre damiron wrote:

Thank you Mick

[...]

alexandre damiron wrote: [...]
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");

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

newtd.style.className = 'imagebutton';

[...]

--
Fred

Jul 23 '05 #6

Similar topics

3008

Linguistically correct Python text rendering

by: David Opstad | last post by:

I have a question about text rendering I'm hoping someone here can answer. Is there a way of doing linguistically correct rendering of Unicode strings in Python? In simple cases like Latin or...

Python

1757

Help with buggy rendering

by: Beetlegeuse | last post by:

Here is a screenshot of three different versions of rendering of the trouble area: http://img371.imageshack.us/img371/2572/layout8xg.gif (ignore the language of the text) The first...

HTML / CSS

3018

Dynamic HttpTableRow not rendering cell content...

by: David Whitney | last post by:

All: I have a control that renders a table. As the table is rendered, each row in the table is constructed by creating a run-time (dynamic) object that is derived from an HtmlTableRow. The row...

ASP.NET

2614

Server side preview of IE rendering...

by: Dave A | last post by:

I am writing an ASP.NET tool that will allow the client to create their own online froms. ie the client can add tect boxes, text, drop downs,etc with absolutely no technical skill what so ever....

ASP.NET

4104

C++ OpenGL rendering, wxPython GUI?

by: tobfon | last post by:

I'm creating a scientific visualization application with rather high demands on performance. I've created a nice rendering engine for it in C++/OpenGL and a python interface to the rendering...

Python

10084

Html Rendering in Winforms

by: ramesh | last post by:

Hi all, I am facing a problem with the rendering of html into a windows application (C# .NET). I am trying with two possible approaches: 1. Use a control that directly renders the html into...

C# / C Sharp

1418

Canonical Science Today, rendering mathematics with CSS

by: Juan R. | last post by:

Since the idea of encoding mathematics using MathML is being very far from popular due to a number of factors -expensive tools, bad accesibility of generated code, unusual verbosity, lack of...

.NET Framework

2305

Literal control rendering empty

by: paul.hester | last post by:

Hi all, I have a custom control with an overridden Render method. Inside this method I'm rendering each control in its collection using their RenderControl method. However, I'm running into a...

.NET Framework

2823

Rendering text question (context is MSWin UI Automation)

by: Boris Borcic | last post by:

Hello, I am trying to use UI Automation to drive an MS Windows app (with pywinauto). I need to scrape the app's window contents and use some form of OCR to get at the texts (pywinauto can't...

Python

7242

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7138

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7418

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

7075

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

7508

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

5662

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

5063

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

3222

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

781

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP