NN 4.0+ i/layer self-awareness

**Fox Mahoney** · Jul 20 '05, 02:19 PM

Re: NN 4.0+ i/layer self-awareness

since nobody else is answering this question, i guess i will...

PAD wrote:[color=blue]
>
> I have written a javascript routine that populates a parent document
> with a series of <iframe>s. Each <iframe> receives its contents from a
> series of separate smaller HTML files. Of course my NN 4.8 browser
> doesn't deal well with the <iframe> so I wrapped the code that generates
> the <iframe> in <ilayer> tags. NN now recognizes the contents.[/color]

<layer> would be better -- there are rendering discrepencies/problems
with ilayer. <layer> will "behave" like an ilayer if you leave out the
top and left properties when setting it up.
[color=blue]
>
> However within each of the 'content' files I have another javascript
> routine that basically displays the file name (via document.URL &
> document.write) of the content file. My IE 5.5 & Mozilla 1.5
> understands this perfectly. However my NN responds to the document.URL
> with the wrapper/parent document's URL, not it's own unique file name.
>
> I've named/ID'd the iframes & ilayers.[/color]

with <layer> only ID would be necessary. Layers are position absolute by
default (although they will be positioned "inline" so-to-speak if you do
not apply top and left properties. If you've nested layers and require
setting the top and left values for positioning, specify
style="position : relative;" for the layer to make it behave as an ilayer.

in general, avoid ilayer...
[color=blue]
> If the document.URL fails I can
> still make use of the ilayer ID but I need to know the index into the
> layers array.[/color]

no you don't...

for the url, use this.src (from within the loaded document).
for the id of the layer used to contain the loaded document, use this.id
[this.name is also available IF it was used in the tag] from within the
loaded document.

parent doc:

<layer id = holder src = "whatever.h tm" attributes...>
</layer>


whatever.htm:

<html>
<head>
</head>
<body>
<script>
document.write( this.src); // prints: file:///HD/pathto/"whatever.h tm"
</script>
</body>
</html>

an alternative would be:

<html>
<script>
onload = function()
{
// dynamically set the content
document.layers .holder.src = "whatever.h tm";
}
</script>
<body>

<layer id = holder attributes...></layer>
</body>
</html>

you get the same results... with layer only, not ilayer.

....no hardcoding necessary.

[color=blue]
> I can hard-code a index value into the
> document.layers[x].name but given that the position of the particular
> content file is dynamic within the parent, the index is going to be
> wrong 9 out of 10 times. There doesn't seem to any way for an i/layer
> to know who it is...
>
> I've looked through my books (O'Reilly Javascript 1.5 and a couple
> D/HTML books), plus the 'Net (event the FAQ's from this NG) and have
> found nothing about how the NN 4.0 failure (to my way of thinking ;-)
> can be resolved. While I calculate about 1% of the site visitors will
> use the old NN 4.0+ browsers... it has now become something of a crusade
> of mine LOL[/color]

for..in is your best friend for sniffing out properties...

it's possible to provide an extensive amount of new DOM support to
NN4...if you're on that much of a crusade... like
document.getEle mentById and even innerHTML if you're really fanatical
(settable, not really readable without a very cumbersome workaround).
NN4 is fast enough to handle the extra code without noticeably slowing down.

However, take it from a chronic addicted NN4 user... it ain't really
worth it... All of us "hanger's on" like specific things about nn4,
like, the mail and news readers and, for most sites, it still works well
enough, plus, it's smaller than the newer generations... but truth be
told, I spend most of my time online with 2, maybe 3 (or more) browsers
open at the same time... if I run into a site that gives me problems in
NN4 -- it's *expected* (these days) -- and I just copy and paste the URL
into a newer browser for that specific site. I'm a professional site
designer and I gave up providing support for NN4 over 6 months ago
(which, for me, is a simple drop of a library into the document and
tweaking a couple of exceptions in the code).

for a demo of new DOM for ol' NN4, check out: http://fxmahoney.com/joshkelley

