Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2002-04-15
10
Medium Priority
?
298 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 12

Expert Comment

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

Expert Comment

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

Expert Comment

by:AlfaNoMore
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>
</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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

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

Accepted Solution

by:
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']);

alert(theseCoordinates.x);
alert(theseCoordinates.y);
0
 
LVL 9

Expert Comment

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

Author Comment

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

Author Comment

by:jlw011597
ID: 6944753
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
ID: 6945026
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
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.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

636 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