Develop Reference

Show element if another element is outside screen (JS)

If element1 is outside visible area, element2 should be visible. If element1 is inside visible area, element2 should be hidden. (I would like not to use jQuery if possible) This I have so far.
function check(){
var div1 = document.getElementById("element1");
var div2 = document.getElementById("element2");
if(div1.top > (window.top + viewport.height )) {
div2.style.display = "none";
}
else {
div2.style.display = "block";
}
}
With this I get the error 'viewport is not defined'. I know it has to be defined but dont really know how to.

You should attach the function to the scroll event on what element is scrolling and checking that scroll position with the end (as bottom position) of your element1 to check.
This is an example:
function check(){
var div1 = document.getElementById("element1");
var div2 = document.getElementById("element2");
if(document.documentElement.scrollTop > (div1.clientTop + div1.clientHeight )) {
div2.style.display = "block";
}
else {
div2.style.display = "none";
}
}
window.onscroll=check;
body{
height: 200vh;
position: relative;
}
#element1{
border: 1px solid green;
width: 200px;
height: 50px;
}
#element2{
border: 1px solid red;
width: 200px;
height: 50px;
position: fixed;
display: none; /*initial display state*/
top: 50vh;
right: 0;
background-color: salmon;
}
<div id="element1"></div>
<div id="element2"></div>
Also, you can check for the Intersection Observer API which is used sometimes for lazy loading images.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

If you don't plan on supporting really old browsers (like IE11 and below), you can actually use the Intersection Observer API to achieve what you're doing. The advantage is that the API actually contains configurable logic that can further fine tune at what threshold you want to toggle display state of the target element.
In fact, almost 74% of global browser traffic actually supports Intersection Observer. With the notable exception of Safari. Fret not, there is a polyfill available if you need it.
Here is an example:
function callback(entries) {
entries.forEach(function(entry) {
var elementToToggle = document.getElementById('element2');
elementToToggle.style.display = entry.isIntersecting ? 'none' : 'block';
});
}
var observer = new IntersectionObserver(callback);
observer.observe(document.getElementById('element1'));
body {
min-height: 200vh;
position: relative;
}
.element {
width: 50%;
height: 50px;
border: 1px solid rgba(0,0,0,.25);
}
#element1 {
background-color: steelblue;
position: absolute;
top: 100px;
}
#element2 {
background-color: rebeccapurple;
position: fixed;
top: 25;
right: 0;
}
<div class="element" id="element1"></div>
<div class="element" id="element2"></div>

