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

have div show on top of table with onclick + make table opacity 50%

i am trying to have a div show up in the top right corner of a table and make the table go opacity:50%
when you onclick text

i want to use css if possible with the following script for onclick.
this onclick will show and hide a table, but i would like the div to show up in the able and the
table and all it's contents to go opacity:50%

i hope i have not made it too confusing

thanks for all the help in advance
<html>

<head>

<script>
function show(){
tb.style.display="block"
}
function hide(){
tb.style.display="none"
}
</script>

</head>
<body>
<p><br>
</p>
<p>
<a href=javascript:show()>Show</a>
<a href=javascript:hide()>Hide</a> <br>
</p>
<table style="width: 600px" cellpadding="0" cellspacing="0" class="style1">
				<tr>
								<td id="tb">this is the table</td>
				</tr>
</table>
</body>
</html>

Open in new window

onclick-div-ontop-table.jpg
0
webdott
Asked:
webdott
2 Solutions
 
bpysherCommented:
Might this get you going in the right direction?
<html>

<head>
<style>
  <!--
    #overlay{
            visibility: hidden;
            float: left;
            width: 120px;
            height: 120px;
            background-color: #fff;
            color: #700;
            border: #000 1px solid;
            text-align: center;
            padding: 10px;
            z-index: 99;
            position: relative;
            top: 50px;
            left: 525px; 
    }
  -->
</style>
<script>
function show(){
  if(document.all){
   // Apply Opacity Filter for IE
      tb.style.filter="alpha(opacity=100)"
  }else{
   // Apply Opacity Style for Other
      tb.style.opacity="1"
  }
  table.style.backgroundColor="#00ff00"
  overlay.style.visibility="hidden"  
}
function hide(){
  if(document.all){
   // Apply Opacity Filter for IE
      tb.style.filter="alpha(opacity=50)"
  }else{
   // Apply Opacity Style for Other
      tb.style.opacity=".5"
  }
  table.style.backgroundColor="#88ff88"
  overlay.style.visibility="visible"
}
</script>

</head>
<body>
<p><br>
</p>
<p>
<a href=javascript:show()>Show</a>
<a href=javascript:hide()>Hide</a> <br>
</p>
<div id="overlay">
  Alert Text Goes Here
</div>
<table style="width: 600px; height:200px; background-color:#0f0; border:#000 1px solid; z-index:1; padding: 10px;" cellpadding="0" cellspacing="0" class="style1" id="table">
				<tr>
								<td id="tb">this is the table</td>
				</tr>
</table>
</body>
</html>

Open in new window

0
 
Tom BeckCommented:
If you want the user to react to the alert box before anything else can be done on the page, the better and more common approach is to give the entire page a 50% opacity so that just the alert is bright.
The attached code is cross browser compatible.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>Untitled</title>
<style type="text/css">
  <!--
    .screen
    {
        position:fixed;
        top:0px;
        left:0px;
        display:none;
	width:100%;
	height:100%;
        background-color: #333; 
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
        filter: alpha(opacity=50); 
        opacity: 0.5;
        z-index:200;
        visibility:hidden;
    }
    .popup {
        position: absolute;
        top: 100px;
        left: 425px;
        width: 120px;
        height: 120px; 
        background-color:#fff;
        z-index:300;
        visibility:hidden;
    }
    .td {
        border:1px solid blue;
        background-color:#CCFFFF;
    }
  -->
</style>
</head>
<body>
<br />
<p>
<a href="javascript:show();">Show</a>
</p>
<br />
<div id="screen" class="screen"></div>
<table style="width:600px; height:200px; background-color:#0f0; border:#000 1px solid; z-index:1;" cellpadding="0" cellspacing="30">
    <tr>
	    <td class="td">&nbsp;</td>
	    <td class="td">&nbsp;</td>
	    <td class="td">&nbsp;</td>
	</tr>
</table>
<div id="popup" class="popup"><a href="javascript:hide();">Hide</a></div>
<script language="javascript" type="text/javascript">
function show() {
    document.getElementById("screen").style.display = 'block';
    document.getElementById("screen").style.visibility = 'visible';
    document.getElementById("popup").style.visibility = 'visible';
}
function hide() {
    document.getElementById("screen").style.display = 'none';
    document.getElementById("screen").style.visibility = 'hidden';
    document.getElementById("popup").style.visibility = 'hidden';
}
</script>
</body>
</html>

Open in new window

0
 
TommyBoy1980Commented:
Why dont you use jQuery?

You should be able to do something like this (not tested). It toggles the opacity and the wording on the text depending on the status.

Tom





<a href="#" id="toggle">Show</a>


$(".tb").toggle(function () {
        $(".screen table").css({ opacity: 0.5 });
        $(".toggle").text("Show");
      },
      function () {
        $(".screen table").css({ opacity: 1 });
        $(".toggle").text("Hise");
      }
        
},);

Open in new window

0
 
webdottAuthor Commented:
both got me started on the right path.

thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now