this site was originally developed without NN4 support, so you'll need
to visit it in NN4 and IE5+/NN6+ separately [I was originally told NN4
support was not necessary...but somebody's wires got crossed...] --
however, you'll see from the main code, very little alteration was made
to accommodate NN4 from the original new DOM code. [ps - i am not
responsible for the design of that page, only the programming]

click the link to Enter Site and View Source on the popped up
document... all of the new DOM support needed for that document (in the
NN4 version) was copied and pasted into that document with the exception
of the link rollover code which is in a separate .js doc [which can be
grabbed with one of the newer browsers by pasting the url into the
location]. There is enough there to give you a huge leg up on writing
your own support code. [do NOT write me and ask about how to proceed or
why I did what I did...you have to figure it out for yourself -- i did
my time with nn4... just pay attention to the watch method and the way
you read css attributes in NN4... and the fact that you can make up your
own css attributes and nn4 will happily accumulate them into the
stylesheet while all new browsers "sanitize" attributes they don't
understand. example:

#mydiv {
position: absolute;
use-class: myclass; /* access in NN4 to which class combined */
}

..myclass {
... more attributes
}

in NN4 you can relate .myclass attributes within a layer from the
"stuffed" attribute in the ID -- this is useful, along with the watch
method, in constructing a usable innerHTML method that can change the
content of a layer (you have to completely reconstruct all the styles
before document.writin g to the layer -- and you will still not be able
to read the actual HTML of a layer -- you'll have to store a copy in a
variable or create a property of the layer in use:

myLayer.html = htmlStr;

but this is more trouble than it's worth and usually not necessary.)

]
[remember the rule about css <-> jss naming -- what is use-class in css
becomes useClass in jss...]

okay...

JSS style sheets are accessed in NN4 as:

IDs [ex: #myID { attributes } ]

document.ids.my ID.attribute
or
document.ids["myID"].attribute

Classes [ex: .myClass {attributes} ]

document.classe s.myClass.all.a ttributes or
document.classe s["myClass"].all.attributes

where all should normally be used, but can be substituted with a TAG
name, like:

document.classe s.myClass.DIV.a ttributes

// in NN4, you will run into all kinds of problems with links and tables...
// best to plan your CSS as "generally" as possible...
// meaning: use all, all the time if you plan to support nn4

Tags:

document.tags.T AGNAME.attribut e [ex: document.tags.D IV.attribute]
TAGNAME, I believe, has to be all uppercase.

There's supposed to be a way to get at contextuals, but I was never able
to nail that one down...Martin Honnen might know this one.

BTW, all of these are settable as well as gettable (even the custom
attributes)... but setting them ONLY works BEFORE the page loads, and
before the items using the styles will be rendered [which means, at the
top of a <script> executed before the <body> tag opens -- the perfect
place to make "adjustment s" and "repairs" to NN4 CSS]

[color=blue]
>
> The content files have <head</head><body></body> tags but no
> <html></html> tags. I've tried removing the <head> tags and/or
> including the <html> tags but it seems to have no effect.[/color]

they're expected in "well-formed" documents...lea ve them in.
[color=blue]
>
> Here is the code that generates the layers/frames within the parent
> document (other than this code in a JS file, there's nothing fancy
> within the parent. ie it's isn't framed - just plain HTML). This
> snippet of code is done 10 times for each parent page...
>
> lno - is the uniqueness identifier for each content file. It's a
> sequence number but there are gaps in the sequence. So 123rbe.html is
> not going to follow 122rbe.html nor will 124 follow 123.
>
> html = html + '<ilayer ID=\'fy'+ lno + '\' SRC=\'rbk/' + lno +
> 'rbe.html\'></ilayer><nolayer >';
> html = html + '<iframe ID=\'fy'+ lno + '\' SRC=\'rbk/' + lno +
> 'rbe.html?inp=r bk\' BORDER=0 +
> HEIGHT=\'250\' WIDTH=\'100%\' FRAMEBORDER=\'1 \' MARGINWIDTH=0
> MARGINHEIGHT=0> </iframe>';
> html = html + '</nolayer>';
> html = html + '<br>';[/color]

this looks more complicated than it needs to be...

here's a tip -- in HTML, you don't need quotes unless there are spaces
involved, so:

id = somename or id = "some name" or id = 'some name'
width = 100% or width = "100%" // or with singles
etc...

so then:

html += "<layer id = fy" + lno + " src = rbk" + lno +
"rbe.html width=100% height=250></layer>" ...

[color=blue]
>
> Thanks for any help!
> Pete[/color]

Very good luck, Pete...if nothing else, this is a very good programming
exercise for you and you will learn a considerable amount about the
inner workings of DOM elements (past and present). I have it on very
good authority that the .watch() method is still available in NN6+ and
will continue to be supported for the foreseeable future... it is an
exceptionally powerful tool...(and not available in IE)

Also, none of what you are about to embark on is in any book and there
is only very sketchy documentation available [only that the JSS
stylesheets can be accessed with that outlined above], so you'll have to
ferret all this stuff out yourself [for..in everything -- find out
what's there and how it changes and what you can make changes to...]

that joshkelley page only uses a document.getEle mentById for top level
layers... here's a more general version that will work with embedded
layers (and only the most commonly used getter/setters [well, except for clip]):

// there are no guarantees with the following
// use as a starting point for more extensive support

// You might want to turn off line-wrapping in your reader and reopen
this post
// to get the following -- it was copied from my original source code
and not
// intended to be posted on this ng

if(document.lay ers)
{

document.getEle mentById = function(name)
{

var matchedLayer = null;

recurseLayers = function(w, match)
{
if(w.document.l ayers[match])
matchedLayer = w.document.laye rs[match];
else
{
for(var i = 0; i < w.document.laye rs.length; i++)
recurseLayers(w .document.layer s[i], match);
}
}

recurseLayers(w indow, name);

if(matchedLayer ) // make this like new DOM:
{
if(!matchedLaye r.style)
{

matchedLayer.st yle = new Style(matchedLa yer);

}

}

return matchedLayer;

}

function Style(ref)
{

this.parent = ref;

this.watch("top ", function(i,o,n)
{
this.parent.top =
this.parent.off setTop = n;
return n;
}
);

this.watch("lef t", function(i,o,n)
{
this.parent.lef t =
this.parent.off setLeft = n;
return n;
}
);
this.watch("cli p", function(i,o,n)
{

var set = n.match(/\d+/g);

var lyr = this.parent;

lyr.clip.top = set[0];
lyr.clip.right = set[1];
lyr.clip.bottom = set[2];
lyr.clip.left = set[3];
return n;
}
);

this.watch("vis ibility", function(i,o,n)
{

this.parent.vis ibility = n;

return n;
}
);

}

}

You might also want to adopt that document.getIma geByName routine (from
/joshkelley) to make backwards support with NN4 more general with new
browsers -- it follows the new DOM convention...

okay... i'm done.

NN 4.0+ i/layer self-awareness

NN 4.0+ i/layer self-awareness

Comment