toggling between two versions of a page

[cewinflorence]

Hi, I am trying to toggle between two versions of a page;
I've been able to turn visibility/display on and off before
with no problem but now I have two variables I need to pass, ID1 and ID2 as I want to turn one section on and one section off.

I had tried a little function with no variables, just turning on and off the display/visibility in the two parts of the page by identifying these sections by name,
but it did not work.

It's below (I know one problem may be that I may be using CSS names and this is java script; I'm not sure about hide versus hidden for visibility; hidden is CSS):

// from the headers in the java script section--I also have a browser sniffer

function allezyfr() {
if (type == "IE")
{
document.all.commentaryen.style.display = "none";
document.all.commentairefr.style.visibility = "visible";
document.all.commentairefr.style.display = "";
}
if (type == "NN")
{
document.commentaryen.visibility="hidden";
document.commentaryen.overflow = "hidden";
document.commentaryen.textOverflowMode = "clip";
document.commentaryen.height = "1em";
document.commentairefr.visibility = "visible";
document.commentairefr.overflow = "visible";
document.commentairefr.height = "";
}
if (type == "MO")
{
document.getElementById("commentaryen").style.visibility = "collapse";
document.getElementById("commentairefr").style.visibility = "visible";
}
if (type == "OP")
{
document.getElementById.("commentaryen").style.visibility = "hide";
document.getElementById("commentaryen").style.overflow = "hidden";
document.getElementById("commentaryen").style.textOverflowMo de = "clip";
document.getElementById("commentaryen").style.height = 1em;
document.getElementById("commentairefr").style.visibility = "visible";
document.getElementById("commentairefr").style.overflow = "visible";
document.getElementById("commentairefr").style.height = "";
}

}


</script>


<!-- from the page body -->

<a href="#commentairefr" onclick="allezyfr()">Veuillez voir aussi en français une partie des renseignements ci-dessous/See a portion of this in French.</a>

 

[grtammi]

When using document.getElementById method, you need to be referring to a page element that has an ID attribute assigned to it, such as follows:

<a id="commentaryen" href="#commentairefr" onclick=" .....>

Adding the id attribute to the page element will solve your issue of not being able to target specific page elements.

HTH


Greg

 

[cewinflorence]

Thanks, for your information!
This is something I needed to know.
Unfortunately I think I also have problems with choosing to collapse the table rows themselves,
or else with my style codes which I translated hopefully right but maybe not all right into javascript.


--cew

 

[cewinflorence]

Hi, again!
finally realized that part of my problem probably was my use of the CSS style codes in the JavaScript functions; I clipped the functions of all but the values that I understood worked o.k. in JavaScript, which made my page seem to work right in Mozilla BUT STILL DID NOT MAKE IT WORK IN INTERNET EXPLORER; in addition, it still has bugs when it is displayed in the host site, even in Mozilla (you have to click on the French version or the English version several times before displaying only the French or the English!! This may have to do with the way the host keeps reloading a page??).

1rst, I just put most of the stuff I think should make a table row collapse into the style codes using the CSS values target and nottarget); since what I'm trying to do is collapse the display of an entire table row (one table row is for the English version, one for the French), a tr (table row) element is the element (with the id commentaryen or commentairefr; I'm only showing the code for the latter) which can be either the target or not the target of the link (I think that I've got this bit of css right!)!
First the style codes (the z-index is irrelevant here but necessary at my particular host):

#commentairefr tr:target 
  {
  display: block;
  visibility: visible;
  text-overflow: visible;
  min-height: 1em;
  z-index: -1
  } 
#commentairefr tr:not(:target)
  {
  visibility: hidden;
  text-overflow: hidden;
  text-overflow-mode: clip;
  height: 1em;
  z-index: -1
  }

Now the JavaScript code; first, the browser sniffer (alas I could not make true and false work
using say:

if (!document.getElementById && document.all) {IE4=true;}

so had to use the character strings values for a variable type, in the browser sniffer below written by webconcerns.co.uk):

 if (navigator.userAgent.indexOf("Opera")!=-1
    && document.getElementById) {type="OP";}

 if (!document.getElementById && document.all) {type="IE4";} 
 
 if (document.getElementById && document.all) {type="IE5";} //IE5 up
   
 if (document.layers) {type="NN";}

 if (document.getElementById) {type="MO";}

Now the shortened function:

function allezyfr() {

if (type == "IE4")
 {
        document.all.commentaryen.style.display = "none";
        document.all.commentairefr.style.display = "block";
 }
if (type == "IE5")
 {           

document.getElementById("commentaryen").style.display = "none";        

document.getElementById("commentairefr").style.display = "block";
 }
if (type == "NN")
 {
        document.commentaryen.visibility="hide"; 
        document.commentairefr.visibility = "visible";
 }
if (type == "MO")
 {
	document.getElementById("commentaryen").style.visibility = "collapse";
        document.getElementById("commentairefr").style.visibility = "visible";
 }
else 
 {  
    if (type == "OP")
       {
        document.getElementById.("commentaryen").style.visibility = "hide";
        document.getElementById("commentairefr").style.visibility = "visible";
       }
// else unknown browser do nothing display as is navigate using links
 }  
}

Now for the command (in the body of my page):

<a id="PageTop" href="#commentairefr" onclick="allezyfr()">Fran&#231;ais</a>

Is there any fix for the Internet Explorer browsers??
Thanks!