Css/JavaScript Use Div to Grey Out Section of Page

CSS/JavaScript Use Div to grey out section of page

You might try the jQuery BlockUI plugin. It's quite flexible and is very easy to use, if you don't mind the dependency on jQuery. It supports element-level blocking as well an overlay message, which seems to be what you need.

The code to use it is as simple as:

$('div.profileform').block({
    message: '<h1>Premium Users only</h1>',
});

You should also keep in mind that you may still need some sort of server-side protection to make sure that Non-Premium users can't use your form, since it'll be easy for people to access the form elements if they use something like Firebug.

How to grey out a box in CSS

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.

Here's a nice demo to show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.

$(document).ready(function() {  $("#myDiv").click(function() {    $("#overlay").show();  });});

#myDiv {  width: 100px;  height: 100px;  background-color: yellow;  margin: 50px 50px;  padding: 10px;}
#overlay {  display: none;  position: absolute;  width: 100px;  height: 100px;  background-color: gray;  top: 50px;  left: 50px;  padding: 10px;  opacity: .8;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="myDiv">  <p>Some text</p>  <input type="button" value="A button" /></div>
<div id="overlay"></div>

How can I grey out page except for one element?

Can do it using css box-shadow.

.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}.box.selected{    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);}

<div class="box">Box 1</div><div class="box">Box 2</div><div class="box selected">Box 3</div><div class="box">Box 4</div>

Grey out background while page loading

Try this:

CSS

.main:before{
    position: absolute;
    content:"";
    width: 100%;
    background: #EBEBEB;
    height: 100%;
    left:0;
    z-index:-1;
}

DEMO HERE

Gray out divs / page content while page is loading

This type of loading is called as skeleton loading effect. You have to follow some steps to achieve this effect

1. Create a skeleton for your items
2. Add transition and animation to the skeleton(placeholders).
3. Add js loading script and load multiple skeletons till loading finished.

You can follow this tutorial, if you need to clarify anything. Skeleton tutorial

Jquery - highlight div / grey out rest of the page

A z-index is relative to the the stacking context, not relative to the document. If you want the expose element to appear over the overlay, they must either be siblings, or you must explicitly position .expose using position:*.

In general, the elements must be part of the same stacking context in order for their z-index values to be compared. You can learn more about stacking contexts here.

Some additional points:

1. You should make the overlay transparent to pointer events. You can do this by using pointer-events:none;
2. You do not need to bind to .expose when the container is moused over. Bind the handlers in parallel with the handler for showing/hiding the overlay

Here is the corrected code. You can see a working demonstration here:

CSS:

#overlay {
    background:rgba(0,0,0,0.3);
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99998;
    pointer-events:none
}
.expose{
    background-color:red;
    position:relative;
}

JS:

$('.entry-content').hover(function() {
    $('#overlay').fadeIn(300);
}, function() {
    $('#overlay').fadeOut(300);
});

$('.expose').hover(function(e) {
    $(this).css('z-index', '99999');
},function(e) {
    $(this).css('z-index', '1');
});

How to grey out parent div and sibling divs with javascript/css

If I understand the problem correctly, you want a transparent overlay over your page, but with a 'hole' in it for one element to show through?

Here is a first pass at the problem. It uses a pseudo-element over the target element that is just 10 pixels wider on either side with a transparent box-shadow on it that extends across the entire viewport. (100vw should be enough, but could be made bigger if necessary). A second inset box-shadow provides the soft edge.

toggleOverlay.addEventListener('click', () => {
  foo.classList.toggle('with-overlay');
});

body {
  background: antiquewhite;
}

.foo {
  padding: 40px;
  margin: 100px;
  position: relative;
  border: solid 1px black;
}

.foo.with-overlay:before {
  content: '';
  pointer-events: none;
  position: absolute;
  border-radius: 10px;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  box-shadow: 0 0 0 100vw rgba(1, 1, 1, 0.5), inset 0 0 2px 2px rgba(1, 1, 1, 0.5);
  background: transparent;
  opacity: 0.8;
}

<div>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="foo" class="foo">
  hello world
  <button id="toggleOverlay">toggle overlay</div>
</div>
<div>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Greyed-out waiting page in Javascript?

I tend to use a simple div and some javascript to do this sort of thing.

So for example, in your page create a div, which will function as your grey-out.

      <div id="blackout" style='background-image:url(someSemiTransparent.png); display:none;"></div>

Then style it like so:

      #blackout {
      width:100%;
      height:100%; /* make sure you have set parents to a height of 100% too*/
      position: absolute;
      left:0; top:0;
      z-index:10 /*just to make sure its on top*/}

Then when your process is about to begin you can call (to show it):

      document.getElementById('blackout').style.display = 'block';

And once its done you can hide it again by:

      document.getElementById('blackout').style.display = 'none';

When you do show it, you may want to set the overflow of your body to hidden, then back to auto too, this will prevent the user scrolling and only seeing partial blackout.

Now I normally use jquery for the show and hide though am pretty sure the javascript above is correct..

Update:

To keep everything much tidier, as Chad mentions, you're better off putting all styling into CSS. I.E.

  #blackout {
     width:100%;
     height:100%; /* make sure you have set parents to a height of 100% too*/
     position: absolute;
     left:0; top:0;
     z-index:10 /*just to make sure its on top*/
     background-image:url(someSemiTransparent.png); 
     display:none;}

and remove the style from the DIV. I.E

      <div id="blackout"></div>

---

Related Topics