I need to display div after clicking button over the content. Button that causes displaying dev is not at the top of the page (you have to scroll down). But overlay div displays wrong, like on the picture. How can I modify the code to display the overlay div always in the middle of the page.
HTML:
<div id="rating_overlay"></div>
<div id="rating_content">
<div class="overlay_exit">
<a href="javascript:void(0)" onmousedown="toggleOverlay()" title="Zavřít">
<i class="fa fa-times fa-2x"></i>
</a>
</div>
<h2>Přidat hodnocení</h2>
<div id="profil_add_rating">
<!-- Content -->
</div>
</div>
<div id="rating_wrapper"></div>
<script type="text/javascript">
function toggleOverlay() {
var overlay = document.getElementById('rating_overlay');
var specialBox = document.getElementById('rating_content');
overlay.style.opacity = .8;
if (overlay.style.display == "block") {
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
</script>
CSS:
#rating_overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
#rating_content {
display: none;
position: relative;
z-index: 3;
padding: 16px;
margin: 150px auto 0px auto;
width: 500px;
height: 260px;
background: #FFF;
text-align: left;
}
#rating_wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
EDIT:
The solution with position: fixed works, but I will use http://drublic.github.io/css-modal/.
CSS' position: fixed; is your friend
Position fixed says "put this element in the absolute position according to the window"
CSS for "always on top & center(horizontaly) could be:
#rating_wrapper{
position: fixed;
top: 0;
left: 50%;
width: 200px;
margin-left: -100px;
}
EDIT: jsfiddle showcase: http://jsfiddle.net/m4Fbk/
CZ: fixni pozice je popsana i na jakpsatwebu ;) http://www.jakpsatweb.cz/css/position.html
You should use position: fixed for your content div instead of relative and correct position with top-left+margin values:
#rating_content {
display: none;
position: fixed;
left: 50%;
top: 50%;
margin: -130px 0 0 -250px;
width: 500px;
height: 260px;
...
}
Demo: http://jsfiddle.net/sRrBL/
Related
I have a div scroll-content that contains another div fixme which I want to fix only when the scroll-content div is at the top of the screen. If user scrolls past the scroll-content div, the fixme should disappear. I am using the code below but it doesn't seem to work:
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({
position: 'fixed',
top: '50%',
left: '50%',
display: 'block'
});
} else {
$('.fixme').css({
display: 'none'
});
}
});
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
background: black;
height: 1000px;
}
.fixme {
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>
This here is an example that uses position sticky to keep the .fixme element inside of the .scroll-content element. It probably didn't work before in your own attempt because of jQuery overwriting the position property with fixed.
I hope that this is the desired effect.
Otherwise let us know so we can help you figure out another solution.
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
position: relative;
background: black;
height: 1000px;
}
.fixme {
position: sticky;
top: calc(50% - 50px);
left: 50%;
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
transform: translate(-50%, 0%);
}
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>
I am trying to make an on click image overlay, where you click the left icon and an image fades or slides in, but when you click the right icon a different image fades or slides in. Also, when you click either icon, the associated images fade or slide out.
I've been trying to use
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
to make the display go from none to block when you click the icon, but there is no way to use this function with two separate links. I am not very great with javascript so any help would be greatly appreciated. Thanks.
https://jsfiddle.net/hzfw00L7/
Are you looking for something like this? I have used Jquery to speed up the coding!
$(document).ready(function() {
$(".left").click(function() {
$("#overlay").fadeIn(3000);
});
$(".right").click(function() {
$("#overlay2").fadeIn(3000);
});
$("#overlay").click(function() {
$("#overlay").fadeOut(2000);
});
$("#overlay2").click(function() {
$("#overlay2").fadeOut(2000);
});
});
#overlay {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#content {
padding: 20px;
}
a.left {
display: block;
position: absolute;
top: 320px;
left: 80px;
z-index: 6;
height: 20px;
background-color: purple;
color: white;
font-family: Arial;
padding: 10px;
}
a.right {
display: block;
position: absolute;
top: 320px;
right: 80px;
z-index: 7;
height: 20px;
background-color: magenta;
color: white;
font-family: Arial;
padding: 10px;
}
#buttons {
height: 50px;
width: 300px;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay">
<div id="text">Overlay Text</div>
</div>
<div id="overlay2">
<div id="text">Overlay Text 2</div>
</div>
<div id="content">
<div id="buttons">
<a class="left">Turn on overlay effect</a>
</div>
<div id="content">
<a class="right">Turn on overlay effect 2</a>
</div>
</div>
</body>
</html>
Added Fade in and fade out animations!
For More Reference Go here
I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>
Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
I'm using the w3 schools sidebar navigation and I've been trying to get a side-nav that opens from one div.
exp:
http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stacked=h
(Only the right one though)
Later on I'd like to make this nav sit at the bottom and open upwards. To the problem at hand though. I can't get this sidebar to show above the already existing page. The page consists of a randomly selected flash file. I have a feeling that one of the already existing position attributes is affecting this one or maybe one of the styles that I haven't been able to find.
HTML
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-right" style="display:none;right:0;" id="rightMenu">
<a href="javascript:void(0)" onclick="closeRightMenu()"
class="w3-closenav w3-large">Close ×</a>
<i class="fa fa-home w3-xxlarge"></i>
<i class="fa fa-search w3-xxlarge"></i>
<i class="fa fa-envelope w3-xxlarge"></i>
<i class="fa fa-globe w3-xxlarge"></i>
</nav>
<object id="flash-container">
<embed id="flash-content" src="" type="application/x-shockwave-flash" />
</object>
CSS
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
background-color: #2e1565;
}
#popup-container {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#flash-container {
z-index: 0;
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
}
#flash-content {
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
overflow: hidden;
z-index: 1;
background-color: #2e1565;
}
#flash_name {
color: #5c5ce0;
z-index: 20;
position: absolute;
padding-left: 50%;
}
#rightMenu {
position: relative;
z-index: 3;
}
JS
function openRightMenu() {
document.getElementById("rightMenu").style.display = "block";
}
function closeRightMenu() {
document.getElementById("rightMenu").style.display = "none";
}
Remove the display:none from the style attribute of the nav tag and it will show.
Here it is with the display:none removed on jsbin: http://jsbin.com/nubewuragu/edit?html,css,js,output
I have a container div with a button and a car img inside of it. The car moves when the page is scrolled.
When the mouse is hovering over top of the button or img, the scroll wheel no longer works.
I tried adding a gray overlay div to block the hover on the button and car. But this prevents the button from being clicked.
Is there a way to make scrolling work even when the button or image is hovered?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>
I think I realize now that your issue is that when the mouse is over top of the button or car image, mousewheel scrolling does not work. This is because the position of those elements is "fixed". I'm not sure if this is a bug or not. Anyways, you can simulate the fixed position with javascript to get around this issue.
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>