Close div with click outside (parent) [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 4 years ago.
This is not a new problem on stackoverflow, but I've tried everything without success.
I have a "popup" created with two divs. The parent ist the background and the child is the popup content. I want to hide the popup when the user clicks on the background (the parent).
It sounds extremly easy also for me but I can't achieve that.
This is my code and what I tried (it works exacly at the opposite way as I want):
let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');
button.onclick = () => {
popup.style.display = 'block';
content.onclick = e => {
if(e.target !== this) {
popup.style.display = 'none';
}
}
}
.popup {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
display: none;
}
.popup-content {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
min-width: 470px;
border-radius: 4px;
}
<button>
Open Popup
</button>
<div class="popup">
<div class="popup-content">
<h3>Popup Title</h3>
<p>Popup Text</p>
</div>
</div>
Can somebody help me?

You should separate both events and attach the click to the window so you can detect the clicks outside of popup-content like :
let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');
button.onclick = () => {
popup.style.display = 'block';
}
window.onclick = e => {
if (e.target === popup) {
popup.style.display = 'none';
}
}
.popup {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
.popup-content {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
min-width: 470px;
border-radius: 4px;
}
<button>
Open Popup
</button>
<div class="popup">
<div class="popup-content">
<h3>Popup Title</h3>
<p>Popup Text</p>
</div>
</div>

you can try something like this :
instead of adding the EventListner to close the div on the button you need to add it on the document instead. and test on target if is not your button just like this :
let popup = document.querySelector('.popup');
let button = document.querySelector('button');
// Event that hide the popin if the click happen out popin
function closeHandler(e) {
if (e.target !== popup) {
// We remove the event for better perfermance
removeCloseListner();
// We hide the popin
popup.style.display = 'none';
}
}
// Call this function when you open your popin popin
function addCloseLitnerToDocument() {
document.addEventListener("click", closeHandler);
}
function removeCloseListner() {
document.removeEventListener("click", closeHandler)
}
// Add listner to Open Popin
button.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
// when popin is open
// Add listner to the document
// And show the popin
popup.style.display = 'block';
addCloseLitnerToDocument();
}

How to induce some function when onmouseleave and also click the left mouse button?

I have got code like below:
Now I would like to add functionality that increase the counter not only when I leave the box/square, BUT ALSO click the left mouse button outside the box/square. So the counter will be increasing only when the mouse leave the box/square and also click outside of the box/square.
var counter = 0;
function myLeaveFunction() {
document.getElementById("demo").innerHTML = counter += 1;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
<div onmouseleave="myLeaveFunction()">
<p>onmouseleave: <br> <span id="demo">Mouse over and leave me AND CLICK OUTSIDE THE BOX!</span></p>
</div>

Add a boolean to check if mouse had left the div and bind a click handler to the document:
var counter = 0;
var mouseLeft = false;
function myLeaveFunction() {
document.getElementById("demo").innerHTML = counter+=1;
mouseLeft = true;
}
function clickBody() {
if (mouseLeft == true)
document.getElementById("demo").innerHTML = counter+=1;
mouseLeft = false;
}
document.onclick = clickBody;

This example will add an event listener to the body when the mouse leaves the box and will increase the counter when a click event occurs. The new event listener is then removed:
var counter = 0;
function myLeaveFunction() {
document.body.addEventListener("click", myClickHandler);
function myClickHandler() {
document.getElementById("demo").innerHTML = counter += 1;
document.body.removeEventListener("click", myClickHandler);
}
}
body {
margin: 0;
height: 100vh;
width: 100%;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
<body>
<div onmouseleave="myLeaveFunction()" onclick="event.stopPropagation()">
<p>onmouseleave: <br> <span id="demo">Mouse over and leave me AND CLICK OUTSIDE THE BOX!</span></p>
</div>
</body>
JSFiddle if this doesn't work

Like this?
Once you left the box AND you click outside of it. The counter will be increased.
var showPopup = function (id) {
document.getElementById(id).style.display = "block";
}
var hidePopup = function (id) {
document.getElementById(id).style.display = "none";
}
// Button Click
document.getElementById('myButton').onclick = (ev) => {
showPopup('myPopup');
ev.stopPropagation(); // prevent immediate close (because button is "outside" too)
}
// Click outside to close popup
document.getElementsByTagName('body')[0].onclick = (ev) => {
let popup = document.getElementById('myPopup');
if( ev.path.indexOf(popup) == -1 ) { hidePopup('myPopup') }
};
hidePopup('myPopup');
body {
width: 100vw;
height: 100vh;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 30px;
text-align: center;
background-color: lightgray;
position: absolute;
margin: 10px;
display: none;
}
<div id='myPopup'>
<p>onmouseleave: <br> <span id="demo">Mouse over and leave me AND CLICK OUTSIDE THE BOX!</span></p>
</div>
<button id='myButton'>Show!</button>
Take a look
This may be helful too Bootstrap Modal

2 buttons with same CSS and JS are not working.

See this fiddle. This is my watch trailer button, the first button is working perfectly fine. But the second watch trailer button is not working.
What is the problem with it?
Here is my code:
HTML:
<button id="watchbutton">Watch Trailer &#9658</button>
<br>
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-
src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
top:0%;
overflow: auto; /* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
Javascript
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
function playVideo() {
var video = document.getElementById('video');
var src = video.dataset.src;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
playVideo();
}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>

you can not have same ids. change id to something else.
<button id="watchbutton">Watch Trailer &#9658</button>
<br>
<button id="watchbutton2">Watch Trailer &#9658</button>

Try with classname instead of id .Because id is unique for whole html .For selector use with querySelectorAll()
Updated
declare src of the video in the data-src of button .Then pass the argument with playvideo(this.dataset.src) function .
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.watchbutton')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbw">Watch Trailer &#9658</button>
<br>
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbr">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>

You're almost there.
After you fix the issue with the double ids - mentioned by Frits, prasad & others - you still need to tell playVideo to play a different video, depending on which button you push.
Here's how you can fix your code to achieve the desired result :
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn1 = document.getElementById("TDwJDRbSYbw");
var btn2 = document.getElementById("6H_0aem12_I");
function playVideo(id) {
var video = document.getElementById('video');
var src = video.dataset.src + id;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn1.onclick = function(e) {
modal.style.display = "block";
playVideo(this.id);
}
btn2.onclick = btn1.onclick;
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
.btn {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
.btn:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button class="btn" id="TDwJDRbSYbw">Watch Trailer &#9658</button>
<br>
<button class="btn" id="6H_0aem12_I">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>
See also this JSFiddle demo

First, It is not good practice to use identical ids.
<button id="watchbutton">Watch Trailer &#9658</button>
And when you use
var btn = document.getElementById("watchbutton");
You get only one button (the first), You should use something like:
<button id="watchbutton" class="watchButton">Watch Trailer &#9658</button>
<br>
<button id="watchbutton2" class="watchButton" >Watch Trailer &#9658</button>
And get them with:
var buttons = document.getElementsByClassName("watchButton");

Div changes after mouseover, Div not displaying

Well, i'm starting to write this webpage and i've run into a few problems that i just cannot quite find the answers to.
The basic idea of the code I have is:
Open menu when the mouse is on "explore webpage"
Menu "links" highlight on mouseover
When user clicks on menu item, the menu moves to the top of the page and the "link" stays highlighted until the user clicks a different link.
When the menu moves to the top, a div opens below, displaying the content for that section.
I am having two main problems. Firstly, whenever I click on the menu item, it does not stay highlighted (number 3). Secondly, the div is not opening below the menu after the click(number 4). I would greatly appreciate any insight into these issues.
I am including all of my code, as I believe it is all relevant to my problems.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: #000000;
}
#container
{
z-index: -1;
background: #000000;
width: 900px;
height: 900px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
}
#explore
{
z-index: 1;
background: #000000;
width: 300px;
height: 150px;
position: absolute;
top: 41.666%;
left: 33.333%;
opacity: 1;
}
#explore-text
{
z-index: 1;
color: #eb56bd;
font-size: 50px;
font-family: sans-serif;
font-weight: bold;
text-align: center;
position: absolute;
top: 5px;
left: 0%;
opacity: 1;
}
.title
{
z-index: 2;
width: 300px;
height: 150px;
text-align: center;
font-size: 60px;
font-family: sans-serif;
font-weight: bold;
color: #000000;
display: none;
}
#news
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 33.333%;
}
#about
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 0%;
}
#events
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 66.666%;
}
.content
{
z-index: 0;
background: #b0408d;
width: 900px;
position: absolute;
top: 21.666%;
left: 0px;
height : 900;
}
#news-content
{
display: none;
}
#about-content
{
display: none;
}
#events-content
{
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="explore" onmouseover="overExplore()" onmouseout="outExplore()">
<div id="explore-text">Explore Webpage</div>
</div>
<div id="news" class="title" onmouseover="overTitle(news)" onmouseout="outTitle(news)" onclick="titleClick(news)">news</div>
<div id="about" class="title" onmouseover="overTitle(about)" onmouseout="outTitle(about)" onclick="titleClick(about)">about</div>
<div id="events" class="title" onmouseover="overTitle(events)" onmouseout="outTitle(events)" onclick="titleClick(events)">events</div>
<div id="news-content" class="content">
</div>
<div id="about-content" class="content">
</div>
<div id="events-content" class="content">
</div>
</div>
<script>
var titleClicked = false;
var isClicked;
var newsContent = document.getElementById('news-content');
var aboutContent = document.getElementById('about-content');
var eventsContent = document.getElementById('events-content');
var title = document.getElementsByTagName('title');
var news = document.getElementById('news');
var about = document.getElementById('about');
var events = document.getElementById('events');
var explore = document.getElementById('explore');
var exploreText = document.getElementById('explore-text');
function overExplore() {
explore.style.width="900px";
explore.style.left="0%";
explore.style.background="#eb56bd";
explore.style.cursor="pointer";
explore.style.cursor="hand";
explore.style.opacity="0";
news.style.display="block";
about.style.display="block";
events.style.display="block";
}
function outExplore() {
explore.style.width="300px";
explore.style.left="33.333%";
explore.style.background="#000000";
exploreText.style.left="0%";
exploreText.style.top="5px";
explore.style.opacity="1";
news.style.display="none";
about.style.display="none";
events.style.display="none";
}
function overTitle(div) {
if (div!= isClicked) {
div.style.background="#b0408d";
}
if (titleClicked == false) {
div.style.display="block";
news.style.display="block";
about.style.display="block";
events.style.display="block";
}
explore.style.cursor="pointer";
explore.style.cursor="hand";
}
function outTitle(div) {
if (div!= isClicked) {
div.style.background="#eb56bd";
}
if (titleClicked == false) {
div.style.display="none";
news.style.display="none";
about.style.display="none";
events.style.display="none";
}
}
function titleClick(div) {
div.style.background="#b0408d";
var isClicked = div;
if (div == news)
{
about.style.background="#eb56bd";
events.style.background="#eb56bd";
newsContent.style.display="block";
aboutContent.style.display="none";
eventsContent.style.display="none";
}
else if (div == about)
{
news.style.background="#eb56bd";
events.style.background="#eb56bd";
newsContent.style.display="none";
aboutContent.style.display="block";
eventsContent.style.display="none";
}
else
{
news.style.background="#eb56bd";
about.style.background="#eb56bd";
newsContent.style.display="none";
aboutContent.style.display="none";
eventsContent.style.display="block";
}
explore.style.top="5%";
news.style.top="5%";
about.style.top="5%";
events.style.top="5%";
titleClicked=true;
}
</script>
</body>
</html>
Thanks so much for your help.
A secondary issue: how do I prevent the cursor from changing from the pointer when directed at the text in my menu?
Thank again!

I've never managed to get the pseudo-classes (like :hover) to behave the way you want. If you can use jQuery, you can add a click function to the menu class:
$('.title').click(function() {
$('.title').css({'background':'#eb56bd'});
$(this).css({'background':'#b0408d'});
});
First you set all backgrounds to the non-clicked color, then apply the highlight color to the clicked item. This ensure a previously clicked item has the highlight removed when you click on another item.
JSFiddle

You should use css classes to style your menu links:
.selected{background:rgb(176, 64, 141);}
When a menu link is clicked, then you apply the selected class to the that menu link
function titleClick(div) {
//div.style.background="#b0408d";
div.className='selected';
var isClicked = div;
Following that you'll need to clear the 'selected' class from the other menu links so that they are no longer selected, example:
about.className="";
events.className="";
Instead of using mouseover and mouse out to style your menu links, use css :hover instead:
#news:hover{
background:"#eb56bd";
}
As for the div not showing, I'm guessing it's because the divs are empty. I've filled it up with some random text and it does show.