Center Div when button is clicked - javascript

How can I better center the div elements (which are off screen on the right)? Trying to make popups appear from the right side to the center over the buttons but they are slightly off centered. I set the position of each popup box to absolute positioning and I am using javascript to change the top and left values. I plan on having the popup to slide back to its original position after 8 seconds.
loadEventListeners();
function loadEventListeners() {
cancelButton.addEventListener('click', moveCancelPopUp);
acceptButton.addEventListener('click', moveAcceptPopUp);
}
function moveCancelPopUp() {
cancelPopUp.style.position = 'absolute';
cancelPopUp.style.top = '50%';
cancelPopUp.style.left = '50%';
}
function moveAcceptPopUp() {
acceptPopUp.style.position = 'absolute';
acceptPopUp.style.top = '50%';
acceptPopUp.style.left = '50%';
}
.accept-popup-box,
.cancel-popup-box {
border: 2px solid black;
padding: 20px;
z-index: 1;
border-radius: 5px;
background: white;
height: 50px;
width: 200px;
}
.cancel-popup-box {
position: absolute;
top: 1px;
right: -100%;
}
.accept-popup-box {
position: absolute;
bottom: 10%;
right: -100%;
}
<div class="btn-container">
<button class="cancel-btn">Cancel</button>
<button class="accept-btn">Accept</button>
<div class="cancel-popup-box">
<div class="cancel-popup-content">
<p>Come Back Soon.</p>
</div>
</div>
<div class="accept-popup-box">
<div class="accept-popup-content">
<p>Thank You!</p>
</div>
</div>
<script src="challenge2.js"></script>
</div>

Related

Show selected box in horizontal scroll box

I have horizontal scroll box i.e Row column structure in it. Thats working fine
Now I need to show selected box as well. Need to show box selected as per image i have attached which is infront after scroll.
need help in this doing this?
My html structure is like this using angular JS and ionic.
<div class="row" <div class="row" style="width:100%;overflow-x:scroll;">
<div class="col col70" style="width:200px;height:150px;border:1px solid black;">
</div>
<div class="col col70" style="width:200px;height:150px;border:1px solid black;">
</div>
</div>
I have structure like this its look like []1
Now how I can show div is selected using javascript.
If what I understood was correct, this is what you meant. If not please leave a comment.
I just made the scroll div move along adding or subtracting 5 to its css position left ever the div was scrolled.
var lastX = $(".row").scrollLeft();
$(".row").scroll(function() {
var position = $(".scroll-box").position();
var position1 = $(".fa-caret-down").position();
const $el = $(".row");
let currX = $el.scrollLeft();
if (currX > lastX) {
$(".scroll-box").css("left", position.left + 5);
$(".fa-caret-down").css("left", position1.left + 5);
lastX = $el.scrollLeft();
}
if (currX < lastX) {
$(".scroll-box").css("left", position.left - 5);
$(".fa-caret-down").css("left", position1.left - 5);
lastX = $el.scrollLeft();
}
});
.scroll-box {
position: fixed;
bottom: 75px;
left: 125px;
}
.fa-caret-down {
position: fixed;
left: 215px;
bottom: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="row" style="width: 100%; overflow-x:scroll;">
<div style="width: 150%; height: 150%;">The following scroll box follows the scroller.</div>
<br><br><br><br><br><br><br><br><br>
<div class="scroll-box col col70" style="width:200px;height:150px;border:1px solid black;">
</div>
<i class='fas fa-caret-down' style='font-size:48px;color:red'></i>
</div>
You can use something like this.
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
height: 300px;
width: 300px;
border: 1px solid white;
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
<div class="scrollmenu">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>

How to make a section sticky for several seconds and then sticky for all time

In the website - right panel has three ads, what I want - there should be 3 ads top two ads should be fixed for a few seconds and then third ad should be sticky for a long time.
I am using this code, in which third ad i.e. second section of the ad is sticky when scroll reaches to its position,
<div class="right-panel">
<div id="adsection1">
<!--ad1-->
<br/>
<!--ad2-->
</div>
<div id="adsection2" style="width: 300px; height: 600px;">
<div id="abc_ad1">
<!--ad3-->
</div>
</div>
<script>
if (window.innerWidth > 1024) {
var adElem = document.getElementById('adsection2');
window.onscroll = function () {
var rect = adElem.getBoundingClientRect();
adElem.style.width = rect.width + 'px';
adElem.style.height = rect.height + 'px';
document.getElementById('abc_ad1').style.width = rect.width + 'px';
document.getElementById('abc_ad1').style.height = rect.height + 'px';
if (rect.top <= 0) {
document.getElementById('abc_ad1').style.position = "fixed";
document.getElementById('abc_ad1').style.top = "0";
document.getElementById('abc_ad1').style.zIndex = "2147483647";
} else {
document.getElementById('abc_ad1').style.position = "";
document.getElementById('abc_ad1').style.top = "";
document.getElementById('abc_ad1').style.zIndex = "";
}
};
}
</script>
</div>
Consider the right section on this link (I want to design just like it), https://www.tutorialspoint.com/python_blockchain/python_blockchain_client_class.htm
You don't really need JavaScript in order to achieve described effect.
The trick is to properly format your HTML layout - it also means to divide it in appropriate parts, so that you have a right parent for a sticky element.
Side note: I use divs for the sake of simplicity of an example, but in the real life app you should opt for semantic HTML.
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#content {
height:200%;
width: 100%;
}
.col {
height: 100%;
width:50%;
float: left;
}
#main {
background: linear-gradient(#58668b, #ffffff);
}
#ads {
position: sticky;
top: 0px;
background-color:#bdeaee;
}
#header {
height:30px;
background-color: #29a8ab;
}
#footer {
height:100px;
background-color: #651e3e;
color: #ffffff;
}
.top-section {
height: 25%;
}
.top-section div {
height: 45%;
background-color:#ffcc5c;
}
.top-section div:not(:last-child) {
margin-bottom:10%;
}
.bottom-section {
height: 30%;
background-color: #ff6f69;
margin-top: 12%;
}
.sticky-content {
width: 100%;
height: 60%;
position: sticky;
top: 0px;
}
<div id="header">Header</div>
<div id="content">
<div id="main" class="col"><p>Main Content</p></div>
<div id="ads" class="col">
<div class="sticky-content">
<div class="top-section">
<div></div>
<div></div>
</div>
<div class="bottom-section"></div>
</div>
</div>
</div>
<div id="footer">Footer</div>

