PDA

View Full Version : Formatting text in a layer for NS4.7



Jeepers
Jun 30th, 2002, 04:48 PM
<totally lost>
I'm trying to format the font, colour, size, wieght and alignment of text written to a layer nested inside an ilayer inside a table cell in NS4.7. I have tried everthing I can think of, CSS, formatting the cell, inline style, nesting the whole lot inside a font tag. No matter what I do it displays in black, times new roman on the left.

The text is written to the layer by a function.

CSS works fine in IE6 & NS6, it's just NS4.7

Anybody any ideas at all.
</totally lost>

premshree
Jun 30th, 2002, 08:57 PM
Well, I don't think NS4.x supports CSS.
Try formatting using normal HTL tags.

boxer_1
Jun 30th, 2002, 09:00 PM
NS 4x support for CSS is limited, but NS 4x does support it to a certain extent. Do you have a link to the page in question so we could have a look at your code? :thumbsup:

Jeepers
Jun 30th, 2002, 09:11 PM
As it does not work I have not uploaded it so I'll post the relevant code fragments.

This is the function that writes to the layer



function displayIt(theStr,dname,Lname,iLname){
//if IE 4+
if (document.all)
document.all[dname].innerHTML=theStr;
//else if NS 4
else if (document.layers){
document[iLname].document[Lname].document.write(theStr);
document[iLname].document[Lname].document.close();
}
//else if NS 6 (supports new DOM)
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById(dname);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(theStr);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}}


this is the cell in which the layer to be written to is in



<tr>
<td class="HLS" width="582" colspan="4" height="25" align="center">
<div id="d1" style="width:100%;height:25px"></div>
<ilayer id="iL1" width=100% height=25px><layer id="L1" width=100% height=25px></layer></ilayer>
</td>
</tr>




This is part of a much bigger page in which there are a further two cells of a similar nature

And its called by

displayIt('This is the string I want to write','d1','L1','iL1');

from another function.

boxer_1
Jun 30th, 2002, 09:33 PM
If it will help you out any and for the sake of reference, here's a link to a pretty comprehensive CSS browser support chart:

http://www.webreview.com/style/css1/charts/mastergrid.shtml

Just taking a wild guess here, but I'm wondering if part of the problem could be the NS 4x has buggy support for the ID selector (depending on the version of NS), which is you have in your div, layer, and ilayer tags. I wonder if you used a class selector for NS 4x if it would solve your problem??? Dunno...coding block at the moment...lol. I'll give it a closer look after a bit of rest.

What CSS properties are you trying to apply to the text in question? I'm wondering if part of the compatability issue lies there?

Jeepers
Jun 30th, 2002, 09:47 PM
Its just text formatting, colour, size, font, wieght and alignment

brown, 10pt, verdana, bold, center

jkd
Jun 30th, 2002, 10:01 PM
Just so you know (I like how you utilized DOM2 Range :)), but createContextualFragment is just something Mozilla engineers threw in, and it not defined the specs. If you want do create a document fragment, all that is needed is either:

var docFrag = document.createRange().createContextualFragment('xml string');

OR

var docFrag = (new DOMParser()).parseFromString('xml string');

:) These proprietary methods should be replaced when DOM3 Load and Save

I also noticed you used a recursive way of deleting child nodes - since you are using DOM2 Range anyway why don't you go:

var range = document.createRange();
range.selectNodeContents(el);
range.deleteContents();

:) That accomplishes exactly what your recursive statement does.

These proprietary implementations should be replaced when Mozilla incorporates DOM3 Abstract Schema and Load and Save implementations:
http://www.w3.org/TR/2002/WD-DOM-Level-3-ASLS-20020409/load-save.html
(It already incorporates the last call of DOM3 Xpath)

In which case it seems an equivalent statement would be:

document.loadXML('xml string')

I believe. Though that would replace the current document. In theory (and in the future), you may need to go:

var doc = document.implementation.createDocument('','',null);
doc.loadXML('xml string');

Which would produce a document (not document fragment parsed from that string. And then to get the document fragment, you could use a range like so:

var range = doc.createRange();
range.selectNode(doc.documentElement);
var docFrag = range.cloneContents();

Or something to that extent... but that is not currently implemented... Gecko DOES support the DOM3 Load and Save load() method though of an XMLDocument... which loads an XML document from a URI. I suspect loadXML support isn't too far away... :)

jkd
Jun 30th, 2002, 10:06 PM
Alternatively (I just remembered you probably like easy), Gecko supports innerHTML - though proprietary and not standardized, it is often a handy shortcut. ;)

Anyway, to answer your question, I think it would be best top write out the presentational tags of HTML for NS4 to format the text correctly:

document.write(myString.bold().italics().fontName('Verdana').fontSize('10pt').fontColor('brown'));

etc

adios
Jun 30th, 2002, 10:46 PM
Where are we...now? Anyway -

function displayIt(theStr,dname,Lname,iLname,classname){
//if IE 4+
if (document.all)
document.all[dname].innerHTML=theStr;
document.all[dname].className=classname;
//else if NS 4
else if (document.layers){
var sSPAN=(classname)?'<span class="'+classname+'">':'<span>';
document[iLname].document[Lname].document.write(sSPAN+theStr+'</span>');
document[iLname].document[Lname].document.close();
}
//else if NS 6 (supports new DOM)
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById(dname);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(theStr);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
el.className=classname;
}}

Put the required CSS in a class, of course.

.text {
font: bold 10pt verdana;
color: brown;
text-align: center;
}

The last can be inconsistent within NS layers; might need a hack.

Jeepers
Jul 1st, 2002, 12:55 AM
You caught me out there jkd, but the more the merrier I say. Thanks alot for all your replies, its starting to get late now so I'll give it a go t'morrow. All of this for probably about 2% or 3% of browser use. Ah well there's no harm in trying to get it right for everyone.

Jeepers
Jul 1st, 2002, 07:48 PM
adios: Spot on, works a treat, thanks :thumbsup:

jkd: I'd love to take credit for the function, but I did not write it, I think some one on the old WA forum did but for the life of me I can't remember who. I understand the layers and div but the DOM code is taxing the old grey cells a bit, but I'm gonna learn about it and incorporate the comments you made.

I ask: in the end will this make me a fuller and more rounded person and able to stride out into multitude and proclaim 'I know about the eternal mysteries of DOM from its plunging depths to it's soaring heights', sorry I got carried away then.:D Thanks.