Solved

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

Posted on 2010-08-21
4
590 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 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