Dynamic HTML using Javascript; Works for NS4.x, need to work for IE

I have some dynamically presented forms which work EXACTLY AS I WISH in Netscape 4.x (specifically NS 4.78).
Unfortunately, time marches on and I need to have the SAME functionality in IE and NS 6.x.

The visual effect is to, when users select individual validation methods from a <SELECT></SELECT> menu, different
input fields appear and disappear.  Only the displayed fields are relevant for that validation method.  There are specific
LOCATIONS in the screen, which I've created named anchors to denote, where the fields are to materialize.  Netscape's
JS implementation is picking up these locations just perfectly and moving the fields as needed.  IE's plunking them down
in the upper lefthand corner of the window, not where I want them.  Obviously I'm picking the wrong, or insufficient, information about the anchors to place the fields.  But I'm having trouble finding any definitive documentation that covers all the bases.

Here's a JS fragment, the NS4 part works fine, the IE plunks the fields in the wrong place:

function IDnumberShow()
    if (ns4) {    //  Oh, and the values of x & y here are 438 and 446, respectively.  I'm guessing those are pixels...
    document.lyIDnumber.visibility = "show";          //  field appears EXACTLY where I want it...
    if (ie4) {
    document.all.divIDnumber.style.position = "absolute";
    document.all.divIDnumber.style.top = document.all.aIDnumber.offsetTop;    // assigns value of 5px...
    document.all.divIDnumber.style.left = document.all.aIDnumber.offsetLeft;   //  assigns value of 1px...
    document.all.divIDnumber.style.visibility = "visible";          // field appears in upper left-hand corner of window...

function IDnumberHide()
{                 //  This works as desired, no problems, NS4 *and* IE...
    if (ns4)
        document.lyIDnumber.visibility = "hide";
    if (ie4) {
        document.all.divIDnumber.style.visibility = "hidden";
        alert("IDnumberHide(): "+document.all.divIDnumber);

Who is Participating?
offsetTop tells you how far from the parent element.

So, you have to use something like this:

function findXYpos(element) {
   var totalTop = 0;
   var totalLeft = 0;
   while(element.tagName.toUpperCase() != 'BODY'){
       totalTop += element.offSetTop;
       totalLeft += element.offSetLeft;
       element = element.parentElement;
   this.x = totalTop;
   this.y = totalLeft;
   return this;

And to get this, just pass this:

var theseCoordinates = new findXYpos(document.all['something']);

ahosangFinance Systems DeveloperCommented:
What's wrong with:
document.all.divIDnumber.style.top = y;
   document.all.divIDnumber.style.left = x;
have you tried inline style script or stylesheets with the hidden and display properties, linked to a class id inside a <P> or <div> tag that resides exactly where you want them to be?
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

I guess you really want to include the elements you want within DIV tags, not anchors?

That way, you can position each individual element, and hide or show it depending on the selection from the select box.

If you had the value of each option being the name of the DIV, this would be much easier.

<select name="show_hide_divs" onChange="ShowThisLayer(this)">
  <option name="layer1">some words in here</option>
  <option name="layer2">some words in here</option>

<div name="layer1">

<script language="JavaScript">
function ShowThisLayer(element) {
    var layerName = element.options[element.selectedIndex].value;
    var thisObj = getLayerObject(layerName);
    if(!thisObj) return;
    // you'll need to have something that clears all visible layers, before showing this one? Try looping through the select box, and making all the layers hidden.
    var show = document.all ? 'visible': 'show';
    //var hide = document.all ? 'hidden' : 'hide';
    thisObj.visibility = show;

function getLayerObject(name) {
    if(document.getElementById) {
        return document.getElementById(name).style;
    if(document.all) {
        return document.all[name].style;
    if(document.layers) {
        return document.layers[name];
    // else
        return null;
jlw011597Author Commented:
No, not quite, to everyone.

There's a base form, then in NS I've got 4 layers, one
for each of 4 conditional forms.  I display 1 or 2 of
these conditional forms depending on which selection is
made in a <select></select> menu in the base form.

When [Submit] on the base form is selected, I have
additional JavaScript which copies the relevant data from
the displayed conditional forms into data fields in the
base form.

My PROBLEM (which isn't addressed here by anybody except,
slightly, by ahosanq) is the PLACEMENT of these conditional
form elements in IE.  ahosanq asks what's wrong with just
setting x & y, but from my sample it should be clear
that x & y are variable, depending on where the placeholding anchors (aIDnumber and aIDtext, in this case)
are rendered.  NS4 picks this up fine from the x & y
values for anchors[0] (aIDnumber) and anchors[1] (aIDtext),
but those fields DO NOT EXIST for IE.  And the closest thing I can find to their equivalent seems to be the offsetTop and offsetLeft elements of the HTMLelements.
Close but not quite, since they don't have remotely similar *values* so they don't position the divisions in IE where
the layers get positioned in Netscape.
To be honest though jlw, I think you're going about this the wrong way? Using an anchor as a holder is not the best thing to do. It does not have any properties or methods that you may need. You're using something because it sort of worked in NN, but that doesn't mean it's the only thing to use.

You 'should' be using a div object (supported in Netscape through the layer's object), and this has lots of things that can be done with it!
jlw011597Author Commented:
RE: AlfaNoMore's last comment, concerning 'don't use anchors but instead use layer/div --

Layers have trouble flowing inline within a form.
The anchors establish me at SPECIFIC POINTS WITHIN the
base form.  If I were happy with placing the variable
form fields presented by the conditional layers AFTER
the final form elements of the base form (I'm not, I
want them at a specific location IN RELATION TO OTHER
base form fields), then what you're suggesting here would
probably have been the better course of action.  But wherever these anchors are rendered by the user's browser,
THAT is where I want these layers to appear.  So since
layers can't span form boundaries, and forms can't span
layer boundaries, I think I'm stuck.

RE: AlfaNoMore's proposed answer:  I'll check this and
report back with success/failure.  Thanks.  If it works,
I'll accept the answer.
jlw011597Author Commented:
RE: AlphaNoMore's suggested JavaScript:

while(element.tagName.toUpperCase() != 'BODY'){
                           totalTop += element.offSetTop;
                           totalLeft += element.offSetLeft;
                           element = element.parentElement;

element.offSetTop and element.offSetLeft are both
UNDEFINED for all iterations thru this loop.

As a result the accumulators are NaN.

I'm now looking for other content within the individual
elements that might supply the appropriate value.
jlw011597Author Commented:
The proposed answer doesn't address the question, which
was how to determine WHERE the desired placement was actually rendered.

jlw011597Author Commented:
I'm going to accept this as the answer, because it pointed me in the right direction.

In this case, element.parentElement was NOT the right path to follow; following it wound up nearly
doubling the desired coordinates because we were effectively adding in offsets which were in
reality overlaid, not additive.  The correct path to follow was element.offsetParent, which once I
had this hint I was able to follow within a debugger to yield the expected coordinates that Netscape
was using.

Well, almost.   x & y are Left and Top, respectively, so the example here swaps them at the end of
the accumulations.  This resulted in the dynamic fields overlaying each other in presentation.  Swapping
them so y -> Top and x -> Left, and the fields aligned perfectly.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.