Solved

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

Posted on 2010-08-21
4
588 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

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Generate Numbers in JQuery file 11 66
Binding a Grid in Javascript 5 42
HTML Anchor Link Problem 3 35
Bootstrap 3 - Style a dropdown 1 10
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

789 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