I have a functional Javascript popup button. When the popup button is clicked however, the position of the page goes back to the top. This also happens when I press the close button. I believe it's because the popup container is set at a specific position. How do I make it so the page stays in the same position when the button is clicked and still displays the button?
HTML:
<div class="container">
<h1>Lorem Ipsum</h1>
<br>
<div class="box button">
Lorem Ipsum
</div>
<div class="popup">
<h2>Lorem Ipsum</h2>
<video src="video.mov"controls></video>
<p>
Insert Text Here
</p>
CLOSE
</div>
</div>
CSS:
.container
{
margin:2em 2em;
display:grid;
grid-template-columns: repeat(2,340px);
grid-gap: 55px;
}
.box
{
border: 3px solid;
display: flex;
align-items: center;
justify-content: center;
font-family: "Glacial Indifference", sans-serif;
font-size: 30px;
padding: 10px;
border-radius: 5px;
border-color: #FFFFFF;
height: 170px;
position: relative;
}
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 800px;
height: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 45%;
visibility: visible;
left: 50%;
}
JS:
//Popup
function open() {
document.querySelectorAll(".button a").forEach((a) => {
a.parentElement.nextElementSibling.classList.remove("active");
});
this.parentElement.nextElementSibling.classList.add("active");
//popup is sibling of a's parent element
document.querySelector('.body').classList.add('blurred');
}
function close() {
this.parentElement.classList.remove("active"); // .popup
document.querySelector('.body').classList.remove('blurred');
}
Use href="javascript:void(0);". It will prevent the page from scrolling.
<div class="container">
<h1>Lorem Ipsum</h1>
<br>
<div class="box button">
Lorem Ipsum
</div>
<div class="popup">
<h2>Lorem Ipsum</h2>
<video src="video.mov"controls></video>
<p>
Insert Text Here
</p>
CLOSE
</div>
</div>
Your problem is that you are using .
This will scroll to the top of the page, try use a <button type="button"> instead
Related
I have a div (with a relative position) which has two divs inside. One of those has absolute positioning and I've noticed that it goes out the div's parent margins.
I'd like to make the height of the div parent (and also of the other non-absolute positioned div) the same as the one of the absolute positioned div.
Basically I would like the container div and all of its divs inside to adapt their height on the highest height taken.
Can you help me understand how to make it?
.container {
width: 100vw;
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
background-color: blue;
}
.element {
width: 50%;
padding: 50px 150px 90px 50px;
box-sizing: border-box;
font-size: 30px;
position: relative;
font-family: 'helvetica','arial',sans-serif;
}
#element-1 {
background-color: beige;
}
#element-2 {
background-color: darkGreen;
color: white;
position: absolute;
right: 0;
}
<div class="container">
<div class="element" id="element-1">
<h1>Lorem Ipsum Dolor</h1>
</div>
<div class="element" id="element-2">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
</div>
How can I hide a <div> section with JS and
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug
</div>
</div>
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
</style>
So I am looking to include a button with:
<span id="a33"><button>×</button></span>
</div>
</div>
How can I get the <span> to hide the <div> tag?
Thanks,
Ring Games
Use onclick attribute;
More info: DOM onevent handlers
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug </p>
<span onclick="document.getElementsByClassName('alertB1')[0].style.display = 'none'" id="a33"><button>×</button></span>
</div>
</div>
function onToggle() {
const ele = document.querySelector(".toggle-div");
ele.classList.toggle("toggle");
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.button {
position: relative;
background-color: #4caf50;
border: none;
font-size: 28px;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.toggle-div.toggle {
visibility: hidden;
}
<body>
<button onclick="onToggle()" class="button">Click here to toggle</button>
<div class="toggle-div">
<h1>Toggle Div on click</h1>
</div>
</body>
I have a fixed div in a vuejs app that i intend to use as a chat box. The div scrolls it's content within itself. I try to scroll to bottom automatically once chat box is open but it never works.
I have tried to assign scrollHeight to scrollTop but scrollTop always returns 0 even after assignment.
I have also emitted an event to the parent component that contains the scrollBar of the chat window to try to scroll but the problem is the same. scrollTop never gets assigned.
let msg = document.querySelector(".messanger .messanger-body");
msg.scrollTop = msg.scrollHeight;
console.log(msg.scrollTop);
console.log(msg.scrollHeight);
My problem is msg.scrollTop never gets assigned what msg.scrollHeight is. It remains 0.
<div class="messanger">
<div class="messanger-header text-center">
<div class="row h-100">
<div class="col-sm-12 my-auto">
<h2 class="ml-2 text-white">Chat</h2>
<div class="float-left">
<base-button size="sm" class="ml-1" type="primary" #click="returnToPrev">←</base-button>
</div>
<div class="float-right">
<base-button size="sm" class="mr-1" type="primary">Send message</base-button>
</div>
</div>
</div>
</div>
<div class="messanger-body">
<div>
<!-- child component -->
<message-thread :user="msgThread.user" #scrolltobtm="scrollViewToBtm"></message-thread>
</div>
</div>
</div>
I have a CSS like so for the parent component
.messanger {
background: white;
position: fixed;
top: 0;
width: 310px;
height: 70vh;
float: right;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 20vh;
border-top-left-radius: 20px;
border: 2px solid red;
}
.messanger .messanger-header {
position: fixed;
height: 60px !important;
width: 310px !important;
background: #25457a;
color: #ffffff;
z-index: 99999;
border-top-left-radius: 20px;
}
.messanger .messanger-body {
margin-top: 65px;
}
For my child component i have
<div class="message-history mt-2">
<div class="message-history-content">
<div class="text-center mb-4">
<span class="badge badge-info">Thread title : {{threadTitle}}</span>
</div>
<div v-for="(eachMessage, index) in messages" :key="index">
<div :class="messagePosition(eachMessage.added_by)[0]">
<!-- classes msg_container and msg_container_send are dynamically added here -->
<span>{{eachMessage.message}}</span>
</div>
</div>
</div>
<div class="message-input">
<form class="form m-1" #submit.prevent="sendMessage">
<textarea v-model="model.message" class="form-control"></textarea>
<div>
<button class="ni ni-send"></button>
</div>
</form>
</div>
</div>
Child component css
.msg_container {
margin-top: auto;
margin-left: 20%;
margin-right: 10px;
border-radius: 15px;
background-color: #82ccdd;
padding: 10px;
position: relative;
}
.msg_container_send {
margin-top: auto;
margin-right: 20%;
margin-left: 10px;
border-radius: 15px;
background-color: #25457a;
padding: 10px;
position: relative;
color: #ffffff;
}
.message-input {
position: fixed;
bottom: calc(100% - 90%);
background: #ffffff;
z-index: 99999;
}
.message-history {
overflow-x: hidden;
overflow-y: scroll;
margin-bottom: 40px;
}
.message-history .message-history-content {
overflow: scroll;
}
form {
display: flex;
width: 300px;
}
form button.ni.ni-send {
margin-top: 3px;
border-radius: 50%;
border: none;
height: 34px;
width: 34px;
background: #25457a;
color: #ffffff;
}
textarea {
flex-grow: 1;
resize: none;
border: 1px solid #25457a;
}
form button:focus {
outline: 0;
}
Thank you for help in advance.
I added overflow property to the .message-history class, it still doesn't work. I believe my mistake resides in my styles. I'm not much of a CSS person.
The chat window scrolls when the mouse is used to scroll though.
msg.scrollTop could stay with 0 value because of at least two things.
First .messanger-body don't have defined overflow property.
Second as it is initial phase content of .messanger-body have not enough content to make scroll appear on the right side of div.
Please check those options.
I have a tabbed module, which for now has three tabs.
How it works: User clicks on a carousel_element and it displays carousel_hidden-text within that div to another div called carousel_quote.
I'm unsure on why:
The default content isn't already pre-loaded in carousel_quote. I.e. In the demo below, you can see the red box is empty. I want it to, by default, display the second carousel_element (lorum ipsum 2).
Again, by default, I want the border on the second carousel_element to show red (so it indicates this tab is active). To do this, I have jQuery('."carousel_element:nth-child(2)').addClass("carousel_selected"); but it doesn't seem to be doing anything? Of course, if any other tab is clicked, I want to remove carousel_selected from there and add it to the appropriate carousel_element.
Code:
jQuery(document).on('click', '.carousel_element', function() {
jQuery('.carousel_quote').html(jQuery(this).find('.carousel_hidden-text').html());
jQuery('."carousel_element:nth-child(2)').addClass("carousel_selected");
jQuery('.carousel_element').removeClass('carousel_selected');
jQuery(this).addClass('carousel_selected');
});
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
padding: 0;
margin-top: 0;
position: relative;
color: #002f33;
width: 100vw;
}
.carousel {
display: flex;
flex-direction: row;
}
.carousel_element {
border-bottom: solid 1px #999;
height: 6em;
width: 100%;
margin: 0 5px;
}
.carousel_element .carousel_hidden-text {
/* display: none; */
text-align: center;
}
.carousel_container .carousel_quote {
margin-left: auto;
margin-right: auto;
height: 10em;
width: 75%;
text-align: center;
margin-top: 1em;
border: 1px solid red;
}
.carousel_selected {
border-color: red!important;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container carousel_container">
<div class="wrapper">
<div class="carousel">
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 1 </p>
<p class="carousel_reference">Author1 </p>
</div>
</div>
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 2</p>
<p class="carousel_reference">Author 2</p>
</div>
</div>
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 3</p>
<p class="carousel_reference">Author 3</p>
</div>
</div>
</div>
<!-- .carousel end -->
<div class="carousel_quote"></div>
</div>
</div>
for on load add this function
$(document).ready(function () {
$('.carousel_element:nth-child(2)').addClass("carousel_selected");
$('.carousel_quote').html($('.carousel_element:nth-child(2)').find('.carousel_hidden-text').html());
});
try the below solution it will works
$(document).ready(function () {
$('.carousel_element:nth-child(2)').addClass("carousel_selected");
$('.carousel_quote').html($('.carousel_element:nth-child(2)').find('.carousel_hidden-text').html());
$('.carousel_element').click(function() {
$('.carousel_quote').html($(this).find('.carousel_hidden-text').html());
//$('.carousel_element').removeClass('carousel_selected');
$(this).addClass("carousel_selected").siblings().removeClass("carousel_selected");
});
});
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
padding: 0;
margin-top: 0;
position: relative;
color: #002f33;
width: 100vw;
}
.carousel {
display: flex;
flex-direction: row;
}
.carousel_element {
border-bottom: solid 1px #999;
height: 6em;
width: 100%;
margin: 0 5px;
}
.carousel_element .carousel_hidden-text {
/* display: none; */
text-align: center;
}
.carousel_container .carousel_quote {
margin-left: auto;
margin-right: auto;
height: 10em;
width: 75%;
text-align: center;
margin-top: 1em;
border: 1px solid red;
}
.carousel_selected {
border-color: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container carousel_container">
<div class="wrapper">
<div class="carousel">
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 1 </p>
<p class="carousel_reference">Author1 </p>
</div>
</div>
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 2</p>
<p class="carousel_reference">Author 2</p>
</div>
</div>
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 3</p>
<p class="carousel_reference">Author 3</p>
</div>
</div>
</div>
<!-- .carousel end -->
<div class="carousel_quote"></div>
</div>
</div>
I want to add a z-index of 1 on individual divs, buttons, and h1 that are underneath an overlay. I'm trying to make it similar to the chrome developer tools :hover feature. In Dev Tools, when you hover over an individual element, it highlights, however in my case, I'd like it to come above the overlay. In dev tools, you can highlight a child div without it's parent highlighting, and that's what I'm looking to do too.
I've tried messing with opacity, but when it has a nested div, the nested div gets double the opacity and I don't want that. Here's the codepen and the code...
http://codepen.io/jareko999/pen/wWGpwz
HTML
<div class="cover">
</div>
<h1 class="title">Here's your website</h1>
<div class="container">
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
</div>
CSS
body {
margin: 0;
width: 100%;
height: 100%;
}
.cover {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0,0,0,.4);
z-index: 1;
}
.title {
text-align: center;
width: 60%;
margin: 40px auto;
}
.container {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 300px;
height: 200px;
margin: 10px;
background: url("https://static.pexels.com/photos/38155/pexels-photo-38155.jpeg") center center no-repeat;
background-size: cover;
display: flex;
}
button {
-webkit-appearance: none;
border: none;
box-shadow: none;
background: #276cd6;
color: white;
font-weight: 600;
font-size: .8em;
padding: 16px 24px;
border-radius: 10px;
margin: auto;
}