Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How do you make elements under a div layer inactive?

Posted on 2008-11-10
5
Medium Priority
?
3,338 Views
Last Modified: 2012-05-05
Hi, I have a css style that makes certain portions of my site appear inactive until they are clicked.  The css places a div over the area with a layer that has an opacity set to 60% so it appears grayed out.

The problem is that the content underneath the opacity layer is still active.  IE: you can still copy text, click links, etc.  I can't turn this activity off permanently, as when they click to take the layer off, the content then becomes active.

I need a way to make it so the content under the layer is inactive when the opacity layer is over it.

Thanks for any help.  My code below contains my CSS styles and the div container.
<!-- Grayout area -->
<style>
div.container {
        position:relative;
        width: 100%;
        height: 100%;
 
}
 
div.content {
        position:absolute;
        width: 100%;
        height: 100%;
	top:0;
	left:0;
        z-index:1;
filter:alpha(opacity=50);
opacity:.50;
-moz-opacity:.50;
-khtml-opacity:0.5;
        background-color:#CCCCCC;
 
		
        }
div.over_content {
        width: 100%;
        height: 100%;
        z-index:2;
		vertical-align:middle;
		
}
.edit_this {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
-khtml-opacity:0.6;
		font-size:54px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
.edit_this_small {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
-khtml-opacity:0.6;
		font-size:20px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
</style>
<!-- Grayout area -->
 
 
 
 
<div class="container"> 
  <div id="content_canvas" class="content">
    Content that is under the layer.  <a href="link.html">Link that should be inactive when layer is over it.</a>
  </div>
  <div id="over_content" class="over_content" align="center"><a class="edit_this" href="edit2.jsp">Edit This</a>
  </div>
</div>

Open in new window

0
Comment
Question by:Shaye Larsen
  • 3
  • 2
5 Comments
 
LVL 15

Assisted Solution

by:quincydude
quincydude earned 800 total points
ID: 22927057
Set the "inactive" DIV with style
#mydiv
{visibility:hidden;}
and enable it by
mydiv.style.visibility="visible";
by javascript at run time
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 22935599
Thanks for your comment.

visibility:hidden makes the content div completely hidden.  In the code above you will see that I am using opacity because we need to be able to see the content underneath.  But it just can't be active.  Meaning, while the cover layer is on top, you shouldn't be able to click links underneath.
0
 
LVL 15

Assisted Solution

by:quincydude
quincydude earned 800 total points
ID: 22937504
Hmm... what about the greyout approach? somethingl like that mentioned in
http://www.hunlock.com/blogs/Snippets:_Howto_Grey-Out_The_Screen

but you place a whole screen div, which is  transparent and set the z index between your bottom div and the top div so it filters out all user actions that can affect the bottom div.
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 22961610
Thanks for the suggestion.

I have a gray out element going.  I can't do it on the whole screen as I just need to to work over certain tables.

I just took a stab a using the z-index and set the bottom layer to 1 and the top layer to 60.  It had no effect.

Below is my z-index rankings.
<!-- Grayout area -->
<style>
div.container {
        position:relative;
        width: 100%;
        height: 100%;
		z-index:1;
 
}
 
div.content {
        position:absolute;
        width: 100%;
        height: 100%;
	top:0;
	left:0;
        z-index:2;
filter:alpha(opacity=50);
opacity:.50;
-moz-opacity:.50;
-khtml-opacity:0.5;
        background-color:#CCCCCC;
 
		
        }
div.over_content {
        width: 100%;
        height: 100%;
        z-index:40;
		vertical-align:middle;
}
div.over_over_content {
        width: 100%;
        height: 100%;
        z-index:50;
		vertical-align:middle;
}
.edit_this {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:60;
		text-align:center;
		font-size:54px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
.edit_this_small {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
		font-size:20px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
</style>
<!-- Grayout area -->

Open in new window

0
 
LVL 1

Accepted Solution

by:
Shaye Larsen earned 0 total points
ID: 23204969
We were able to accomplish this by converting table structures to DIVs.  We still have tables, but using DIVs as controllers, we were able to get this to work.  The problem is that tables do not support CSS like DIVs do.  
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

579 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