Develop Reference

how to delete elements with click on window with javascript

I want (setting - content) to be closed every time the user clicks on any part of the window except setting - content.
but not work this code: (document.querySelector('body').addEventListener('click', function(e){....})and signals an error.
How can I do this correctly?
var icon = document.getElementsByClassName("setting--icon");
var panel = document.getElementsByClassName('setting--content');
for (var i = 0; i < icon.length; i++) {
icon[i].onclick = function(){
var setClasses = !this.classList.contains('active');
setClass(icon, 'active', 'remove');
setClass(panel, 'active', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("active");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
document.querySelector('body').addEventListener('click', function(e){
if (!(event.target == 'setting--content')) { panel.classList.remove('active');
this.nextElementSibling.classList.remove("active");
}
})
.setting--icon{
border: 1px solid red;
width:20px;
height:20px;
}
.setting--content {
position: fixed;
left: 50%;
top: -150%;
width: 50%;
height:20px;
margin: 0 auto;
text-align: center;
transition: 0.3s;
min-height: 300px;
padding: 2rem;
transform: translateX(-50%);
border:1px solid green;
}
.setting--content.active {
top: 20%;
}
<form >
<div class="setting--icon">1</div>
<div class="setting--content">
<input type="text" name="address" id="address" placeholder="search …">
</div>
</form>
<div>
<div class="setting--icon">2</div>
<div class="setting--content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo repellendus quos illo eaque vitae, nostrum id accusantium. Cum est fugiat animi molestiae dicta praesentium repellat ipsa iusto dolore perspiciatis? </p>
</div>
</div>

To check which element has clicked, you can use matches method on HTMLElement, in your body click handler you can use it like this:
event.target.matches('.setting--content');
In your snippet, you are toggling the .setting--content by clicking on .setting--icon, so you should check that target is not .setting--icon like this:
event.target.matches('.setting--icon');
in order to above checkings, you should also check that clicked item is not in the .setting--content, you can do it by storing the current active panel in a variable and by using of contains method, check that clicked item is part of the .setting--content or not. like this:
var icon = document.getElementsByClassName("setting--icon");
var panel = document.getElementsByClassName('setting--content');
var activePanel = null;
for (var i = 0; i < icon.length; i++) {
icon[i].onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(icon, 'active', 'remove');
setClass(panel, 'active', 'remove');
if (setClasses) {
this.classList.toggle("active");
activePanel = this.nextElementSibling;
activePanel.classList.toggle("active");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
document.querySelector('body').addEventListener('click', function(event) {
if (!event.target.matches('.setting--content') &&
!event.target.matches('.setting--icon') &&
activePanel && !activePanel.contains(event.target)) {
setClass(panel, 'active', 'remove');
setClass(icon, 'active', 'remove');
}
})
body {
min-height: 100vh;
}
.setting--icon {
border: 1px solid red;
width: 20px;
height: 20px;
}
.setting--content {
position: fixed;
left: 50%;
top: -200%;
width: 50%;
height: 20px;
margin: 0 auto;
text-align: center;
transition: 0.3s;
min-height: 300px;
padding: 2rem;
transform: translateX(-50%);
border: 1px solid green;
}
.setting--content.active {
top: 20%;
}
<form>
<div class="setting--icon">1</div>
<div class="setting--content">
<input type="text" name="address" id="address" placeholder="search …">
</div>
</form>
<div>
<div class="setting--icon">2</div>
<div class="setting--content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo repellendus quos illo eaque vitae, nostrum id accusantium. Cum est fugiat animi molestiae dicta praesentium repellat ipsa iusto dolore perspiciatis? </p>
</div>
</div>
BTW, since your .setting--content has fixed display, in below example I added style body{ min-height: 100vh; } in order to prevent body collapssed. and also I changed top property on .setting--content from -150% to -200% to run snippet correctly in preview mode.

jQuery Find Closest Element Inside div Based on mousemove Event

Google uses a feedback feature that highlights the background color of content elements (ex:p, div, ul, h2, etc.) when the user mouses over a div to the right side of the content.
I believe the following CSS class is applied to the element to highlight its background:
.inline-feedback__highlight {
background: #d2e3fc;
-webkit-border-radius: .3125rem;
border-radius: .3125rem;
}
Using jQuery or JavaScript and CSS, I'd like to achieve the same result.
My Question
How can I identify what the closest element in <div id="content">...</div> is?
I was thinking some form of x,y coordinates and offset from the top of the content div.
My Code
$(function() {
let halfBtnHt = Math.ceil($('#track-button-div').height() / 2);
$('#track-container').on('mousemove', function(e) {
// console.log(e.offsetX, e.offsetY);
$('#track-button').css({
'transform': `translateX(0) translateY(${e.offsetY - halfBtnHt}px)`,
'visibility': 'visible',
})
}).on('mouseout', function(e) {
$('#track-button').css({
'visibility': 'hidden'
})
})
})
#content-container {
position: relative;
border: 1px solid black;
width: 500px;
height: auto;
margin: 100px auto;
}
#content {
padding: 2rem;
}
#track-container {
position: absolute;
text-align: center;
top: 0;
bottom: 0;
width: 64px;
right: -56px;
z-index: 1;
}
#track-button {
width: 42px;
height: 42px;
border-radius: 30px;
pointer-events: none !important;
}
#track-button-div {
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content-container">
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, iusto? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dolores earum esse eveniet libero minima pariatur repellat sed sunt ut?</div>
<pre class="prettyprint linenums prettyprinted">
<ol class="linenums">
<li class="L0">Hey</li>
</ol>
</pre>
<p>Blanditiis corporis ducimus laudantium nisi pariatur quasi repellat sunt, ut? Consequuntur dolores earum</p>
</div>
<div id="track-container">
<div id="track-button-div">
<button id="track-button" class="btn btn-outline-primary">
<i class="fas fa-quote-right"></i>
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="track.js"></script>
</body>
</html>
Here's what Google's Feedback Feature Looks Like

Look at snippet below:
(function ($) {
'use strict';
$(function () {
var
namespace = 'mmdm',
//-----
mainElementID = '#__elements_container',
highlightClass = 'founded-element__highlight',
//-----
mainElement = $(mainElementID),
movableElementContainer = $('#__movable_element_container'),
movableElement = $('#__movable_element');
// some utility
function getTouch(event) {
var touch = event;
if (('ontouchstart' in document.documentElement) || navigator.maxTouchPoints > 0) {
touch = event.originalEvent.touches && event.originalEvent.touches.length ? event.originalEvent.touches[0] : event;
if (event.type === 'touchstart' || event.type === 'touchmove') {
touch = event.targetTouches[0] || event.changedTouches[0];
}
}
return touch;
}
// define function(s)
function removeHighlightClass() {
mainElement.find('*').removeClass(highlightClass);
}
function findElementsWithSameYNHighlightIt(e) {
var x, y, meOffset, el;
meOffset = mainElement.offset();
x = (e.pageX - meOffset.left) / 2;
y = e.pageY - $(window).scrollTop();
el = document.elementFromPoint(x, y);
if (!$(el).is(mainElement) && $(el).closest(mainElementID).length) {
$(el).addClass(highlightClass);
}
}
function showMovableElement() {
movableElement.addClass('show');
}
function hideMovableElement() {
movableElement.removeClass('show');
}
function moveMovableElement(e) {
var y, mecTop = movableElementContainer.offset().top;
y = e.pageY;
// bound move to the main movable container
if (y >= mecTop && y <= (mecTop + movableElementContainer.outerHeight())) {
movableElement.css({
'top': y - mecTop - (movableElement.outerHeight() / 2)
});
}
removeHighlightClass();
}
// attach event(s)
movableElementContainer
.on('mousemove.' + namespace + ' touchmove.' + namespace + ' mouseenter.' + namespace + ' touchstart.' + namespace, function (e) {
if (!e.defaultPrevented && e.cancelable) {
e.preventDefault();
}
//-----
var touch = getTouch(e);
showMovableElement();
moveMovableElement(touch);
findElementsWithSameYNHighlightIt(touch);
}).on('mouseleave.' + namespace + ' touchend.' + namespace, function (e) {
if (!e.defaultPrevented && e.cancelable) {
e.preventDefault();
}
//-----
hideMovableElement();
removeHighlightClass();
});
});
})(jQuery);
* {
box-sizing: border-box;
}
#__elements_main_container {
display: flex;
}
#__elements_container {
width: 500px;
}
#__movable_element_container {
position: relative;
width: 40px;
}
#__movable_element_container::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #ccc;
transform: translate(-50%);
z-index: 1;
}
#__movable_element {
position: absolute;
display: none;
align-items: center;
justify-content: center;
left: 50%;
width: 40px;
height: 40px;
text-align: center;
border-radius: 50rem;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
transform: translate(-50%);
z-index: 2;
}
#__movable_element.show {
display: flex;
}
.founded-element__highlight {
background-color: #cecdff;
border-radius: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="__elements_main_container">
<div id="__elements_container">
<h1>
A heading tag!
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
</ul>
</div>
<div id="__movable_element_container">
<i id="__movable_element" class="fa fa-quote-right"></i>
</div>
</div>

Please don't judge the code quality, I made it just for the sake of testing and making it do what you initially asked about selecting the closest element.
Check this sandbox with a working example
The key here is the usage of elementFromPoint function, the sandbox should just give a general idea and you can tailor it to your needs!

Popup for Mobile in HTML, CS, JS

I am expecting result: as I've implemented this codes for hover popup in website, as website is dynamic in nature. When I see the result in mobile version, same code is not working.
As I've used js for this, let me know any other way to tackle this situation.
Expected output is in image below:
Here's why I've tried.
jQuery(function($) {
var pop = $('.map-popup');
pop.click(function(e) {
e.stopPropagation();
});
$('a.marker').mouseenter(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).next('.map-popup').toggleClass('open');
$(this).parent().siblings().children('.map-popup').removeClass('open');
});
$(document).click(function() {
pop.removeClass('open');
});
pop.each(function() {
var w = $(window).outerWidth(),
edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
if( w < edge ) {
$(this).addClass('edge');
}
});
});
.markerstylea1{
overflow: auto;
height:170px;
width:350px; }
.map-popup {
position: absolute;
left: 58px;
width: auto;
transform: translateY(-50%);
padding: 5px 15px;
}
.map-popup:before {
content: "";
position: absolute;
top: 50%;
left: -16px;
margin-top: -16px;
width: 0;
height: 0;
border-style: solid;
border-width: 16px 16px 16px 0;
border-color: transparent #feb830 transparent transparent;
}
.map-popup .popup-title{
font-size: 20px!important;
}
.map-popup.edge {
left: auto;
right: calc(100% + 24px);
}
.map-popup.edge:before {
left: auto;
right: -16px;
border-width: 16px 0 16px 16px;
border-color: transparent transparent transparent #fff;
}
.marker::selection {
background: #feb82f;
color: #fff;
text-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="marker marker1 markerstyle1a" href="#marker1" >
<i class="fa fa-thumb-tack" aria-hidden="true"></i>
</a>
<aside id="marker1" class="map-popup markerstyle1" >
<h3 class="popup-title">xyz</h3>
<p><strong>xyz</strong><br>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia pariatur laudantium deserunt minima delectus illum dolor, nesciunt sit iure, debitis eligendi blanditiis, tempore quidem cupiditate quaerat incidunt sapiente aliquam? Debitis!</p>\
<a class="btn" href="#">Find Out More</a>
</aside>
</div>

Unfortunately a mobile device has no 'hover' status as you can only click (touch). There is simply no mouse to trigger a hover state. Another way would be to have the trigger to open the modal on something else for mobile devices, such as a timed trigger or a button.

How to make a hover effects like Wikipedia and Facebook

I am trying to make a hovercard effect using SVG and JavaScript such as Wikipedia and Facebook.
but how to fix the top triangle position when hovering on elements.
I need to fix the triangle position and the hovering action like Wikipedia or facebook.
(NOTE: I have some problem in my css and js link. I am a new programmer, I want to learn more), Sorry for that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wikipedia Hover Effects</title>
<style>
.content {
font-family: Segoe UI;
border: 1px solid #ddd;
padding: 30px;
box-sizing: border-box;
line-height: 27px;
}
.v-content-modal {
position: absolute;
background: #fff;
box-shadow: 0 3px 20px 0 #ddd;
width: 350px;
border-top: 3px solid #ddd;
display: none;
box-sizing: border-box;
}
.v-content-modal .modal-title {
background: #f5f5f5;
padding: 0 1.25rem;
font-size: .95rem;
letter-spacing: .03rem;
line-height: 38px;
height: 35px;
border-bottom: 1px solid #ddd;
}
.v-content-modal .modal-content {
padding: 1.75rem 1.25rem;
}
.v-content-modal::before {
content: "";
position: absolute;
top: -23px;
left: 30px;
border: 10px solid transparent;
border-color: transparent transparent #ddd transparent;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet One
adipisicing elit. Quisquam, modi neque! Cupiditate itaque vitae aliquid
Two,
pariatur qui sequi minima voluptates voluptatibus quae
nemo! Suscipit Three quibusdam
dignissimos vitae, cum cumque voluptates et hic doloribus dicta, <a href="#" data-title="Four"
data-content="I am the Forth one/" id="info">Four</a> quos,
nostrum in.
</div>
<div class="v-content-modal">
<div class="modal-title">
Title
</div>
<div class="modal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
let modal = $(".v-content-modal");
let title = $(".v-content-modal > .modal-title");
let content = $(".v-content-modal > .modal-content");
let btns = document.querySelectorAll("#info");
btns.forEach(btn => {
btn.addEventListener("mousemove", (e) => {
modal.css({
top: 'unset',
right: 'unset',
left: 'unset',
bottom: 'unset'
});
title.html(e.target.getAttribute('data-title'));
content.html(e.target.getAttribute('data-content'));
let pageX, pageY, winWidth, winHeight, elmWidth, elmHeight, width_limit, height_limit = '';
pageX = e.pageX;
pageY = e.pageY;
winWidth = $(window).width();
winHeight = $(window).height();
elmWidth = $(".v-content-modal").width();
elmHeight = $(".v-content-modal").height();
width_limit = winWidth - elmWidth;
height_limit = winHeight - elmHeight;
(pageX > width_limit) ? crossWidth(): normalWidth();
(pageY > height_limit) ? crossHeight(): normalHeight();
function crossWidth() {
modal.css({
right: '5px'
});
}
function normalWidth() {
modal.css({
left: pageX
});
}
function crossHeight() {
modal.css({
bottom: '111px'
});
}
function normalHeight() {
modal.css({
top: e.pageY + 30 + 'px'
});
}
// show when all customization is completed...
modal.show();
});
btn.addEventListener("mouseleave", () => {
modal.hide();
});
});
});
</script>
</body>
</html>
Again,
<div class="content">
Lorem text Mark Info will show here when you hover Dummy text You will show here when you hover on it
</div>
//Define one time only
<div class="modal" style="display: none">
<div class="modal-title"> </div>
<div class="modal-content"> </div>
</div>
when you hover on any <a> it will be show all the info by using the link addr "/wiki/mark" or "/wiki/you"
#we don't need to assign all info every time!

