info
Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Appending a TABLE to a DIV
14 views
Skip to first unread message
Richard Maher
May 6, 2012, 6:42:48 AM5/6/12
to
Hi,
Can someone please tell me why, in the code below, can I see the table when
I append it to the document.body but not the DIV(wire)?
That is: -
wire.appendChild(decal); // shows a ghost of the table
document.body.appendChild(decal); // shows the whole table
Cheers Richard Maher
<html>
<head>
<script language="javascript">
function load(){
var flyScreen = function() {
var OPACITY = 25;
var wire = document.createElement('div');
wire.style.visibility='visible';
wire.style.position='absolute';
wire.style.top='0px';
wire.style.left='0px';
wire.style.overflow='hidden';
wire.style.opacity=(OPACITY / 100);
wire.style.MozOpacity=(OPACITY / 100);
wire.style.filter='alpha(opacity='+OPACITY+')';
wire.style.zIndex=998;
wire.style.backgroundColor='#000000';
wire.style.width='100%';
wire.style.height='100%';
var delayMsg = "Loading";
var decal = document.createElement("table");
// decal.style.visibility='visible';
decal.border="1";
decal.style.color="blue";
// decal.style.zindex=999;
decal.style.position='absolute';
decal.style.top='0px';
decal.style.left='0px';
var decalLine,
decalChar;
for (var i=0;i<delayMsg.length;i++){
decalLine = decal.insertRow(-1);
decalChar = decalLine.insertCell(-1);
charText = document.createTextNode(delayMsg.substr(i,1));
// decalChar.style.zindex=9999;
decalChar.appendChild(charText);
// decalLine.style.zIndex=1000;
}
wire.appendChild(decal);
// document.body.appendChild(decal);
document.body.appendChild(wire);
var open = function(){
return function(){
wire.style.visibility='hidden';
}
}();
var close = function(){
return function() {
wire.style.visibility='visible';
}
}();
return {
close : close,
open : open
};
}();
}
</script>
<body onload="load()">
Some stuff
</body>
</html>
Can someone please tell me why, in the code below, can I see the table when
I append it to the document.body but not the DIV(wire)?
That is: -
wire.appendChild(decal); // shows a ghost of the table
document.body.appendChild(decal); // shows the whole table
Cheers Richard Maher
<html>
<head>
<script language="javascript">
function load(){
var flyScreen = function() {
var OPACITY = 25;
var wire = document.createElement('div');
wire.style.visibility='visible';
wire.style.position='absolute';
wire.style.top='0px';
wire.style.left='0px';
wire.style.overflow='hidden';
wire.style.opacity=(OPACITY / 100);
wire.style.MozOpacity=(OPACITY / 100);
wire.style.filter='alpha(opacity='+OPACITY+')';
wire.style.zIndex=998;
wire.style.backgroundColor='#000000';
wire.style.width='100%';
wire.style.height='100%';
var delayMsg = "Loading";
var decal = document.createElement("table");
// decal.style.visibility='visible';
decal.border="1";
decal.style.color="blue";
// decal.style.zindex=999;
decal.style.position='absolute';
decal.style.top='0px';
decal.style.left='0px';
var decalLine,
decalChar;
for (var i=0;i<delayMsg.length;i++){
decalLine = decal.insertRow(-1);
decalChar = decalLine.insertCell(-1);
charText = document.createTextNode(delayMsg.substr(i,1));
// decalChar.style.zindex=9999;
decalChar.appendChild(charText);
// decalLine.style.zIndex=1000;
}
wire.appendChild(decal);
// document.body.appendChild(decal);
document.body.appendChild(wire);
var open = function(){
return function(){
wire.style.visibility='hidden';
}
}();
var close = function(){
return function() {
wire.style.visibility='visible';
}
}();
return {
close : close,
open : open
};
}();
}
</script>
<body onload="load()">
Some stuff
</body>
</html>
Mr Ruaraidh Petrie
May 6, 2012, 1:29:28 PM5/6/12
to
Hi,
Can you plase clarify what you mean by 'shows a ghost of the table',
Thanks
Can you plase clarify what you mean by 'shows a ghost of the table',
Thanks
Richard Cornford
May 6, 2012, 3:08:12 PM5/6/12
to
Richard Maher wrote:
> Can someone please tell me why, in the code below, can I see the
> table when I append it to the document.body but not the DIV(wire)?
>
> That is: -
> wire.appendChild(decal); // shows a ghost of the table
> document.body.appendChild(decal); // shows the whole table
>
> Cheers Richard Maher
>
> <html>
> <head>
> <script language="javascript">
> function load(){
> var flyScreen = function() {
> var OPACITY = 25;
^^^^^^^ ^^
> Can someone please tell me why, in the code below, can I see the
> table when I append it to the document.body but not the DIV(wire)?
>
> That is: -
> wire.appendChild(decal); // shows a ghost of the table
> document.body.appendChild(decal); // shows the whole table
>
> Cheers Richard Maher
>
> <html>
> <head>
> <script language="javascript">
> function load(){
> var flyScreen = function() {
> var OPACITY = 25;
> var wire = document.createElement('div');
<snip>
> wire.style.opacity=(OPACITY / 100);
^^^^^^^
> wire.style.MozOpacity=(OPACITY / 100);
^^^^^^^
> wire.style.filter='alpha(opacity='+OPACITY+')';
^^^^^^^
<snip>
If you set the opacity of the DIV to 25% of opaque then it, and all of
the elements it contains (are appended to it, or its decedents) will be
75% transparent. That seems sufficient to explain the most literal
interpretation of "ghost of the table".
Richard.
Richard Maher
May 6, 2012, 5:55:47 PM5/6/12
to
"Mr Ruaraidh Petrie" <me@sorry_no_spam> wrote in message
news:NY6dnUcjG9dmKTvS...@giganews.com...
> Hi,
>
> Can you plase clarify what you mean by 'shows a ghost of the table',
>
> Thanks
Hi,
>
> Can you plase clarify what you mean by 'shows a ghost of the table',
>
> Thanks
It's very easy to reproduce using the SSCCE at the end of my original post.
Just alternate the commenting out of the following two lines: -
wire.appendChild(decal);
// document.body.appendChild(decal);
Currently, the child is being appended to the DIV and all that is visible is
a faint table border (ghost). When appended to the BODY the contents
"loading" are visible in blue.
Regards Richard Maher
Richard Maher
May 6, 2012, 6:00:36 PM5/6/12
to
"Richard Cornford" <Ric...@litotes.demon.co.uk> wrote in message
news:18-dnehfiNOGUTvS...@giganews.com...
Sure that's why I'd expect to see the cell contents (i.e. "Loading")
appearing, albeit in a faint form of blue. What I see is nothing but a faint
border/outline of the table.
As I mentioned in another post, it's very easy to reproduce using the SSCCE
at the end of my original post.
Just alternate the commenting out of the following two lines: -
wire.appendChild(decal);
// document.body.appendChild(decal);
I'm happy if everything is 25% but when I append to the DIV I get no
Just alternate the commenting out of the following two lines: -
wire.appendChild(decal);
// document.body.appendChild(decal);
contents. Z-index issue?
>
> Richard.
Regards Richard Maher
>
Andrew Poulos
May 6, 2012, 11:41:39 PM5/6/12
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function load(){
var wire = document.createElement('div');
wire.style.border = "1px dotted red";
wire.style.width = '100px';
wire.style.height = '200px';
var decal = document.createElement("table");
var delayMsg = "Loading";
var i, decalLine, decalChar, charText;
for (i = 0; i < delayMsg.length; i++){
decalLine = decal.insertRow(-1);
decalChar = decalLine.insertCell(-1);
charText = document.createTextNode(delayMsg.substr(i,1));
decalChar.appendChild(charText);
decalChar = decalLine.insertCell(-1);
charText = document.createTextNode(delayMsg.substr(i,1));
}
wire.appendChild(decal);
document.body.appendChild(wire);
}
</script>
</head>
<body onload="load()" style="margin:60px;">
<p> </p>
</body>
</html>
Andrew Poulos
Leonardo Azpurua
May 7, 2012, 8:47:24 AM5/7/12
to
"Richard Maher" <mahe...@hotspamnotmail.com> escribió en el mensaje
news:jo5kjb$mf8$1...@speranza.aioe.org...
> Hi,
>
> Can someone please tell me why, in the code below, can I see the table
> when I append it to the document.body but not the DIV(wire)?
>
> That is: -
> wire.appendChild(decal); // shows a ghost of the table
> document.body.appendChild(decal); // shows the whole table
>
> Cheers Richard Maher
> [code snipped]
>
> Can someone please tell me why, in the code below, can I see the table
> when I append it to the document.body but not the DIV(wire)?
>
> That is: -
> wire.appendChild(decal); // shows a ghost of the table
> document.body.appendChild(decal); // shows the whole table
>
> Cheers Richard Maher
>
Hi,
It is usually a good idea to simplify in order to get to the problem.
After removing the line where you add decal to document.body and restoring
the code where it is appended to wire, and then wire to document.body, I
removed the opacity handling to find a faintly visible blue text on a full
black background.
So I removed the black background and got a perfectly visible table.
Yours is just a color/opacity combination problem.
A practical programming advice is "don't byte more than you can swallow".
First solve functionality, then tackle design. Or otherwise if you prefer.
--
Richard Cornford
May 7, 2012, 8:52:32 AM5/7/12
to
Richard Maher wrote:
<snip>
Maybe you are slightly color blind (which is not that uncommon in men,
though not normally taking the form of an insensitivity to blue) because
I do see the blue text in the table cells. Granted it is not that
visible against the gray background, but the text is still there.
Getting rid of the black background on the DIV would make the text much
more visible.
Richard.
Maybe you are slightly color blind (which is not that uncommon in men,
though not normally taking the form of an insensitivity to blue) because
I do see the blue text in the table cells. Granted it is not that
visible against the gray background, but the text is still there.
Getting rid of the black background on the DIV would make the text much
more visible.
Richard.
Richard Maher
May 7, 2012, 9:31:44 AM5/7/12
to
Hi Richard,
news:67-dnYhuVcATWDrS...@giganews.com...
After taken out contact lenses or (short-sighted glasses) and squinting I
can in fact see the blue. Sorry for wasting your time.
Who'd've thought all those years ago they were saying the truth about going
blind?
>
> Richard.
Cheers Richard Maher
news:67-dnYhuVcATWDrS...@giganews.com...
can in fact see the blue. Sorry for wasting your time.
Who'd've thought all those years ago they were saying the truth about going
blind?
>
> Richard.
Cheers Richard Maher
Richard Maher
May 7, 2012, 9:34:42 AM5/7/12
to
Hi Leonardo,
"Leonardo Azpurua" <leon...@exmvps.org> wrote in message
news:jo8g84$v7k$1...@dont-email.me...
Umm, it does get a little bit more complicated than this, but no matter.
> First solve functionality, then tackle design. Or otherwise if you prefer.
I'll remember to take baby steps in future, thanks.
>
> --
>
>
Regards Richard Maher
"Leonardo Azpurua" <leon...@exmvps.org> wrote in message
news:jo8g84$v7k$1...@dont-email.me...
> First solve functionality, then tackle design. Or otherwise if you prefer.
>
> --
>
>
Regards Richard Maher
Richard Cornford
May 7, 2012, 2:58:29 PM5/7/12
to
Richard Maher wrote:
> Richard Cornford wrote:
>> Richard Maher wrote:
<snip>
> Richard Cornford wrote:
>> Richard Maher wrote:
>>> Sure that's why I'd expect to see the cell contents (i.e.
>>> "Loading") appearing, albeit in a faint form of blue. What
>>> I see is nothing but a faint border/outline of the table.
>> <snip>
>>
>> Maybe you are slightly color blind (which is not that uncommon
>> in men, though not normally taking the form of an insensitivity
>> to blue) because I do see the blue text in the table cells.
>> Granted it is not that visible against the gray background, but
>> the text is still there. Getting rid of the black background on
>> the DIV would make the text much more visible.
>
> After taken out contact lenses or (short-sighted glasses) and
> squinting I can in fact see the blue. Sorry for wasting your
> time.
It occurred to me shortly after I posted that that an equally plausible
>>> "Loading") appearing, albeit in a faint form of blue. What
>>> I see is nothing but a faint border/outline of the table.
>> <snip>
>>
>> Maybe you are slightly color blind (which is not that uncommon
>> in men, though not normally taking the form of an insensitivity
>> to blue) because I do see the blue text in the table cells.
>> Granted it is not that visible against the gray background, but
>> the text is still there. Getting rid of the black background on
>> the DIV would make the text much more visible.
>
> After taken out contact lenses or (short-sighted glasses) and
> squinting I can in fact see the blue. Sorry for wasting your
> time.
explanation would be a monitor with poorly adjusted colour settings.
> Who'd've thought all those years ago they were saying the truth
> about going blind?
Richard.
Thomas 'PointedEars' Lahn
May 7, 2012, 3:57:47 PM5/7/12
to
Richard Cornford wrote:
> Richard Maher wrote:
>> Can someone please tell me why, in the code below, can I see the
>> table when I append it to the document.body but not the DIV(wire)?
>>
>> That is: -
>> wire.appendChild(decal); // shows a ghost of the table
>> document.body.appendChild(decal); // shows the whole table
>>
>> Cheers Richard Maher
>>
>> <html>
The required `DOCTYPE' declaration (HTML 4.01, XHTML) or HTML5 doctype is
> Richard Maher wrote:
>> Can someone please tell me why, in the code below, can I see the
>> table when I append it to the document.body but not the DIV(wire)?
>>
>> That is: -
>> wire.appendChild(decal); // shows a ghost of the table
>> document.body.appendChild(decal); // shows the whole table
>>
>> Cheers Richard Maher
>>
>> <html>
missing.
>> <head>
>> <script language="javascript">
The `type' attribute, which is required in HTML 4.01, XHTML 1.0 Strict and
XHTML 1.1, is missing. The `language' attribute ranges from being
deprecated (HTML 4.01 Transitional, XHTML 1.0 Transitional) to invalid
(HTML 4.01 Strict, XHTML 1.0 Strict, XHTML 1.1, HTML5 WD).
Documents that are likely to be downloaded as a file should also include a
declaration of the character encoding used in the document, as not all
applications can automatically add that declaration.
<http://validator.w3.org/>
>> function load(){
It is probably a good idea to avoid function names that are identical with
DOM event types, such as `load'.
>> var flyScreen = function() {
>> var OPACITY = 25;
> ^^^^^^^ ^^
>> var wire = document.createElement('div');
> <snip>
>> wire.style.opacity=(OPACITY / 100);
> ^^^^^^^
>> wire.style.MozOpacity=(OPACITY / 100);
> ^^^^^^^
>> wire.style.filter='alpha(opacity='+OPACITY+')';
> ^^^^^^^
> <snip>
>
> If you set the opacity of the DIV to 25% of opaque then it, and all of
> the elements it contains (are appended to it, or its decedents) will be
> 75% transparent. That seems sufficient to explain the most literal
> interpretation of "ghost of the table".
node cannot be appended as the child node of two different parent nodes.
Subsequent calls of appendChild() with the same argument value will –
effectively – move the node referred by the argument from the previous
parent node to the target node (which is can be made part of an efficient
approach to sort a table).
The best solution for this problem is to create a new node object using the
cloneNode() method as provided by the Node interface, and append that new
node to the other parent node instead:
wire.appendChild(decal);
document.body.appendChild(decal.cloneNode(true));
See also: <http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107>
PointedEars
--
When all you know is jQuery, every problem looks $(olvable).
Mr Ruaraidh Petrie
May 10, 2012, 4:29:46 PM5/10/12
to
have solved your issue. Good luck, and God speed!
0 new messages