Develop Reference

Angular/HTML Glass-pane on a specific element

How is it possible to make a glass-pane (e.g. with hourglass) on an HTML element E, only within E's boundaries?
By glass-pane we mean, say a semi-transparent that has an hourglass, overlapping just the area in the E element boundaries. When the glass-pane is active anything in its background is inaccessible.
We tried using the uibModal lib, but it spreads all over the window, while we need to overlap only a specific element.
Thank you,
Rami

The trick here is using the mighty z-index property and some opacity.
Let's suppose you have a lateral element with 300px of width and 100vh of height:
<aside style="width:300px; height:100vh; float:right; z-index:1;"> </aside>
Now, all you have to do is to insert a div in it with position:absolute (to not interfere with the other objects of your div) and an higher value of z-index:
<aside class="parent">
<div class="pane"></div>
</aside>
CSS:
.parent{
width:300px; /*or your width/height settings...*/
height:100vh;
float:right; /*just for the example, you can set your div wherever you want*/
z-index:1;
}
.pane{
height:100vh; /*needed to fill your parent div*/
width: 300px;
z-index:2;
position:absolute;
opacity: 0.6; /*pane effect*/
}
This way, you'll end having a "watermark" on your div not clickable, and with a pane effect.

How to make a fixed div/nav resize with the div it's inside of?

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/

When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/

I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle

Is there a way to put a child element behind its parent using css? [duplicate]

This question already has answers here:
How to get a parent element to appear above child [duplicate]
(7 answers)
Closed 9 years ago.
I was wondering if there is a way to put child element behind its parent using css. I now z-index is not an option because the child elements inherits the z-index of their parents. But I want to know if there's a hack or anything I can use to get this done. Or if there's a javascript hack or anything.
Forgive the bad english.

If the parent has no z-index and the child has negative z-index it works. Check here:
jsfiddle.net/L29d2/
html
<div class="big">
<div class="small"></div>
</div>
css
.big {
background-color:red;
width:400px;
height:400px;
}
.small {
float:left;
position:absolute;
background-color:blue;
width:200px;
height:200px;
margin-left:300px;
z-index:-1;
}

Apply the following style to the child element:
position:relative;
z-index:-1;
You can adjust the z-index value, but it should be negative. May be it will solve your problem. For more information you can check out this page http://www.tutorialrepublic.com/css-tutorial/css-position.php

Sergio is exactly right, if the parent inherits the index the child can be negative and hide. At least that is true in my tests. Also note that you have to use relative/absolute/fixed positioning for the child.
http://jsfiddle.net/6xT45/
#parent
{
position: absolute;
width: 100px;
height: 100px;
background: blue;
}
#child
{
position: absolute;
z-index: -1;
width: 50px;
height: 50px;
top: 25px;
left: 25px;
background: red;
}

Dead Centered Div

How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?

Here's a pure CSS solution, note the percentages and negative margins.
http://jsfiddle.net/R7Xy2/
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}

Here is your code
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
just attach this event to window.onscroll. No need to use jQuery, try this
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
good luck

You may also try the following:
HTML markup:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
The border and padding can be changed or removed on the basis of requirement. Also, make sure that the parent container must be positioned relatively, i.e. it should have position:relative.

CSS for the <div>:
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
Set the above using jQuery on the <div>.
You can calculate the centerofpagepixel.x and y using jQuery again. Probably get the width/height of the screen and divide them by 2.

How do I do this absolute positioning in CSS?

<div id="container" style="float:left;">
<img src="{{ p.sizes.2.url }}" width="200" height="auto">
<div class="trans_caption" style="position:absolute;background-color:#cccccc;">
Picture Caption
</div>
</div>
How do I overlay the caption on top of the picture...but aligned on the bottom? Also, I want the caption width to be the same as the container. I tried to do width:100%, but it didn't work...

Is that what you are looking for?
Just set position:relative in your main div - it will allow to position inner div relatively to the main div, and set bottom:0 in your inner div to position it on the bottom. Small hack with float:left and width:100%, without float width:100% doesn't seem to work properly.

<div style="position: relative; width: 200px;">
<img src="" />
<div style="position: absolute; bottom: 0;">
<!-- caption text here -->
</div>
</div>

<style>
div#container {
position: relative;
float: left;
}
div#container div {
position: absolute;
bottom: 0;
background: #ccc;
}
</style>
<div id="container">
....

You need to set position: relative on #container. That will make the absolute positioning relative to the edges of that container div.
Add bottom: 0; to .trans_caption to make the baseline (not the exact bottom) of the text aligned with the bottom of the picture. Increase that number if you want to move the text higher up.
Add width: 100% to .trans_caption to make it as wide as its container.
If you want to center the caption, add text-align: center; to .trans_caption.
Note that the auto value for an image's height attribute is not valid.
It's best to keep the CSS separate from the HTML markup, in a separate file. What we have now would be (try it out):
#container {
float:left;
position:relative;
}
.trans_caption {
background-color:#cccccc;
bottom:0;
position:absolute;
text-align:center;
width:100%;
}

Absolute positioning means that the element will be positioned at a specific spot on the last parent that is not positioned with the default, position: static.
Relative positioning is the same as static, except:
The Left, Right, Top, and Bottom nudge the positioning from their normal "static" position, and
Absolutely positioned elements will be positioned inside it.
All of that is to say that if you position your container as relative, the absolute positioning of the trans_caption will be in affect relative to your container, where now it is positioned relative to a more higher level container.
Also, absolute positioning will place your element at top: 0; left: 0; unless otherwise specified. You need to position your caption at bottom:0; to force it to the bottom of your container.
Your trans_caption will normally default to 100% width because <div> is a block-displayed element, so it makes sense that it didn't do anything with the example you've provided. This isn't the case with absolutely positioned items, however, so keep that line. If you then center the text within that <div> by styling it with text-align: center;, it should look the way you expect.

I think what you want to do is set the css background property on the container.
Something like this
<div id="container" style="float:left; width:200px; height:100px; background:url('{{ p.sizes.2.url }}') no-repeat; position:relative">
<span style="position:absolute;bottom:0px">Caption goes here</span>
</div>