You can use the Bootstrap framework for such an effect. It is very easy!
You connect js and css Bootstrap files, connect the Poper.js (on the same page) and you can just copy the Bootstrap elements to your project and use it as you want.
You can see the element itself at this link. It is called a tooltips.

Scroll down change Text color not work?

My navbar have a title named LOGO ABCD,
I try to set when scrolling down change colour by adding and removing class,
but no idea why not work
LOGO ABCD
A
B
C
D
nav.navbar {
transition: 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top {
background-color: Black;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a {
color : white;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a:hover {
color : yellow;
}
$(window).scroll(function(evt){
if ($(window).scrollTop()>0)
$(".navbar").removeClass("navbar-top");
else
$(".navbar").addClass("navbar-top");
});
.PJ_title{color:grey;}
.PJ_color{color:red;}
$(window).scroll(function(evt){
if ($(window).scrollTop()>300)
$(".PJ_title").removeClass("PJ_color");
else
$(".PJ_title").addClass("PJ_color");
});

I test and "Test Title" has changed color successfully.
You can run lower snippet and scroll down and see change color. What's the problem?
$(window).scroll(function(evt){
if ($(window).scrollTop()>0)
$(".navbar").removeClass("navbar-top");
else
$(".navbar").addClass("navbar-top");
});
$(window).scroll(function(evt){
if ($(window).scrollTop()>300)
$(".PJ_title").removeClass("PJ_color");
else
$(".PJ_title").addClass("PJ_color");
});
nav.navbar {
transition: 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top {
background-color: Black;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a {
color : white;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a:hover {
color : yellow;
}
.PJ_title{color:grey;}
.PJ_color{color:red;}
.PJ_title{ position: fixed; }
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style='height: 1000px'>
<nav class='navbar navbar-default navbar-fixed-top navbar-top'>
<a>Test</a>
</nav>
<h1 class='PJ_title'>Test Title</h1>
</body>
</html>

Here's how you can do this. In the scroll function use, this.scrollY. Based on the value, add or remove classes as you see fit.
$(document).ready(function() {
$(window).scroll(function(evt) {
var scrollPos = this.scrollY;
if (scrollPos > 200) {
$(".navbar").removeClass("navbar-green");
$(".navbar").addClass("navbar-blue");
} else {
$(".navbar").addClass("navbar-green");
$(".navbar").removeClass("navbar-blue");
}
});
});
nav.navbar {
background-color: #ccc;
transition: all 0.5s ease-out;
}
nav.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.extra-long {
height: 200vw;
}
nav.navbar-green {
background-color: green;
}
nav.navbar-blue {
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="extra-long">
<nav class="navbar navbar-fixed-top">
<p>LOGO ABCD</p>
<p>A</p>
</nav>
</div>

Here's a version of your code cleaned up that works. You'll have to change the color as needed:
const w = $(window);
const header = $('#main-header');
w.on('scroll', function() {
if(w.scrollTop() > 0) {
header.addClass('header-secondary');
} else {
header.removeClass('header-secondary');
}
});
html {
height: 100%;
}
body {
margin: 0;
font-family: sans-serif;
height: 100%;
}
header {
width: 100%;
display: flex;
position: fixed;
align-items: center;
background-color: #ccc;
height: 50px;
transition: background-color ease .3s;
}
header nav {
margin-left: auto;
padding-right: 15px;
}
header nav a {
text-decoration: none;
}
#logo {
font-weight: 700;
padding-left: 15px;
}
.header-secondary {
background-color: darkblue;
color: #fff;
}
.header-secondary nav a {
color: #fff;
}
main {
padding: 65px 15px 0;
background-color: salmon;
height: 200%;
}
main p {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header">
<p id="logo">LOGO ABCD</p>
<nav>
item
item
item
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis adipisci totam odit natus voluptates ducimus impedit provident eum quia asperiores vitae neque ullam deserunt enim dolore minima, cum, perferendis et laborum. Magni, odit. Ducimus reiciendis illo assumenda dignissimos? Quidem eligendi molestiae atque mollitia, exercitationem officia. Debitis incidunt voluptas explicabo aliquam.</p>
</main>