• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 500
  • Last Modified:

HTML hidden table never appears in IE6 using CSS/Javascript

The code I submitted is supposed to display a hidden HTML table upon mouseover of a link; in IE7+ and Firefox it works perfectly, however, in IE6 it never works.

I am not sure as to what I need to do to get it to work in IE6 but it is a requirement that it does.

What do I need to do?

Thanks
<style type="text/css"> 
 table.explanation { 
  background:#000000; 
  position:absolute; 
  visibility:hidden; 
 } 
</style> 
 
 
<script type="text/javascript"> 
 
 function setElement(elem) { 
  if (elem.style.visibility == null || elem.style.visibility == "" || 
elem.style.visibility == "undefined") { 
   elem.style.visibility = "hidden"; 
  } 
  if (elem.style.display == null || elem.style.display == "" || 
elem.style.display == "undefined")) { 
   elem.style.display = "none"; 
  } 
 } 
 
 
 function setup() { 
  if (document.getElementById) { 
   setElement(document.getElementById("explanationTable")); 
   setElement(document.getElementById("explanationRemovalButtonId")); 
  } 
 } 
 
 
 var hasClickedLink = false; 
 
 
 window.onload = setup; 
 
 
 // DO NOTE THAT document.getElementById MUST BE A VALID METHOD OF THE 
document OBJECT IN JAVASCRIPT FOR DHTML TO WORK AT ALL TO CREATE 
WINDOW 
 
 
 function hideExplanation() { 
  if (document.getElementById && !hasClickedLink) { 
   document.getElementById 
("explanationRemovalButtonId").style.visibility = "hidden"; 
   document.getElementById("explanationRemovalButtonId").style.display 
= "none"; 
   document.getElementById("explanationTable").style.visibility = 
"hidden"; 
   document.getElementById("explanationTable").style.display = "none"; 
  } else if (document.all && !hasClickedLink) { 
   document.all["explanationRemovalButtonId"].style.visibility = 
"hidden"; 
   document.all["explanationRemovalButtonId"].style.display = "none"; 
   document.all["explanationTable"].style.visibility = "hidden"; 
   document.all["explanationTable"].style.display = "none"; 
  } 
 } 
 
 
 function hideRemovalButton() { 
  hasClickedLink = false; 
 } 
 
 
 function showExplanation() { 
  if (document.getElementById) { 
   alert("display = " + document.getElementById 
("explanationTable").style.display + " and visibility = " + 
document.getElementById("explanationTable").style.visibility); 
   document.getElementById("explanationTable").style.visibility = 
"visible"; 
   if (!hasClickedLink) { 
    document.getElementById 
("explanationRemovalButtonId").style.visibility = "hidden"; 
   } 
  } 
 } 
 
 
 function showRemovalButton() { 
  if (!hasClickedLink) { 
   hasClickedLink = true; 
  } 
  if (document.getElementById) { 
   document.getElementById 
("explanationRemovalButtonId").style.visibility = "visible"; 
   document.getElementById("explanationRemovalButtonId").style.display 
= "block"; 
   showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE 
CLICK ACTION TO MAKE WINDOW APPEAR 
  } else if (document.all) { 
   document.all["explanationRemovalButtonId"].style.visibility = 
"visible"; 
   document.all["explanationRemovalButtonId"].style.display = "block"; 
   showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE 
CLICK ACTION TO MAKE WINDOW APPEAR 
  } 
 } 
 
 
