I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob
Related
I want to achieve the type of effect seen at Forde + Nichol - http://fordenicol.com/
I would like the initial div to scroll away and then reveal the main content below and be able to continue scroll down the page. I have looked at a variety of reveals and footer reveals that are available online but fixed height cause an issue when attempting to continue scroll through content.
https://jsfiddle.net/3gkazmb8/2/
HTML
<div class="overlay"></div>
<div class="content">
<p>Content Information</p>
</div>
</body>
CSS
body {
padding-bottom: 600px;
}
.overlay {
height: 1200px;
position: relative;
z-index: 2;
background: red;
}
.content {
height: 1800px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-image: url(http://lorempixel.com/g/400/200/);
background-color: #000;
z-index: 1;
}
.content p{
color: yellow;
font-size: 50px;
padding-top: 500px;
}
This is the layout and general idea of how I want to achieve the effect but the fixed height and positions of the divs cause the content to be hidden.
Any help would be greatly appreciated.
Here we go,
Scroll Magic is an awesome plugin I have used in the past,
Use that with GSAP animation library and you will have smooth animations.
The tutorial is in the link I have attached
http://scrollmagic.io/examples/basic/section_wipes_natural.html
Finally got there. Unfortunately it wasn't fully possible with CSS so had to revert to using the plugin Curtains to achieve the transition - http://curtains.herokuapp.com/
Thanks everyone for your replies!
I have a div that contains scrollable content and I want to place an overlay on top of that div.
However, the overlay makes everything underneath it unscrollable and unclickable (obviously). Is there a way around that? Some HTML/CSS/JS combination maybe that keeps visible and yet allows the div that is right underneath it to still be scrollable/clickable ?
The reason I'm asking is because I have a div with a background-image (that's my overlay). But the image has a hole in the middle (it's a partially transparent png). So the div that is actually underneath this overlay is visible. So I want to be able to interact with that div.
I know I can write Js to transfer any click/scroll events from one element to another but I have lots of instances of the above setup on a single page, so writing that Js for every single case would be an overkill.
Thank you in advance for your help.
CSS
#scroller {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 50px;
}
#scroller>div {
position: absolute;
top: 0px;
left: 0px;
height: 500px;
width: 50px;
}
#scroller-overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 50px;
}
HTML
<div id="scroller">
<div></div>
</div>
<div id="scroller-overlay"></div>
JSFIDDLE : http://jsfiddle.net/7L8cmeuo/3/
Yes, with CSS in the scroller overlay:
pointer-events: none;
All clicks and other mouse events in the area of the transparent PNG will then fall through to the elements below it. See updated version of your fiddle.
There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
I'm still newbie in using CSS..
I really need help for doing our team's small project for mobile app :D
Here's my question :D
Is it possible for CSS to put "one element" above "another element" ??
For example I have "a wooden board" element and I have another element "sticks" ..
I would like the "stick" element behind "the wooden board" element.. So it's like a billboard style :D
(If in Photoshop, we can just drag the layer "sticks" below the layer "board")
If it is possible, then how to do it ?
I try to look for some sources but didn't get any result..
Any help would be appreciated :D (code/reference/etc)
Thanks a lot
NB : can't post the image :( since I just start to use stackoverflow, sorry :(
Yes you can, there are multiple ways of achieving that..
1st using position: relative; and z-index(optional)
Demo
<div class="one"></div>
<div class="two"></div>
.one {
height: 100px;
width: 100px;
background: #f00;
}
.two {
height: 100px;
width: 100px;
background: #0f0;
position: relative;
top: -70px;
left: 30px;
}
2nd you can use position: absolute; wrapped inside position: relative; container
Demo 2
<div class="one">
<div class="two"></div>
</div>
.one {
height: 100px;
width: 100px;
background: #f00;
position: relative;
}
.two {
height: 100px;
width: 100px;
background: #0f0;
position: absolute;
bottom: -30px;
left: 30px;
}
The first example is useful if you have 2 separate elements, you can use position: relative; and position the element accordingly using top, right, bottom and left properties.
The other example uses position: absolute; but did you see the change in markup? I've positioned absolute the child element, which is nested inside position: relative; element. I would prefer this solution.
z-index is optional, say if you want the bring up the 1st element over second
Demo
Make sure you use position property which is set to relative absolute or fixed as z-index doesn't work on static which is default position.
Also I would like to add up here, that I didn't provided z-index solution for Demo 2 as the elements are nested, so you cannot position a child element behind parent, it inherits parent elements z-index
Take a look at my website: http://homegym.sg/index.php/weight-tree-rack.html
If you mouseover the "more view" words under the product image, an additional images box will appear. Normally it's appearing normally in the center. However when i make my window size smaller, the position of the box will change.
I am using slideviewerpro script and i believe it is the one positioning the box but i am not able to tackle the problem. Here is the source of the script: http://homegym.sg/skin/frontend/default/electronics01-black/js/jquery.slideViewerPro.1.0.js
I believe the additional image box is in div#thumbSlider, have did some try and error modification of the js file but failed to solve the problem.
Ok. First of all, your div with width:660px; in product-img-box needs to have position:relative; added to it. Then you need to change the following rule
.product-view .product-img-box #ui0 {
position: absolute;
top: 600px;
left: 580px;
height: 60px;
}
to
.product-view .product-img-box #ui0 {
position: absolute;
height: 60px;
left: 50%;
margin-left: -200px;
margin-top: 15px;
}
widgets.css:589
And then just tweak from there. :)