This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 2 years ago.
I want to make DIV always in center, no matter when scroll to any place, div always in center of screen. I copy the source code from google search, but it seems like it is only on the top of the screen, however, when I scroll down the center and click the button again, it is on top, not in the screen anymore
function buttonTrigger() {
document.getElementById("centerDIV").style.display = "block";
}
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
div {
width: 200px;
height: 200px;
background-color: #1E90FF;
}
body {
height: 2000px;
}
.center-in-center {
border: 1px red solid;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
display: none;
transform: translate(-50%, -50%);
z-index: 100;
}
<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>
Try position: fixed
function buttonTrigger() {
document.getElementById("centerDIV").style.display = "block";
}
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
div {
width: 200px;
height: 200px;
background-color: #1E90FF;
}
body {
height: 2000px;
}
.center-in-center {
border: 1px red solid;
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
display: none;
transform: translate(-50%, -50%);
z-index: 100;
}
<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>
Related
I have a piece of code that when user hover the slider bar, a box will appear. Everything works as expected but when the user move the mouse to the beginning or to the end of the slider, the box overflow the content.
I'm looking for a way that keep the box inside the blue area
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
background-color: red;
height: auto;
}
.range {
width: 90%;
margin: 0 auto;
}
.range:hover + .thumbnail {
display: block;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
<div class="container">
<div id="core" class="core">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
[ If you want jsfiddle => https://jsfiddle.net/ram9wc65/ ]
Here is a image that show +- the expected output =>
image (I cannot embed images yet)
How can I fix this? How can I keep the box inside of blue area? I spent many hours working on it but no success.
Thank you.
In your onMouseMove function, you need to get the width of the thumbnail and divide that by 2, to get the minimum left position and calculate the maximum right position (width - minimum).
Then make sure you set the left property of the thumbnail no smaller than the minimum and no larger than the calculated maximum.
I'm working on my javascript skills by building a slider...however I've become stuck on this issue.
On every click event I want to increment the px value on a translateX.
My best attempt had the slider working however it was just inserting the inline css on top of the previous click.
HTML
<div class="slider">
<button class="slider__button slider__button--left"></button>
<div class="slider__viewport">
<div class="slider__slide"></div>
<div class="slider__slide"></div>
<div class="slider__slide"></div>
</div>
<button class="slider__button slider__button--right"></button>
</div>
CSS
.slider-wrapper {
height:500px;
}
.slider {
position: relative;
max-width: 1200px;
width: 100%;
height: 500px;
background-color: red;
overflow: hidden;
}
.slider__viewport {
display: flex;
width: 100%;
height: 100%;
}
.slider__slide {
flex-shrink: 0;
max-width: 1200px;
width: 100%;
height: 100%;
background-color: yellow;
border: 1px solid red;
float: left;
}
.slider__slide:nth-of-type(3) {
background-color: purple;
}
.slider__slide:nth-of-type(2) {
background-color: green;
}
.slider__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
z-index: 999;
}
.slider__button--left {
left: 5%;
background-color: blue;
}
.slider__button--right {
right: 5%;
background-color: red;
}
Here is the current code.
const sliderButtonRight = document.querySelector('.slider__button--
right');
const sliderViewport = document.querySelector('.slider__viewport');
const sliders = [...document.querySelectorAll('.slider__slide')];
const sliderWidth = sliders[0].getBoundingClientRect().width;
// The code in question //
sliderButtonRight.addEventListener('click', () => {
sliderViewport.style.transform = `translateX(-${sliderWidth}px)`;
});
// Comment End //
Built-in Javascript only please, no jQuery.
Thank You.
I'm currently making a jquery image slider of 2 images where you can slide left or right to see the before and after photos. I have everything i want set except for the position of the cover image. About 40% of the cover image seems to shift off to the right of the border but the 2nd image is position perfected inside the border. Please advise on how I can put my cover image inside the border perfectly like my 2nd image.
HTML:
<div class="con">
<img src="warming1.jpg" class="imageOne">
<div class="coverImage"></div>
<div class="handle"></div>
<script type="text/javascript">
$(".handle").draggable({
axis: "x",
containment: "parent",
drag: function () {
var position = $(this).position();
var positionExtra = position.left + 6;
$(".coverImage").width(positionExtra + "px");
}
});
</script>
</div>
CSS:
.con {
top:2140px;
left:10px;
width: 280px;
height: 230px;
border: 2px solid;
position: absolute;
z-index:1
}
.con img {
height: 100%;
position: absolute;
}
.coverImage {
position: absolute;
background: url("warming2.jpg");
background-size: auto 100%;
width: 100%;
height: 100%;
}
.handle {
width: 0px;
height: 100%;
border-left: 12px solid #fff;
position: absolute;
left: 50%;
}
.handle:after {
content: "DRAG";
display: block;
width: 60px;
height: 60px;
border: 2px solid #eee;
border-radius: 50%;
color: #999;
line-height: 60px;
font-weight: 300;
text-align: center;
background: #fff;
position: absolute;
left: -36px; top: 0; bottom: 0;
margin: auto;
}
Positioning Picture 1 within the Element containing the border:
Obtain width of element with the border
Obtain width of 2nd picture
Set pic1.width = borderElement.width - pic2.width
Position pic1 at borderElement.right - pic1.width
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>
On my website I have a hover bar at the top left that when you hover over it, it transitions outward and displays a button which you can press to display more options, but when you suddenly mouse over and go away again, it doesn't look smooth as the button doesn't fade with the div and the button kind of turns square when it the div fades back in. How could I fix it?
function myFunction() {
for (var i = 0; i < 500; i++) {
var x = Math.random() * screen.width;
var y = Math.random() * screen.height;
var star = document.createElement('div');
star.className = 'star';
star.style.left = x + 'px';
star.style.top = y + 'px';
document.body.appendChild(star);
}
}
$(document).ready(function() {
$("button").click(function() {
$('.mercury-lines').toggle();
});
});
$(document).ready(function() {
$("#fade").hover(function() {
$("button").fadeToggle(1500);
});
});
html {
background-color: #000;
overflow-x: hidden;
overflow-y: hidden;
}
#fade {
width: 20px;
height: 100px;
background: #848484;
transition: width 2s;
-webkit-transition: width 2s;
/* Safari 3.1 to 6.0 */
position: absolute;
border-radius: 10%;
top: 10px;
left: -8px;
opacity: 0.6;
filter: alpha(opacity=60);
}
#fade:hover {
width: 200px;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
/*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/
}
#button-change {
position: absolute;
top: 3px;
left: 3px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: none;
display: none;
}
.mercury {
position: absolute;
height: 18px;
/*25px for both*/
width: 18px;
margin-left: 25px;
border-radius: 50%;
/*box-shadow: green 0 0 25px;*/
}
.mercury-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -101px;
margin-top: -101px;
-webkit-animation: spin-left 30s linear infinite;
}
.mercury-lines {
display: none;
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
height: 225px;
width: 225px;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -34px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-left 4s linear infinite;
}
#-webkit-keyframes spin-left {
100% {
-webkit-transform: rotate(-360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body onload="myFunction()">
<img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png">
<div class="mercury-lines">
</div>
<div class="mercury-orbit ">
<img class="mercury" src="http://astronomyandlaw.files.wordpress.com/2013/03/mercury.jpg" />
</div>
<div id="fade">
<button id="button-change">Toggle Orbits</button>
</div>
</body>
</html>
add this for each of your #fade and #button-change in your css
#fade{
overflow:hidden;
}
and spacify the width to button
#button-change{
width: 100px;
}
but let me say that's not a good solution .. you can margin left your #fade and animate it .. I think it will be better
DEMO HERE Using js
in css
#fade{
margin-left :-180px;
}
in js
$(document).ready(function(){
$('#fade').on('mouseenter',function(){
$(this).stop().animate({'margin-left':'0px'},2000);
});
$('#fade').on('mouseleave',function(){
$(this).stop().animate({'margin-left':'-180px'},2000);
});
});
and use all of your code inside just one $(document).ready no need to repeat that
DEMO HERE Using css you can do that with pure css
#fade{
margin-left :-180px;
transition-duration: 2s;
}
#fade:hover{
margin-left: 0px;
transition-duration: 2s;
}
i know this is not the best answer but solves the problem,hope it helps
$(document).ready(function() {
$("#fade").mouseover(function() {
$("button").fadeIn(1500);
});
$("#fade").mouseout(function() {
$("button").hide();
});
});
Demo