JQuery for gray parts of a web page
I have a design as shown in the image below and I have a requirement where the user can click a link in a rectangular area named A, B and C. When one click on the link here in box B, then the whole green area should be gray, except for BOX B , and this should happen with BOX A, C.
Example as shown in the picture.
When the user opens the page
When the user clicks on the BOX B link
I'm not sure if this is possible if there is any similar example I can start with. I searched but couldn't find a similar example. This is usually an example related to a gray gray page.
I can do the same using onmouseover and replace the whole image with another image that has the surrounding area in gray. But I am not allowed to do it this way. I'm not sure if this is possible. I would appreciate it if you could point me in the right direction or if it is possible for a certain area of the page in gray.
This page is for PHP scripts
source to share
I created a small example for you which you can find here:
Its' basically using simple css z-index
to overlap / hide the whole place while the currently selected element was temporarily taller z-index
than the overlapping one <div>
.
You will notice that while the overlap <div>
is visible, you can click on the selected field. Anything else is not available (without removing the event handlers or so). Simply because there is another element that overlaps the rest.
source to share
One way to do this is to temporarily change the positioning of the element to absolute
and give it high z-index
and then add a layer below it that will act as an overlay.
You can also use a plugin like this one: http://jquerytools.github.io/documentation/toolbox/expose.html
source to share
There are several ways to do this, but a relatively quick and easy way is to make the elements you want grayed out in the same class. Then when you select an element, give that element an extra class and change the css for the above named elements except the selected element with the extra class.
source to share
You can try to put div
in the area where A, B, C are located. In this div you would have background-color
like this:
#myDivHider{
background-color:rgba(0,0,0,0.4);
display:none;
}
When you either click a, b, or c, you activate ( display:block
), all of this and set the z.index of your a, b, or C to go up higher.
An alternative could be a plugin from jQueryTools called Expose.
source to share