Solved

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

Posted on 2010-08-21
4
580 Views
Last Modified: 2012-05-10
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
Comment
Question by:webdott
4 Comments
 
LVL 5

Accepted Solution

by:
bpysher earned 250 total points
ID: 33494261
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
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 250 total points
ID: 33495181
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
 
LVL 1

Expert Comment

by:TommyBoy1980
ID: 33495742
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
 

Author Closing Comment

by:webdott
ID: 33550940
both got me started on the right path.

thanks
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now