CSS - Absolute and Relative Position with image fader

I'm working with an image fader program, but I'm not understanding absolute positioning. I have the images fading nicely and resizing the way I want if the screen resizes. but I have 2 problems. Div#2 gets covered up by the images. I want div2 to always appear below the image div. Also, I have control buttons on the images. I want them in the middle. I thought using top:50% would do that, but it's not. Here's an example...
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,5000);
function nextSlide(){goToSlide(currentSlide+1);}
function previousSlide(){goToSlide(currentSlide-1);}
function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = 'slide showing';}
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function(){nextSlide();};
previous.onclick = function(){previousSlide();};
#slides {position: relative}
.slide{
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:auto;
min-height:300px;
object-fit:cover;
opacity: 0;
box-sizing:border-box;
transition: opacity 2s;}
.showing{opacity: 1;}
.controls{
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer;
border: 1px solid #555;
width: 30px;
position: absolute;
}
.controls:hover{ opacity:.5}
.fadenext{right: 10px; top: 50%;}
.fadeprev{left: 10px; top: 50%;}
<br><br>
<div id="slides">
<img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing">
<img src='https://www.panotools.org/dersch/StBp.JPG' class="slide">
<button class="controls fadeprev" id="previous"><</button>
<button class="controls fadenext" id="next">></button>
</div>
<div style='margin-top:40px;border:1px solid red;width:200px;height:100px'>
This is Div # 2</div>
I've amended your snippet to fix your issues.
Adding margin-top instead of top will fix your issue with the
controls.
Div 2 will now always remain below your slider.
P.S. I moved your div2 inline styles to keep it neat.
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);
function nextSlide() {
goToSlide(currentSlide + 1);
}
function previousSlide() {
goToSlide(currentSlide - 1);
}
function goToSlide(n) {
slides[currentSlide].className = 'slide';
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].className = 'slide showing';
}
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function() {
nextSlide();
};
previous.onclick = function() {
previousSlide();
};
* {
margin: 0;
padding: 0;
}
#slides {
position: relative
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: auto;
min-height: 300px;
object-fit: cover;
opacity: 0;
box-sizing: border-box;
transition: opacity 2s;
}
.showing {
opacity: 1;
}
.controls {
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer;
border: 1px solid #555;
width: 30px;
position: absolute;
}
.controls:hover {
opacity: .5
}
.fadenext {
right: 10px;
margin-top: 25%;
}
.fadeprev {
left: 10px;
margin-top: 25%;
}
.div2 {
margin-top: 50%;
border: 1px solid red;
width: 200px;
height: 100px;
}
<br><br>
<div id="slides">
<img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing">
<img src='https://www.panotools.org/dersch/StBp.JPG' class="slide">
<button class="controls fadeprev" id="previous"><</button>
<button class="controls fadenext" id="next">></button>
</div>
<div class="div2">This is Div # 2</div>
It's not feasible to use % based positions when you use "top" style. So to achieve what you want to do, use margin-top instead. As shown below:
.fadenext{right: 10px; margin-top: 25%;}
.fadeprev{left: 10px; margin-top: 25%;}
And for your div2, just change it's style to:
margin-top: 50%

