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.
Related
EDIT:
In essence my problem appears to be the wish to combine overflow-y:hidden; with overflow-x:visisble;. Which appears to go against the spec. If anyone knows a workaround be sure to let me know :)!
When I try to position a div slightly outside of it's parent div using position: absolute; or position: relative; the parent div gets a scrollbar.
I dont't want a scrollbar. But obviously when I use overflow: hidden; the bit of the child div that's outside of the parent get's cut off.
How to make the bit that's outside of the parent visible, without a scrollbar appearing?
EDIT:
Forgot to mention. the outside div requires to have overflow-y:hidden;
EDIT ADDED JSFIDDLE:
https://jsfiddle.net/Lhhxdz9n/4/
<div style="
position:relative;
width:500px;
height:300px;
background-color:green;
overflow-y:hidden;
">
<div style="
width:50%;
margin-left:50%;
height:50%;
position:relative;
overflow:visible;
background-color:red;
">
<div style="
background-color:blue;
position: absolute;
top: 50%;
height: 20px;
transform: translateY(-50%);
width: 10px;
right: -5px;
">
</div>
</div>
</div>
stick position: relative; on the parent element before setting the child to have "position: absolute;".
Make sure the parent element (or any elements higher in the dom) does not have "overflow: auto;" associated to it
You should add 'overflow:visible' to the styling of parent div, along position:relative. For child div you can write position:absolute and define positions
Check this
overflow:visible;
https://jsfiddle.net/Lhhxdz9n/5/
I have a responsive menu on top of an image background, which also has text on top.
Because I have to set the text messaqge with "position: absolute" to make it overlay on top of the background image, when I expand the menu the menu items will overlay on the text message. How do I fix that?
The other problem is I'd like to have the menu be transparent on the background image instead of being on the dark grey background. However, I can't seem to find a way to do that.
Here's the code
You may want to consider for you header message to put it inside of your header-slides div and then position this div to relative. That way your header message is actually positioned absolutely in the header and not in the body. Then if you want your nav to be transparent over the header image then you can position your body to relative just to be safe and position your nav to absolute, give it a high z-index and background opacity can be achieved by using rgba colors. So something like the following:
Here is a fiddle demo Fiddle Demo
Header:
.header-slides {
height: 500px;
border: 1px solid black;
position:relative;
}
<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'>
<h2>Header Message</h2>
</div>
Then your nav:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,20,20,0.8);
min-height: 30px;
position:absolute;
top:0;
left:0;
width:100%;
z-index:5;
}
And then remove the postion of relative from your responsive css at max width of 680px from your nav so remove the following completely:
ul.topnav.responsive {position: relative;}
z-index, bruh.
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
.topnav{z-index:9999999}
try it.
For transparent BG colors you can use rgba(). There are online tools to convert your colors all oer the place.
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.
<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>
I have the image position fixed inside div and code is gven below
#content{
margin-top:100px;
width:900px;
color:#009;
border:1px solid red;
overflow:hidden;
display:block;
}
img {
float:left;
position:fixed;
top:140px;
padding:50px;
}
#text{
display:block;
border:1px solid green;
width:500px;
height:1200px;
float:right;
overflow:scroll;
}
#footer{
clear:both;
width:600px;
height:300px;
border:2x solid blue;
color:#939;
}
HTML is
<div id="content" >
<img src="bar.jpg" width="46" height="639" />
<div id="text">
ggggggggggggggggggfgdfgdfgdgdfgdgdfgdf
</div>
</div>
<div id="footer">
Footer text
</div>
</body>
Now when i scroll down then image comes out of the content div box.
IS there any way so that even if i scroll the image bar should stay inside the div box.
The screen shot shows my problem
First Screen is ok without scrolling
alt text http://img293.imageshack.us/img293/8640/bar1k.png
But when i scroll the text full then it covers my footer as well
alt text http://img36.imageshack.us/img36/4393/bar2z.png
I want that image should scroll with the scroll bar but it should not come outside the div box . Is that possible. Basically the div box should be the boundary of the image. THe image should not come out of the div box any time but it should scroll in between that with the length of div box
so you want that blue bar to stay within the red box, right?
if that's the case you need to have the css for the blue box as
img {
position: absolute;
top:140px;
left:50px;
}
and also the container has to have
#content{
...
position: relative;
}
position: relative will make the blue bar absolutely positioned with respect to #content rather than the document object.
position: fixed positions your image relative to browser window
If you want to position it relative to the parent div, you should use position: absolute
position: fixed
Generates an absolutely positioned
element, positioned relative to the
browser window. The element's position
is specified with the "left", "top",
"right", and "bottom" properties
In other words you can't "fix" your image inside of div only relative to browser window.
Follow-up:
If you want that image to always be on the same place in the background do it with CSS:
body {background: transparent url(bar.jpg) bottom left no-repeat;
background-attachment:fixed}
from what i see, just remove the position: fixed from your img tag styles
img {
float:left;
padding:50px;
}
I dont know if is just because you made a quick demo to show us, but never apply a style to a tag, its better to use ID's or Classes
if you want to keep a margin of 140 pixels from the top of the div containing the image, use:
img {
margin-top: 140px;
}