Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Posted on 2002-04-15
Medium Priority
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) {
    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);

Question by:jlw011597
LVL 12

Expert Comment

ID: 6942490
What's wrong with:
document.all.divIDnumber.style.top = y;
   document.all.divIDnumber.style.left = 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;

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.


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 300 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

572 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