Changing position of absolute element without container overflow

Maybe an obvious question but how do I make an element with a absolute position not overflow its container when moving it's position right? I know I could change it to relative position or move it 99% but for my project that won't due. I tried using margins, padding, object-fit, all with no success. Thanks for any help
var green = document.getElementById('green');
function myFunct() {
green.style.right = '100%';
}
h1 {
position: relative;
width: 80%;
height: 100px;
margin: auto;
background-color: red;
}
#green {
position: absolute;
right: 0px;
height: 100px;
background-color: green;
width: 20px;
}
<h1>
<div id = 'green'></div>
</h1>
<button onclick="myFunct()">FindHighScore</button>
Use CSS calc()
var green = document.getElementById("green");
function myFunct() {
green.style.right = "calc(100% - 20px)";
}
Or, apply left: 0 and right: auto (reset)
var green = document.getElementById("green");
function myFunct() {
green.style.left = "0";
green.style.right = "auto";
}
A <div> should not be in a <h1> tag by the way.
You can set overflow to hidden at parent container.
<h1> permitted content is Phrasing content
var green = document.getElementById('green');
function myFunct() {
green.style.right = '100%';
}
div:not(#green) {
position: relative;
width: 80%;
height: 100px;
margin: auto;
background-color: red;
overflow: hidden;
}
#green {
position: absolute;
right: 0px;
height: 100px;
background-color: green;
width: 20px;
}
<div>
<div id='green'></div>
</div>
<button onclick="myFunct()">FindHighScore</button>

Div Moving position and z index

Hope someone can help me, I don't know where to look it up
I'm trying to do an onclick event that will change the position of 3 Divs.
The DIVS are placed like on a hoizontal circle, which means the one in the middle should be z-index: 1
left and right z-index: -1
onclick, the left should slide to the middle and change z-index
right go to the left and middle to the right.
How can I try to do that?
Started like this, but will not change position correctly.
jsFiddle
code snippet:
var i = 0;
while(i < (threeleft-50)){
var plus = (i)%2;
three.style.left = (threeleft-i)+'px';
two.style.left = (twoleft+plus)+'px';
one.style.left = (oneleft+plus)+'px';
i++;
}
Also still need a little of animation if there is a better way to do that, let me know
Thanks so far
One issue is that during the while the screen is not updated so you will only see the final position and not the animation. Then the plus = i%2 will always return 0 or 1. so that is what gets added to the two and one positions. (you most likely need var plus = i/2; there)
In general i would use CSS for positioning/animating (through transitions) the elements and just changes classes with JS. Much cleaner and more maintainable.
function goleft() {
var one = document.querySelector('.pos-one'),
two = document.querySelector('.pos-two'),
three = document.querySelector('.pos-three');
one.classList.remove('pos-one');
one.classList.add('pos-two');
two.classList.remove('pos-two');
two.classList.add('pos-three');
three.classList.remove('pos-three');
three.classList.add('pos-one');
}
function right() {
var one = document.querySelector('.pos-one'),
two = document.querySelector('.pos-two'),
three = document.querySelector('.pos-three');
one.classList.remove('pos-one');
one.classList.add('pos-three');
two.classList.remove('pos-two');
two.classList.add('pos-one');
three.classList.remove('pos-three');
three.classList.add('pos-two');
}
.wrapper {
position: relative;
width: 800px;
height: 400px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
.pic {
width: 300px;
height: 300px;
position: absolute;
border: 3px solid black;
transition: all 0.5s;
}
#one {
background-color: red;
}
#two {
background-color: blue;
}
#three {
background-color: green;
}
.pos-one {
z-index: 150;
top: 50px;
left: 250px;
}
.pos-two {
z-index: 50;
top: 40px;
left: 50px;
}
.pos-three {
z-index: 50;
top: 40px;
left: 450px;
}
#bot {
position: absolute;
bottom: 0px;
left: 360px;
}
<div class="wrapper">
<div class="pic pos-one" id="one">1</div>
<div class="pic pos-two" id="two">2</div>
<div class="pic pos-three" id="three">3</div>
<div id="bot">
<button onclick="goleft()">left</button>
<button onclick="right()">right</button>
</div>
</div>

Categories