Solved

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

Posted on 2002-04-15
10
279 Views
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.moveTo(document.anchors[0].x,document.anchors[0].y);  
    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);
        }
}

0
Comment
Question by:jlw011597
10 Comments
 
LVL 12

Expert Comment

by:ahosang
Comment Utility
What's wrong with:
document.all.divIDnumber.style.top = y;
   document.all.divIDnumber.style.left = x;
0
 

Expert Comment

by:santaclass
Comment Utility
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?
0
 
LVL 9

Expert Comment

by:AlfaNoMore
Comment Utility
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>
</select>

<div name="layer1">
PUT YOUR FORM ELEMENTS IN HERE
</div>

<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;
}
</script>
0
 

Author Comment

by:jlw011597
Comment Utility
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.
0
 
LVL 9

Accepted Solution

by:
AlfaNoMore earned 100 total points
Comment Utility
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']);

alert(theseCoordinates.x);
alert(theseCoordinates.y);
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 9

Expert Comment

by:AlfaNoMore
Comment Utility
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!
0
 

Author Comment

by:jlw011597
Comment Utility
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.
0
 

Author Comment

by:jlw011597
Comment Utility
RE: AlphaNoMore's suggested JavaScript:

<pre>
while(element.tagName.toUpperCase() != 'BODY'){
                           totalTop += element.offSetTop;
                           totalLeft += element.offSetLeft;
                           element = element.parentElement;
                       }
</pre>

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.
0
 

Author Comment

by:jlw011597
Comment Utility
The proposed answer doesn't address the question, which
was how to determine WHERE the desired placement was actually rendered.

0
 

Author Comment

by:jlw011597
Comment Utility
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.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now