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

Posted on 2002-04-15
Last Modified: 2013-11-19
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) { = "absolute"; = document.all.aIDnumber.offsetTop;    // assigns value of 5px... = document.all.aIDnumber.offsetLeft;   //  assigns value of 1px... = "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) { = "hidden";
        alert("IDnumberHide(): "+document.all.divIDnumber);

Question by:jlw011597
LVL 12

Expert Comment

ID: 6942490
What's wrong with: = y; = x;

Expert Comment

ID: 6942578
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?

Expert Comment

ID: 6942579
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;
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center


Author Comment

ID: 6942658
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.

Accepted Solution

AlfaNoMore earned 100 total points
ID: 6944241
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']);


Expert Comment

ID: 6944243
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!

Author Comment

ID: 6944665
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.

Author Comment

ID: 6944753
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.

Author Comment

ID: 6945026
The proposed answer doesn't address the question, which
was how to determine WHERE the desired placement was actually rendered.


Author Comment

ID: 6945043
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.

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html form and modal / img src -problem 3 28
jQuery Scroll To Top 5 37
how can i get 4 nd 5 ? 3 31
CORS Error from Chrome, but FireFox is OK 1 77
Shoutout to Emily Plummer ( for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question