</script> 
 
 
<script type="text/javascript"> 
   document.write(".  Clicking onto the link will keep the explanation 
in place until you click the button below the explanation.<br><br> 
\n"); 
   document.write("<table class=\"explanation\" id=\"explanationTable 
\">\n"); 
   document.write(" <tr>\n"); 
   document.write("  <td class=\"explanation\"><span class= 
\"explanationText\">Explanation goes here</span>\n"); 
   document.write("  <div align=\"center\">\n"); 
   document.write("   <input type=\"button\" name= 
\"explanationRemovalButton\" id=\"explanationRemovalButtonId\" "); 
   document.write("    class=\"explanation\" value=\"Click here to 
close window\" onclick=\"hideRemovalButton();hideExplanation()\">"); 
   document.write("   </div>\n"); 
   document.write("  </td>\n"); 
   document.write(" </tr>\n"); 
   document.write("</table>\n"); 
  </script> 
 
 
<script type="text/javascript"> 
   document.write("<a href=\"#\" class=\"explanationLink\" id= 
\"explanationLinkId\" onclick=\"showRemovalButton()\" "); 
   document.write(" ondblclick=\"hideRemovalButton();hideExplanation() 
\" onmouseover=\"showExplanation()\" onmouseout=\"hideExplanation()\"> 
\n"); 
  </script>

Open in new window

0
phil_powell
Asked:
phil_powell
  • 10
  • 5
  • 4
  • +2
1 Solution
 
bombozamaCommented:
i've done before in a slight different way.
I put the table inside a div and applied the display property. Something like this.
#Javascript OnMouseOver
document.getElementById('divid').style.display='block';
#Javascript OnMouseOut
document.getElementById('divid').style.display='none';
 
 
#HTML
<div id="divid" style="display:none;">
<table ...
 
</table>
</div>

Open in new window

0
 
fsze88Commented:
from your source code, you should use
Object.style.visibility=visible|hidden|collapse
like
elem.style.visibility = 'visible' ;
elem.style.visibility = 'hidden' ;

function setElement(elem) {
  if (elem.style.visibility == null || elem.style.visibility == "" ||
elem.style.visibility == "undefined") {
   elem.style.visibility = "hidden";
  }
  if (elem.style.display == null || elem.style.display == "" ||
elem.style.display == "undefined")) {
   elem.style.display = "none";
  }
 }


more references
http://www.w3schools.com/HTMLDOM/prop_style_visibility.asp
0
 
phil_powellAuthor Commented:
I tried both solutions, unfortunately, to no avail.  I tried using document.getElementById(elem).style.display as well as implementation on <div> instead of <table>; this along with changes to the setElement(elem) function; the HTML table remains invisible, it never appears:
 

<style type="text/css"> 
	.explanation {
		background:#000000;
		position:absolute;
		visibility:hidden;
		display:none;
	}
 
	td.explanation {
		background:#eeeedd;
	}
	
	button.explanation {
		position:absolute;
		visibility:hidden;
	}
 
	span.explanationText {
		font-family:Arial Narrow, Arial;
		font-size:16px;
		font-weight:bold;
		color:#cc0000;
	}
 
	a.explanationLink {
		text-decoration:none;
		font-weight:bold;
		color:#000099;
	}
 
	a.explanationLink:hover {
		text-decoration:underline;
	}
 
</style> 
 
<script type="text/javascript"> 
 
	function setElement(elem) { 
		if (elem.style && elem.style.visibility && (elem.style.visibility == "" || elem.style.visibility == "undefined")) { 
			elem.style.visibility = "hidden"; 
		}
		
		if (elem.style && elem.style.display && (elem.style.display == "" || elem.style.display == "undefined")) {
			elem.style.display = "none";
		}
	}
 
function setup() { 
	if (document.getElementById) { 
		setElement(document.getElementById("explanationTable")); 
		setElement(document.getElementById("explanationRemovalButtonId"));
	}
}	
 
 
var hasClickedLink = false; 
 
window.onload = setup;
 
// DO NOTE THAT document.getElementById MUST BE A VALID METHOD OF THE document OBJECT IN JAVASCRIPT FOR DHTML TO WORK AT ALL TO CREATE WINDOW
 
function hideExplanation() {
	if (document.getElementById && !hasClickedLink) {
		document.getElementById("explanationRemovalButtonId").style.visibility = "hidden";
		document.getElementById("explanationRemovalButtonId").style.display = "none";
		document.getElementById("explanationTable").style.visibility = "hidden";
		document.getElementById("explanationTable").style.display = "none";
	}
}
 
function hideRemovalButton() { 
	hasClickedLink = false; 
}
 
function showExplanation() {
	if (document.getElementById) {
		document.getElementById("explanationTable").style.display = "block";
		document.getElementById("explanationTable").style.visibility = "visible";
		if (!hasClickedLink) {
			document.getElementById("explanationRemovalButtonId").style.display = "none";
			document.getElementById("explanationRemovalButtonId").style.visibility = "hidden";
		}
	} 
}
 
function showRemovalButton() {
	if (!hasClickedLink) {
		hasClickedLink = true;
	}
	if (document.getElementById) {
		document.getElementById("explanationRemovalButtonId").style.visibility = "visible";
		document.getElementById("explanationRemovalButtonId").style.display = "block";
		showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE CLICK ACTION TO MAKE WINDOW APPEAR
	}
}
 
</script> 
 
<script type="text/javascript">
 
var tableHTMLArray = [ 
			". Clicking onto the link will keep the explanation in place until you click the button below the explanation.<br><br>",
			'<div class="explanation" id="explanationTable">',
			"<table>",
			" <tr>",
			' <td class="explanation"><span class="explanationText">Explanation goes here</span>',
			' <div align="center">',
			' <input type="button" name="explanationRemovalButton" id="explanationRemovalButtonId" ',
			' class="explanation" value="Click here to close window" onclick="hideRemovalButton();hideExplanation()">', 
			" </div>",
			" </td>",
			" </tr>",
			"</table>",
			"</div>"
		];
	
document.write(tableHTMLArray.join("\n"));
 
</script>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

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

 
phil_powellAuthor Commented:
Here is a simpler version.  It still fails to work in IE6 for some unknown reason.  Any ideas?
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="0">
<tr>
 
<style type="text/css">
<!--
 
 .explanation {
  background:#000000;
  position:absolute;
  display:none;
 }
 
 td.explanation {
  background:#eeeedd;
 }
 
 button.explanation {
  position:absolute;
  display:none;
 }
 
 span.explanationText {
  font-family:Arial Narrow, Arial;
  font-size:16px;
  font-weight:bold;
  color:#cc0000;
 }
 
 a.explanationLink {
  text-decoration:none;
  font-weight:bold;
  color:#000099;
 }
 
 a.explanationLink:hover {
  text-decoration:underline;
 }
 
-->
</style>
<script type="text/javascript" language="Javascript">
<!--
 
 
 function setElement(elem) {
  if (elem.style && elem.style.display && (elem.style.display == "" || elem.style.display == "undefined")) {
   elem.style.display = "none";
  }
 }
 
 
 function setup() {
  if (document.getElementById) {
   setElement(document.getElementById("explanationTable"));
   setElement(document.getElementById("explanationRemovalButtonId"));
  }
 }
 
 
 var hasClickedLink = false;
 
 window.onload = setup;
 
 // DO NOTE THAT document.getElementById MUST BE A VALID METHOD OF THE document OBJECT IN JAVASCRIPT FOR DHTML TO WORK AT ALL TO CREATE WINDOW
 
 function hideExplanation() {
  if (document.getElementById && !hasClickedLink) {
   document.getElementById("explanationRemovalButtonId").style.display = "none";
   document.getElementById("explanationTable").style.display = "none";
  }
 }
 
 function hideRemovalButton() {
  hasClickedLink = false;
 }
 
 function showExplanation() {
  if (document.getElementById) {
   document.getElementById("explanationTable").style.display = "block";
   if (!hasClickedLink) {
    document.getElementById("explanationRemovalButtonId").style.display = "none";
   }
  }  
 }
 
 function showRemovalButton() {
  if (!hasClickedLink) {
   hasClickedLink = true;
  }
  if (document.getElementById) {
   document.getElementById("explanationRemovalButtonId").style.display = "block";
   showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE CLICK ACTION TO MAKE WINDOW APPEAR
  } 
 }
//-->
</script>
 <td colspan="3">
  <noscript>
   <a href="/explanation.jsp" target="_new">
  </noscript>
  <script type="text/javascript" language="Javascript">
  <!--
   document.write("<a href=\"#\" class=\"explanationLink\" id=\"explanationLinkId\" onclick=\"showRemovalButton()\" ");
   document.write(" ondblclick=\"hideRemovalButton();hideExplanation()\" onmouseover=\"showExplanation()\" onmouseout=\"hideExplanation()\">\n");
  //-->
  </script>
   Click
   <script type="text/javascript" language="Javascript">
   <!--
    document.write(" or hover mouse");
   //-->
   </script> here for the explanation
  </a>
  <script type="text/javascript" language="Javascript">
  <!--
   var tableHTMLArray = [
    ".  Clicking onto the link will keep the explanation in place until you click the button below the explanation.<br><br>",
    '<div class="explanation" id="explanationTable">',
    '<table>',
    " <tr>",
    '  <td class="explanation"><span class="explanationText">Explanation goes here</span>',
    '   <div align="center">',
    '    <input type="button" name="explanationRemovalButton" id="explanationRemovalButtonId" ',
    '     class="explanation" value="Click here to close window" onclick="hideRemovalButton();hideExplanation()">',  
    "   </div>",
    "  </td>",
    " </tr>",
    "</table>",
    "</div>"
   ];
   
   document.write(tableHTMLArray.join("\n"));
  //-->
  </script>
 </td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
fsze88Commented:
phil_powell,
I am not able to get/set the values from css attributes.
But It works fine without css at code snippet.
close it and  no points assign that I agree
please test on code snippet. If it is not your goal of the question, close it (no points assign) and repost a new question, please
fsze88
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="0">
<tr>
 
<style type="text/css">
<!--
 
 
 td.explanation {
  background:#eeeedd;
 }
 
 button.explanation {
  position:absolute;
  display:none;
 }
 
 span.explanationText {
  font-family:Arial Narrow, Arial;
  font-size:16px;
  font-weight:bold;
  color:#cc0000;
 }
 
 a.explanationLink {
  text-decoration:none;
  font-weight:bold;
  color:#000099;
 }
 
 a.explanationLink:hover {
  text-decoration:underline;
 }
 
-->
</style>
<script type="text/javascript" language="Javascript">
<!--
 
 
 function setElement(elem) {
   var properties;
   properties="";
   for (var i in elem.style){properties+=i + " <br/>";
  }
     elem.style.display = "none";
 }
 
 
 function setup() {
  if (document.getElementById) {
   setElement(document.getElementById("explanationTable"));
   setElement(document.getElementById("explanationRemovalButtonId"));
  }
 }
 
 
 var hasClickedLink = false;
 
 window.onload = setup;
 
 // DO NOTE THAT document.getElementById MUST BE A VALID METHOD OF THE document OBJECT IN JAVASCRIPT FOR DHTML TO WORK AT ALL TO CREATE WINDOW
 
 function hideExplanation() {
   document.getElementById("explanationRemovalButtonId").style.display = "none";
   document.getElementById("explanationTable").style.display = "none";
 }
 
 function hideRemovalButton() {
  hasClickedLink = false;
 }
 
 function showExplanation() {
   document.getElementById("explanationTable").style.display = "block";
   if (!hasClickedLink) {
    document.getElementById("explanationRemovalButtonId").style.display = "none";
   }
 }
 
 function showRemovalButton() {
  if (!hasClickedLink) {
   hasClickedLink = true;
  }
   document.getElementById("explanationRemovalButtonId").style.display = "block";
   showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE CLICK ACTION TO MAKE WINDOW APPEAR
 }
//-->
</script>
 <td colspan="3">
  <noscript>
   <a href="/explanation.jsp" target="_new">
  </noscript>
  <script type="text/javascript" language="Javascript">
  <!--
   document.write("<a href=\"#\" class=\"explanationLink\" id=\"explanationLinkId\" onclick=\"showRemovalButton()\" ");
   document.write(" ondblclick=\"hideRemovalButton();hideExplanation()\" onmouseover=\"showExplanation()\" onmouseout=\"hideExplanation()\">\n");
  //-->
  </script>
   Click
   <script type="text/javascript" language="Javascript">
   <!--
    document.write(" or hover mouse");
   //-->
   </script> here for the explanation
  </a>
  <script type="text/javascript" language="Javascript">
  <!--
   var tableHTMLArray = [
    ".  Clicking onto the link will keep the explanation in place until you click the button below the explanation.<br><br>",
    '<div class="explanation" id="explanationTable" >',
    '<table>',
    " <tr>",
    '  <td class="tdexplanation"><span class="explanationText">Explanation goes here</span>',
    '   <div align="center">',
    '    <input type="button" name="explanationRemovalButton" id="explanationRemovalButtonId" ',
    '      value="Click here to close window" onclick="hideRemovalButton();hideExplanation()">',  
    "   </div>",
    "  </td>",
    " </tr>",
    "</table>",
    "</div>"
   ];
   
   document.write(tableHTMLArray.join("\n"));
  //-->
  </script>
 </td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
fsze88Commented:
it may cause of td.css
 td.explanation {
  background:#eeeedd;
 }
 Code Snippet is works
I am not CSS experts.... so....
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="0">
<tr>
 
<style type="text/css">
<!--
 
 .explanation {
  background:#000000;
  position:absolute;
  display:none;
 }
 
 
 button.explanation {
  position:absolute;
  display:none;
 }
 
 span.explanationText {
  font-family:Arial Narrow, Arial;
  font-size:16px;
  font-weight:bold;
  color:#cc0000;
 }
 
 a.explanationLink {
  text-decoration:none;
  font-weight:bold;
  color:#000099;
 }
 
 a.explanationLink:hover {
  text-decoration:underline;
 }
 
-->
</style>
<script type="text/javascript" language="Javascript">
<!--
 
 
 function setElement(elem) {
   var properties;
   properties="";
   for (var i in elem.style){properties+=i + " <br/>";
  }
     elem.style.display = "none";
 }
 
 
 function setup() {
  if (document.getElementById) {
   setElement(document.getElementById("explanationTable"));
   setElement(document.getElementById("explanationRemovalButtonId"));
  }
 }
 
 
 var hasClickedLink = false;
 
 window.onload = setup;
 
 // DO NOTE THAT document.getElementById MUST BE A VALID METHOD OF THE document OBJECT IN JAVASCRIPT FOR DHTML TO WORK AT ALL TO CREATE WINDOW
 
 function hideExplanation() {
   document.getElementById("explanationRemovalButtonId").style.display = "none";
   document.getElementById("explanationTable").style.display = "none";
 }
 
 function hideRemovalButton() {
  hasClickedLink = false;
 }
 
 function showExplanation() {
   document.getElementById("explanationTable").style.display = "block";
   if (!hasClickedLink) {
    document.getElementById("explanationRemovalButtonId").style.display = "none";
   }
 }
 
 function showRemovalButton() {
  if (!hasClickedLink) {
   hasClickedLink = true;
  }
   document.getElementById("explanationRemovalButtonId").style.display = "block";
   showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE CLICK ACTION TO MAKE WINDOW APPEAR
 }
//-->
</script>
 <td colspan="3">
  <noscript>
   <a href="/explanation.jsp" target="_new">
  </noscript>
  <script type="text/javascript" language="Javascript">
  <!--
   document.write("<a href=\"#\" class=\"explanationLink\" id=\"explanationLinkId\" onclick=\"showRemovalButton()\" ");
   document.write(" ondblclick=\"hideRemovalButton();hideExplanation()\" onmouseover=\"showExplanation()\" onmouseout=\"hideExplanation()\">\n");
  //-->
  </script>
   Click
   <script type="text/javascript" language="Javascript">
   <!--
    document.write(" or hover mouse");
   //-->
   </script> here for the explanation
  </a>
  <script type="text/javascript" language="Javascript">
  <!--
   var tableHTMLArray = [
    ".  Clicking onto the link will keep the explanation in place until you click the button below the explanation.<br><br>",
    '<div class="explanation" id="explanationTable" >',
    '<table>',
    " <tr>",
    '  <td class="tdexplanation"><span class="explanationText">Explanation goes here</span>',
    '   <div align="center">',
    '    <input type="button" name="explanationRemovalButton" id="explanationRemovalButtonId" ',
    '      value="Click here to close window" onclick="hideRemovalButton();hideExplanation()">',  
    "   </div>",
    "  </td>",
    " </tr>",
    "</table>",
    "</div>"
   ];
   
   document.write(tableHTMLArray.join("\n"));
  //-->
  </script>
 </td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
phil_powellAuthor Commented:
I tried your suggestion, but I'm sorry the window still does not appear upon mouseover, mouse click, ever.
 
See attached code snippet

<html>
<head>
<title>Test</title>
</head>
<body>
<table border="0">
<tr>
 
<style type="text/css">
<!--
 
 .explanation {
  background:#000000;
  position:absolute;
  display:none;
 }
 
 td.explanationBG {
  background:#eeeedd;
 } 
 
 button.explanation {
  position:absolute;
  display:none;
 }
 
 span.explanationText {
  font-family:Arial Narrow, Arial;
  font-size:16px;
  font-weight:bold;
  color:#cc0000;
 }
 
 a.explanationLink {
  text-decoration:none;
  font-weight:bold;
  color:#000099;
 }
 
 a.explanationLink:hover {
  text-decoration:underline;
 }
 
-->
</style>
<script type="text/javascript" language="Javascript">
<!--
 
 
 function setElement(elem) {
   var properties;
   properties="";
   for (var i in elem.style){properties+=i + " <br/>";
  }
     elem.style.display = "none";
 }
 
 
 function setup() {
  if (document.getElementById) {
   setElement(document.getElementById("explanationTable"));
   setElement(document.getElementById("explanationRemovalButtonId"));
  }
 }
 
 
 var hasClickedLink = false;
 
 window.onload = setup;
 
 // DO NOTE THAT document.getElementById MUST BE A VALID METHOD OF THE document OBJECT IN JAVASCRIPT FOR DHTML TO WORK AT ALL TO CREATE WINDOW
 
 function hideExplanation() {
   document.getElementById("explanationRemovalButtonId").style.display = "none";
   document.getElementById("explanationTable").style.display = "none";
 }
 
 function hideRemovalButton() {
  hasClickedLink = false;
 }
 
 function showExplanation() {
   document.getElementById("explanationTable").style.display = "block";
   if (!hasClickedLink) {
    document.getElementById("explanationRemovalButtonId").style.display = "none";
   }
 }
 
 function showRemovalButton() {
  if (!hasClickedLink) {
   hasClickedLink = true;
  }
   document.getElementById("explanationRemovalButtonId").style.display = "block";
   showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE CLICK ACTION TO MAKE WINDOW APPEAR
 }
//-->
</script>
 <td colspan="3">
  <noscript>
   <a href="/explanation.jsp" target="_new">
  </noscript>
  <script type="text/javascript" language="Javascript">
  <!--
   document.write("<a href=\"#\" class=\"explanationLink\" id=\"explanationLinkId\" onclick=\"showRemovalButton()\" ");
   document.write(" ondblclick=\"hideRemovalButton();hideExplanation()\" onmouseover=\"showExplanation()\" onmouseout=\"hideExplanation()\">\n");
  //-->
  </script>
   Click
   <script type="text/javascript" language="Javascript">
   <!--
    document.write(" or hover mouse");
   //-->
   </script> here for the explanation
  </a>
  <script type="text/javascript" language="Javascript">
  <!--
   var tableHTMLArray = [
    ".  Clicking onto the link will keep the explanation in place until you click the button below the explanation.<br><br>",
    '<div class="explanation" id="explanationTable" >',
    '<table>',
    " <tr>",
    '  <td class="explanationBG"><span class="explanationText">Explanation goes here</span>',
    '   <div align="center">',
    '    <input type="button" name="explanationRemovalButton" id="explanationRemovalButtonId" ',
    '      value="Click here to close window" onclick="hideRemovalButton();hideExplanation()">',  
    "   </div>",
    "  </td>",
    " </tr>",
    "</table>",
    "</div>"
   ];
   
   document.write(tableHTMLArray.join("\n"));
  //-->
  </script>
 </td>
</tr>
</table>
</body>
</html>
 
Open in New Window Select All Accept Multiple Solutions

Open in new window

0
 
fsze88Commented:
??
I tested your code snippet #23660116. It works fine.
my ie version is 6.0.2900.5512
I placed your code to http://www.kennam.com/experts-exchange.com/241314952.html
would you mind to have a look?
web.JPG
0
 
phil_powellAuthor Commented:
Thanks you verified exactly what I am now starting to suspect: local security settings are preventing the scripts from functioning properly.
0
 
Michel PlungjanIT ExpertCommented:
Horrific code.

How about this:

<html>
<head>
<style type="text/css"> 
 table.explanation { 
  background:yellow; 
  position:absolute;
  top:200px; 
  visibility:hidden;
 } 
</style> 
 
 
<script type="text/javascript"> 
 
 var hasClickedLink = false; 
 
 function hideExplanation() { 
  if (document.getElementById && !hasClickedLink) { 
   document.getElementById("explanationRemovalButtonId").style.visibility = "hidden"; 
   document.getElementById("explanationTable").style.visibility = "hidden"; 
  } 
 } 
 
 
 function hideRemovalButton() { 
  hasClickedLink = false; 
 } 
 
 
 function showExplanation() { 
  if (document.getElementById) { 
   document.getElementById("explanationTable").style.visibility = "visible"; 
   if (!hasClickedLink) { 
    document.getElementById("explanationRemovalButtonId").style.visibility = "hidden"; 
   } 
  } 
 } 
 
 
 function showRemovalButton() { 
  if (!hasClickedLink) { 
   hasClickedLink = true; 
  } 
  if (document.getElementById) { 
   document.getElementById("explanationRemovalButtonId").style.visibility = "visible"; 
   showExplanation(); // DO IT AUTOMATICALLY HERE AS YOU PERFORMED THE CLICK ACTION TO MAKE WINDOW APPEAR 
  } 
 } 
 
 
</script> 
</head>
<body> 
 
.  Clicking onto the link will keep the explanation  in place until you click the button below the explanation.<br><br> 
<table class="explanation" id="explanationTable"> 
<tr> 
  <td class="explanation"><span class="explanationText">Explanation goes here</span> 
  <div align="center"> 
   <input type="button" name="explanationRemovalButton" id="explanationRemovalButtonId" 
    class="explanation" value="Click here to close window" onclick="hideRemovalButton();hideExplanation()"> 
   </div> 
  </td> 
 </tr> 
</table> 
 
 
<a href="#" class="explanationLink" id="explanationLinkId" onclick="showRemovalButton(); return false" 
 ondblclick="hideRemovalButton();hideExplanation()" onmouseover="showExplanation()" onmouseout="hideExplanation()">explain</a> 
 
</body>
</html>

Open in new window

0
 
phil_powellAuthor Commented:
Sorry but your "improved" code failed the exact same way as my "horrific" code earlier.  No hidden window ever appears on click, mouseover, at all.
0
 
Michel PlungjanIT ExpertCommented:
Does in FF and IE7 - I do not have IE6. When I first tried it did not work in IE7

the issue I believe was the excessive hiding - it is not necessary to use BOTH display AND visibility.


0
 
fsze88Commented:
phil_powell,
I think it may have some problem on setting of your IE6.
Could you try to open this page by another computer one.... see how is going...?
0
 
phil_powellAuthor Commented:
I tried in FF and IE7 in different machines and it works just fine, including my original code.  I am not allowed to change my settings in IE6 on my machine nor am I allowed to install any other browser or browser version, so unfortunately I can't verify on my machine on anything but the variation of IE6 available to me.
0
 
Eric AKA NetminderCommented:
I have checked mplungjan's most recent version in Firefox 3.0.6, Opera 9.6.2 and Internet Explorer 6.0.2800.1106 on a Win2K computer, and the behavior is identical in each. If you mouseover the link, the yellow box with the text appears; if you click the link, the yellow box appears and there is a Close This button that works -- when clicked, the yellow box and button disappears again.

With the exception of the missing </html> tag at the bottom of the page, his code is exactly what you're looking for.

ep
0
 
phil_powellAuthor Commented:
I understand that, however, in IE6.0 on a number of machines here at work the code does not work, however, it does work in IE7.0 and FF 3.0 with no problem.  Whenever I try using his code on several IE6.0 machines here at work the window never appears, but it does on IE7 and on FF
0
 
Eric AKA NetminderCommented:
Well, it seems like mplungjan's code itself has been eliminated as a cause of the issue, which leaves only the machines -- and more likely the settings in IE6 -- as the problem.

So... take one of the machines that doesn't work and set the Tools/Internet Options settings to be identical to one that does work.

ep
0
 
Michel PlungjanIT ExpertCommented:
</html>

;)
0
 
phil_powellAuthor Commented:
Update: We were denied the opportunity to install IE7 nor Firefox; we can only use IE6 on the machine that has the problem with the hidden HTML table, sadly, I can only test here using it.
I am trying to prove that a security setting on the machine is blocking the table from ever appearing.  I checked the browser settings on the machine's IE6 vs other machines using IE7 and the settings were identical given the frameworks.
0
 
phil_powellAuthor Commented:
No solution?
0
 
Michel PlungjanIT ExpertCommented:
Not with the information given. Sorry
0
 
phil_powellAuthor Commented:
0
 
Eric AKA NetminderCommented:
Here's my objection. AFTER you requested more assistance -- for whatever reason and based on whatever conclusions you drew -- you got vastly improved code AND verfication that the issue is not the browser itself, but rather its settings -- and were even pointed in the direction of finding out which settings were causing the failure. Had you asked, one of us might have gone through our IE6 settings line by line to help you figure it out.

I have no issue with you not awarding the points to me. I do have an issue with you deleting the question entirely. If you want to restart this by posting your solution and then clicking the Accept As Solution button in that comment, then I won't object.

ep
0

Featured Post

Technology Partners: 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!

  • 10
  • 5
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now