I have a pop-up div that is able to stream video or show a document/image depending on the file attachment.
The issue I'm having is ensuring that it is centered vertically and horizontally, both for Desktop and mobile browsers/app.
I've been trying different attributes, but it's like I change from what I already have and suddenly it's just off the page.
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><img id="VideoLauncher" width="600" src="'+file+'" onclick="lightbox_close()"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "pdf" || extension === "doc" || extension === "docx"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><iframe src="https://docs.google.com/gview?url='+file+'&embedded=true" style="height:800px; width:600px;" frameborder="0"></iframe></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
var BoxCloseEle = document.querySelector("#boxclose");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -200px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';
Ideally, what I'm looking for is the styling that will dynamically center the light element, horizontally and vertically, though the light element will be a different size depending on the file it is to show. Because of this I can't simply hard code the height and width.
There are two ways to doing this:
.lightbox {
margin: 0 auto;
}
This only centers horizontally within the parent component. It is a very simple way if that's what you want to do.
If not, try this:
.lightbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
A popular approach to vertically and horizontally center elements is to use:
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
You can use this with absolute or fixed positioning . top and left moves the top left corner to the center of the screen while translate( -50%, -50% ) moves the element back to the left and top 50% of the elements width/height, placing the center of the element at the center of the page.
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
/* For Demo */
width: 75vw;
height: 75vh;
background-color: #ccc;
}
<div class="box"></div>
Use Flexbox:
main {
background-color: teal;
}
.modal-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
}
.modal {
display: block;
max-width: 300px;
width: 90%;
max-height: 300px;
height: 90%;
background-color: white;
}
<main>
<div class="modal-container">
<div class="modal">
<h2>yes</h2>
</div>
</div>
</main>
Related
I am creating a website and would like a user to be able to hover their mouse over an image and get more information about the image. I have this working correctly but I cannot figure out how to darken the other images that are not selected. Ideally I would like to create an overlay div using html and css that exactly matches the dimensions of a responsive image. When not hovered over this overlay div would use a transparent color to darken the image a bit. How can I make this div responsive to the image?
Here is my codepen to see what I am talking about
https://codepen.io/klaurtar/pen/NJgrOR
.overlay {
width: 55%;
position: absolute;
background-color: rgba(0, 0, 0, .5);
z-index: 10;
&--p1 {
left: 0;
top: -2rem;
height: 20rem;
}
&--p2 {
right: 0;
top: 2rem;
height: 20rem;
}
&--p3 {
left: 20%;
top: 10rem;
height: 22rem;
}
}
.wrapper {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
background-color: #000;
opacity:0.8;
}
<div class="wrapper">
<img src="https://unsplash.it/320/240" />
<div class="overlay"></div>
</div>
I want a overlay on an image, that goes up to the mouse height.
w3schools has a nice demo of an image overlay here, that goes a long way to what I want.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom
Here the overlay height is defined as
.container:hover .overlay {
height: 100%;
}
Is there a way to do define the height so that it goes up to the height of the image, assuming the mouse is over the image?
you can get this behavior using jQuery
$("div.container").mousemove(function(e){
var avatarImg = $("#avatar");
var avatarPosition = avatarImg.offset();
var mousePositionX = e.pageX - avatarPosition.left;
var mousePositionY = e.pageY - avatarPosition.top;
var overlayNewHeight = avatarImg.height() - mousePositionY;
$("div.overlay").height(overlayNewHeight);
});
$("div.container").mouseleave(function(){
$("div.overlay").height(0);
});
.container {
position: relative;
width: 50%;
margin-left: 100px;
margin-top: 100px;
border: black solid 1px;
}
#avatar {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://i.imgur.com/I80W1Q0.png" alt="Avatar" class="image" id="avatar">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</body>
I just want to have a loading animation with grayed-out background upon clicking TestLoading button. But I can't get it right. The loading gif is slightly in the left side but I want it in the center. Also grayed-out background is not working.
Here's my css:
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
}
.divLoaderContent {
position: absolute;
color: White;
top: 50%;
left: 40%;
}
In my view, I have this:
<!--LOADER -->
<div id="divProcessing" class="divLoader">
<p class="divLoaderContent"><img src="~/Content/image/blocks.gif"></p>
</div>
and
$('#btnRoster1').click(function(e) {
$("#divProcessing").show();
});
Here is revised version of css:
.divLoader{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(67, 71, 75, 0.8);
z-index: 30001;
}
.divLoaderContent{
position: absolute;
color: White;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
And don't use p tag for img container. Use div instead
To animate .show() use
$('#btnRoster1').click(function(e) {
$("#divProcessing").show(800);
});
where 800 is 0.8 sec.
To align the gif you can use flex and get rid of absolute positioning:
.divLoaderContent {
color: White;
display: flex;
justify-content: center;
}
Moving elements (especially img tags) with top/left based on percentages can get messy because it depends on the img size. I recommend using flex with this approach. The justify-content will center the children horizontally and align-items will center vertically when display is flex
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
display: none;
justify-content: center;
align-items: center;
}
Then have your js just modify display in css to flex when you want it to show, then display: none when you want it to hide;
$('#btnRoster1').click(function(e) {
$("#divProcessing").css('display', 'flex');
});
Fiddle below (has a timeout after 3 seconds to simulate something loading) I took out the unnecessary <p> tag as well.
https://jsfiddle.net/Garrito/vh2ttmu9/35/
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
In my code margin-left: is working in two different ways in Firefox and all the other browsers.
On Firefox, the margin is only like 20% of the "real" margin. I tried #-moz-document url-prefix() { }, but it didn't solve the issue, it moved both the image that is shown and the "real position from where the cars start moving" to a even bigger margin.
Here's my code:
<section id="home" >
<div id="home1inner">
<div id="header">
*lots of content here*
</div>
<img id="cars" src="images/cars.png" />
</div>
</section>
#home {
position: relative;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
background-repeat: no-repeat;
background-position: center;
height: 690px;
margin-top: 40px;
}
#home1inner {
height: 1550px;
overflow: hidden;
position: relative;
}
#cars {
position: absolute;
height: 690px;
bottom: -500px;
margin-left: -300px;
pointer-events: none;
}
Here's the website itself, where you can check the difference between Firefox and any other browser: http://denea.comeze.com/
Any ideas how to fix it?
In Firefox, your cars ID is defaulting to be centered on the page.
Simply add left: 0, like so:
#cars {
position: absolute;
height: 690px;
bottom: -500px;
margin-left: -300px;
pointer-events: none;
left: 0;
}
and it will start off at the position on the page you want.