Visibility of stacked HTML popups - javascript

I'm developing a jQuery Backbone.js web app.
I have a table with table entries. The table has a white background.
If the user selects a table entry, a modal popup is shown. To show the user that the popup is now in modal mode, I used to have the jQuery UI diagonal stripes (ui-widget-overlay).
But I changed to an alternative. Those stripes were too "striking", "obtrusive" for me. I now change the opacity of the table to 0.5. I like this more.
The problem now is that I have popups in the popup window. And if I also change the opacity of the first popup to show the user that only the second popup is working now, the table shines through the first popup.
Is there any possibility, any alternative way to have a popup window (a div) "dim", "grey out" to half of its appearance without getting transparent?

I would add another div on top of the div that has the same dimensions but has grey background color with opacity 0.75. This should work pretty fine.
CSS
.inner {
position: absolute;
}
.fade {
background: grey;
opacity: 0.75;
}
HTML
<div class="outer">
<div class="inner">content</div>
<div class="inner fade"></div>
</div>​
This way you are pretty safe when it comes to cross-browser references. Also you can control the fade by adding an "id" attribute to the fade class and make it go away. This way, you can also make div inactive, as they div inner fade is on top of it.

Try with hsla (look here).
<style>
#el1 {
background: red;
width: 700px;
height: 700px;
}
#el2 {
background-color: hsla(190, 30%, 94%, 0.6);
width: 500px;
height: 500px;
}
#el3 {
background: green;
width: 300px;
height: 300px;
}
</style>
<div id="el1">
<div id="el2">
<div id="el3">
</div>
</div>
</div>
In my code, el1 is the holder and not transparent at all. Then, el2 as first child uses hsla for transparency. The contained el3 is not transparent again and this works.

You could lay a glass pane on top of your page and set the z-index appropriately so that your 2nd popup lies on top of it and everything else is hidden under it:
#pane {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity:0.5;
z-index: 999;
}
Assure that your 2nd popup has a z-index higher than the pane and you're fine.

Related

How to bring frosty-glass effect for div over another div that contain texts

I want to have a frosty-glass effect on a div. There are few examples over internet on how to achieve this, however most of them say that, you have a background image for your body then you have a small div over it and want to have frosty-glass effect for that small div.
However my case is slightly different as I dont have any background image rather some text (or any other DOM for that matter) under a div, there is another div which covers that 1st div partially and I want to have frosty-glass effect on that 2nd div. Below is a little example
HTML
<div class = 'parent'>
<div class = 'top'>
</div>
<div class = 'bottom'>
Some div...
</div>
</div>
CSS
.parent {
height: 200px;
width: 100%;
}
.top {
height: 80px;
width: 100%;
position: fixed;
top: 0;
background-color: rgba(0,0,0,.2);
}
.bottom {
height: 150;
width: 100%;
margin-top: 10px;
}
I am looking for to have the frosty-glass effect for div with class top which is actually fixed positioned.
The Codepen example - https://codepen.io/Volabos/pen/RwWxwQd
Is there any way to have that effect using CSS?
Thanks for any pointer
Use the css filter property, eg. filter: blur(3px);.
Find a demo based on yours here.

Making elements appear as if they share a background

I'm working on a to-do web app and I'm trying to achieve a visual effect wherein multiple todos appear to "share" a single background. So, imagine that a user adds a few todos. Their backgrounds appear as a part of a single gradient, with colors transitioning from top todo to bottom todo. This pen should hopefully demonstrate what I want to happen (click the first div):
Elements 'sharing' a background
HTML:
<div class="outer">
<div class="inner"></div>
<p>CLICK ME</p>
</div>
CSS:
.outer {
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
background: white;
overflow: hidden;
clip: rect(auto, auto, auto, auto);
transition: transform 500ms ease-in-out;
font-size: 2rem;
}
.inner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, red, orange, green, blue);
opacity: 0.5;
}
Now this already kind of works, I guess, but only if I manually animate position of the divs. Is there some way to utilize CSS transforms instead? The big problem there is that as soon as a transform is applied to outer div, the fixed child div stops being fixed, completely destroying the 'same background' illusion. you can see it in this pen:
Illusion fail
I read that it's part of the spec and that's just how it is, but thought maybe you CSS wizards here know other ways to achieve this effect, perhaps even without fixed child divs. Would really appreciate your help.
Here's an example using clip-path, but one issue is that it doesn't clip the same way as clip does, because it only clips the element itself, not child elements under it. Children elements will also get clipped, so they have to be moved to match the new clip position.
https://codepen.io/mix3d/pen/OJPjbGp

Expand current div on hover and shrink others

I'm working on a project in school where I want some sort of slideshow on the webpage. I've gotten to a place where I'm not sure how to proceed. Here is what I got so far:
body {
background-color: #252525;
}
#wrapper {
width: 90%;
margin: 0 auto;
padding: 2%;
}
#images {
width: 100%;
height: 300px;
text-align: center;
overflow: auto;
}
#container-1 {
display: inline-block;
background-color: #fff;
width: 100px;
height: 300px;
transition: .5s ease-in-out;
}
#container-1:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
.container {
width: 100px;
height: 300px;
background-color: #fff;
display: inline-block;
transition: .5s ease-in-out;
}
.container:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
<div id="wrapper">
<div id="images">
<div id="container-1"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>
What I want this to do is for whenever I hover one of these images (or divs if you will), it will expand and show the whole image. There are two images, one clipped, and one that is the whole image. (Maybe thats a bad thing?)
The class container is just temporary to get an image of how it will look and give the other divs a background color. In #container-1:hover, the width is not the exact one I'm going to use. It might differ from the images I'm using.
Also if I don't use overflow: auto; the other divs will be pushed below the others, which is something I don't want.
The code in a way works as I want it. The only problem I got really is that when I hover one of the divs, it will push the other ones to the side, creating a conflict. Is there a way to make that not happen? Maybe a way to reduce the width of the other divs when the current div is being hovered on?
I just recently started with JavaScript so I'm nowhere close experienced with it, but I'm open for suggestions, but we are not allowed to use jQuery or anything like that sadly.
Here is a fiddle of it: jsfiddle
Your problem is that when one of the elements is hovered and expands, the sum of all elements exceeds the width of the container, and the one or two last elements are pushed below the others (into the next line).
To avoid that using only CSS, you have to choose width values where three default elements and one expanded (hovered) elements together don't exceed 100% of the container, like in this fiddle:
https://jsfiddle.net/kju94h1n/
To make non-hovered elements narrower when another element is hovered would require Javascript.

Unable to get image to properly Overlay

I have an image that only appears when icon located within a pagegridview is selected. What should happen is that the overlay shows, with the full sized image on top of it. What really happens is that the overlay overlays my full sized image and off centers it. My code stands as followed:
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
.fullView{
position: absolute;
}
Javascript
Works fine to display, can't test the hiding due to overlay being on top.
$('.preview').click(function(){
$("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#<%=imgFull.ClientID%>").click(function(){
$("#<%=imgFull.ClientID%>").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
Overlay/Full Image Divs
Located right below an ASP Panel and a PageGridView
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent" >
<asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
</div>
I could have sworn for the most part position:absolute css would solve the main portion, but the time crunch is on and I'm trying to do this with the flu. Any help is appreciated.
The answer was staring me in the face and I just didn't quite realize it. The #overlay# CSS was fine, however, I needed to additionally change the.fullViewtofixed` as well. Once this was done, the image hovered perfectly on top of the overlay, and I was able to utilize some CSS changes in the javascript to accurately center the image.

Transparent PNG Reacting to Sites Image Sliders and Content

I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.

Categories

Resources