• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 606
  • 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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

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