Develop Reference

Javascript : Move to next element in a DIV using key

Is it possible to move to next element in my DIV wih E and return to previous element with A. I'm trying to make a menu and navigate within only with keys.
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn1");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
/* Mini menu CSS */
/* Style the buttons */
#myDIV{
margin-top:50px;
margin-left: 12px;
margin-right: px;
display:inline-flex;
}
#myDIV btn1{
top:3px;
}
#myDIV p{
top:4px;
/*margin-left: 10px;*/
letter-spacing: 1.8px;
}
.btn1 {
border: none;
outline: none;
padding: 3px 12px;
cursor: pointer;
font-size: 18px;
border-radius: 2rem;
transition: 0.2s;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
overflow: visible;
color: #000;
font-family: Proxima Nova;
font-weight: bold;
}
.active {
border-color: #366eaf;
border-width: 2px;
border-style: solid;
}
<div id="myDIV" style="display: inline-flex; margin-left: 15px; margin-right: 5px;">
<p class="btn1 active">ALL</p>
<p class="btn1">MENU1</p>
<p class="btn1">MENU2</p>
<p class="btn1">MENU3</p>
<p class="btn1">MENU4</p>
<p class="btn1">MENU5</p>
</div>

Semantically, you should be using an unordered list (<ul>) since you are actually making a list of menu items.
Next, it really isn't a "move" that you want, but a change of which element has the active class applied to it.
Your original JavaScript (while working) is more than you needed to be doing. See my reworked version with comments.
Lastly, you had some errors and some redundancy in your CSS.
See the comments inline for details.
// Listen for key strokes on the document
document.addEventListener("keydown", function(event){
// Get the currently active element
let activeElement = document.querySelector(".active");
// Check for "e" and if there is a previous sibling
if(event.key == "a" && activeElement.previousElementSibling){
// Make the previous sibling (if any) element active
deselectAll();
activeElement.previousElementSibling.classList.add("active");
} else if(event.key == "e" && activeElement.nextElementSibling){
// Make the next sibling element (if any) active
deselectAll();
activeElement.nextElementSibling.classList.add("active");
}
});
// Just set up one event handler on the parent of all the menu items
// Any click within that parent will bubble up and be handled here
document.getElementById("menu").addEventListener("click", function(event) {
// event.target is the actual element that triggered the event
if(event.target.classList.contains("btn1")){
deselectAll();
event.target.classList.add("active"); // Add active to the clicked item
}
});
// Don't use .getElementsByClassName() - - it's outdated
let items = document.querySelectorAll(".btn1");
function deselectAll(){
// Loop over all the menu items
items.forEach(function(item){
item.classList.remove("active"); // Remove the active class if its there
});
}
/* Mini menu CSS */
/* Style the buttons */
#menu{
margin-top:50px;
display: inline-flex;
margin-left: 15px;
margin-right: 5px;
list-style-type:none;
}
.btn1 {
top:3px;
letter-spacing: 1.8px;
border: none;
outline: none;
padding: 3px 12px;
cursor: pointer;
font-size: 18px;
border-radius: 2rem;
transition: 0.2s;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
overflow: visible;
color: #000;
font-family: Proxima Nova;
font-weight: bold;
/* Give non-active items an invisible 2px border
so that when they do become active the overall
size of the element doesn't shift around. */
border: 1px solid rgba(0,0,0,0);
}
.active {
border-color: #366eaf;
border-width: 2px;
border-style: solid;
}
<ul id="menu">
<li class="btn1 active">ALL</li>
<li class="btn1">MENU1</li>
<li class="btn1">MENU2</li>
<li class="btn1">MENU3</li>
<li class="btn1">MENU4</li>
<li class="btn1">MENU5</li>
</ul>

contextmenu on Safai/OSX getting closed by the click that opened it

I have a contextmenu over boxes e.g. for Copy/Cut/Paste that is working as expected with Chrome and IE on Windows, but on Safari (OSX) it is not. The contextmenu appears, but as soon as I let go of the mouseclicker (whether over the window or not) it is hidden and no click on its <li>s are caught.
I suspect that what is happening is the initial click (of the control-click?) of the contextmenu event is getting propagated to the $(document) and then closing it. Here are relevent parts of the code. Thanks for any help!
<select class="mySelectionsSelects"></select>
<select class="mySelectionsSelects"></select>
<ul id="custom-menu" style="top: 194px; left: 884px; display: none;">
<li id="customMenuCopy" data-action="copy">Copy</li>
<li id="customMenuCut" data-action="cut">Cut</li>
<li id="customMenuPaste" data-action="paste">Paste</li>
</ul>
event handling:
jQuery(document).ready(function ($) {
$('.mySelectionsSelects').on("contextmenu", function(event) {
event.preventDefault(); event.stopPropagation();
console.log('building context menu');
$("#custom-menu").css({"top": event.pageY + "px", "left": event.pageX + "px"});
$("#custom-menu").show();
console.log('added context menu at top: ' + event.pageY + '/left: ' + event.pageX);
});
// catch click anywhere else, to close it.
$(document).on("click", function(event) {
console.log('caught click on document, hiding custom-menu');
$("#custom-menu").hide();
});
$("#custom-menu li").on("click", function(event) {
event.preventDefault(); event.stopPropagation();
console.log('caught click in li');
// This is the triggered action name
switch($(this).attr("data-action")) {
case "copy": editButton.doCopy(); break;
case "cut": editButton.doCut(); break;
case "paste": editButton.doPaste(); break;
};
// Hide it AFTER the action was triggered
$("#custom-menu").hide(100);
});
});
css:
#custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: "Open Sans", sans-serif;
font-size: 10pt;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
#custom-menu li {
padding: 6px 9px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
#custom-menu li:hover {
background-color: #DEF;
}

Your suspicion is correct! Add this line at the beginning of your context menu-closing function:
if (event.ctrlKey) return;
Source: https://stackoverflow.com/a/27973894/7503963 (I didn't have the rep to just comment.)

How to show an element only on click on it and and hide it on click on other elements?

Description: I created two buttons and two more elements (div & section).
When I click on button 1, div element will appear with background-color HotPink and/if at this moment i re-click on button 1, div element will disappear.
I also wrote a function for button 2 so that when i click on button 2, section element will appear with background-colour DarkGreen and at this moment when i click on button 2 again, section element will disappear.
I should mention that if i click on white space of body ( (document).click(event) ), both div and section elements will disapear.
Question: What function should I write to show div element when I click on button 1 and then I hide hide it when I click on button 2 or any other elements on my web page???
Demo
NOTE: I duplicated this question because I'm not interested to use any method like:
$(".button1").click(function(event){
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
$(".section").css("display","none");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
$(".div").css("display","none");
}else{
$(".section").css("display","none");
}
});
It would be better if you do a favour and suggest a better method instead of duplicating a line of code with different class name under different events (functions).
My codes:
HTML:
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br><br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>
JQuery:
$(function(){
$(".button1").click(function(event){
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
}else{
$(".section").css("display","none");
}
});
$(document).click(function(){
$(".div").css("display","none");
$(".section").css("display","none");
});
});

The easiest way would be to start .click functions for both button 1 & 2 with:
.css("display","none");
function hidding the other element, like this:
$(".button1").click(function(event){
$(".section").css("display","none");
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
$(".div").css("display","none");
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
}else{
$(".section").css("display","none");
}
});

Solution without JQuery... But you can use it if you really want to.
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
$('.button1').addEventListener('click', ()=>{
toggle('div')
});
$('.button2').addEventListener('click', ()=>{
toggle('section')
});
function toggle(element){
if($('.show')){
Array.from($$('.show')).forEach((ele) => {
ele.classList.remove('show');
});
}
$(element).classList.add('show');
}
html, body {
background-color: #fafafa;
width: 100%;
height: 100%;
padding: 12px;
margin: 0;
}
.button1 {
background-color: pink;
position: relative;
display: inline-block;
padding: 8px;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.div {
background-color: hotpink;
display: none;
width: 160px;
height: 160px;
}
.button2 {
background-color: green;
position: relative;
display: inline-block;
padding: 8px;
color: white;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.section {
background-color: darkgreen;
display: none;
width: 160px;
height: 160px;
color: white;
}
.show {
display: block;
}
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br>
<br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>

This solution relies on event bubbling, so it might break if other handlers stop propagation.
Also note that it currently relies on provided html structure, but that can be tweaked easy enough.
$(document).click(function(e) {
$elem = $(e.target)
// If the element is visible we shouldn't open it again
needToggle = $elem.is('button') && !$elem.next().hasClass("open")
$(".open").removeClass("open") // Remove all open elements
if (needToggle) {
$elem.next().toggleClass("open")
}
})
html,
body {
background-color: #fafafa;
width: 100%;
height: 100%;
padding: 12px;
margin: 0;
}
.button1 {
background-color: pink;
position: relative;
display: inline-block;
padding: 8px;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.div {
background-color: hotpink;
display: none;
width: 160px;
height: 160px;
}
.button2 {
background-color: green;
position: relative;
display: inline-block;
padding: 8px;
color: white;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.section {
background-color: darkgreen;
display: none;
width: 160px;
height: 160px;
color: white;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br><br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>

HTML / Javascript - try to have page pointers as guidance

I am trying to get this small tutorial to show up the first few 5 seconds pointing to the menu bar on visiting the webpage. Anyone can tell me how I can do that with HTML CSS or Javascript?
I circled it with red of what I wanted on the image.
should I use an icon
how do I get it to point to specific point on the web page

One and easy solution is to create an overlay, which will cover the whole page. The purpose of the overlay will than catch the user click, and will destroy itself and also the tooltip.
To create the tooltip just specify the target element, for the tooltip should be created, the easiest way is to use css selector and jQuery.
With jQuery you can than find the target element on the page, get its position and size and according to that create the tooltip element as well.
Here is quick example (also as a fiddle https://jsfiddle.net/2c0q91np/):
$(function() {
// Find the target element on the page
var target = $(".menu li:nth-child(4n)");
var overlay = null;
var tooltip = null;
// Creates overlay which will handle the first click
function createOverlay() {
overlay = $("<div class='overlay'></div>").appendTo("body");
// When user clicks somewhere on the page the overlay will handle the click
overlay.one("click", destroyOverlay);
}
// Destroys the overlay and tooltip
function destroyOverlay() {
if(overlay) {
overlay.remove();
overlay = null;
}
if(tooltip) {
tooltip.remove();
tooltip = null;
}
}
// Creates tooltip for the target element
function createTooltip(text) {
// Get the position of the target
var pos = target.position();
// Get the height of the target
var height = target.outerHeight();
// Create the tooltip
tooltip = $("<div class='tooltip'></div>")
.html(text)
.appendTo("body")
.css({
"top": pos.top + height + "px",
"left": pos.left + "px"
});
}
createOverlay();
createTooltip("Click on one of the tabs to<br>quickly scroll through the page!");
// Desotroy tooltip automatically after 5 seconds
setTimeout(destroyOverlay, 5000);
});
body {
background: black;
font-family: Verdana;
font-size: 12px;
}
.menu {
border: 1px solid gray;
padding: 0;
margin: 0;
width: 100%;
display: flex;
}
.menu li {
list-style-type: none;
color: gray;
padding: 15px;
flex: 1;
text-align: center;
}
.menu li + li {
border-left: 1px solid gray;
}
.menu li a {
color: gray;
text-decoration: none;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.0001);
z-index: 999;
}
.tooltip {
position: absolute;
z-index: 1000;
margin: 10px;
color: #fff;
width: 180px;
height: auto;
background: red;
padding: 10px;
}
.tooltip:before {
content:"";
position: absolute;
left: 25%;
transform: translate(-50%,-26px);
width: 0;
height: 0;
border-style: solid;
border-width: 0 13px 26px 13px;
border-color: transparent transparent red transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>
Home
</li>
<li>
Product
</li>
<li>
Shop
</li>
<li>
About the brand
</li>
<li>
Join us
</li>
<li>
Contact
</li>
</ul>

Cannot display values when a link is clicked from with Jquery/Javascript Notification Popup

I downloaded this popup notification from http://www.encodedna.com/jquery/create-a-facebook-like-notifications-using-jquery-css.htm.
I want to use it to display value eg. (11) in a modal popup when a link is clicked.
When I Click the link on the body of the page it works fine and displays value 11. The problem is that when
I click the link from within the popup notification menu, it does not show any value. It seems that Document() functions for notification Popup is conflicting
with Document() function that helps to display data.
(NB: if you first click link on the body and then click on the link inside the notification popup it shows values)
I only want to display data by clicking the link from within the Notification Popup Menu. Thanks
Here is the Javascript for Menu Notification Popup
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#noti_Counter')
.css({ opacity: 0 })
.text('7') // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
.css({ top: '-10px' })
.animate({ top: '-2px', opacity: 1 }, 500);
$('#noti_Button').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#notifications').fadeToggle('fast', 'linear', function () {
if ($('#notifications').is(':hidden')) {
$('#noti_Button').css('background-color', '#2E467C');
}
else $('#noti_Button').css('background-color', '#FFF'); // CHANGE BACKGROUND COLOR OF THE BUTTON.
});
$('#noti_Counter').fadeOut('slow'); // HIDE THE COUNTER.
return false;
});
// HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#notifications').hide();
// CHECK IF NOTIFICATION COUNTER IS HIDDEN.
if ($('#noti_Counter').is(':hidden')) {
// CHANGE BACKGROUND COLOR OF THE BUTTON.
$('#noti_Button').css('background-color', '#2E467C');
}
});
$('#notifications').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
});
</script>
Here is the javascript that displays data in a modal when clicked
<script>
$(document).on("click", ".opendata", function () {
var myuserid1a = $(this).data('userid1a');
$(".modal-body_chat #b_userid1a").val( myuserid1a );
});
</script>
here is the entire code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
display:block;
background:#45619D;
list-style:none;
margin:0;
padding:12px 10px;
height:21px;
}
ul li {
float:left;
font:13px helvetica;
font-weight:bold;
margin:3px 0;
}
ul li a {
color:#black;
text-decoration:none;
padding:6px 15px;
cursor:pointer;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#noti_Button {
width:202px;
height:22px;
line-height:22px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background:#FFF;
margin:-3px 10px 0 10px;
cursor:pointer;
}
/* THE POPULAR RED NOTIFICATIONS COUNTER. */
#noti_Counter {
display:block;
position:absolute;
background:#E1141E;
color:#FFF;
font-size:12px;
font-weight:normal;
padding:1px 3px;
margin:-8px 0 0 25px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
z-index:1;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#notifications {
display:none;
width:430px;
position:absolute;
top:30px;
left:0;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 0;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #FFF;
margin-top:-20px;
margin-left:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).on("click", ".opendata", function () {
var myuserid1a = $(this).data('userid1a');
$(".modal-body_chat #b_userid1a").val( myuserid1a );
});
</script>
<br><br>
<div>
<ul>
<li id="noti_Container">
<div id="noti_Counter"></div> <!--SHOW NOTIFICATIONS COUNT.-->
<!--A CIRCLE LIKE BUTTON TO DISPLAY NOTIFICATION DROPDOWN.-->
<div style="color:white:" id="noti_Button">Click from notification menu</div>
<!--THE NOTIFICAIONS DROPDOWN BOX.-->
<div id="notifications">
<h3>Notifications</h3>
<br><br>
click to Display Value Now
<div style="height:300px;"></div>
<div class="seeAll">See All</div>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#noti_Counter')
.css({ opacity: 0 })
.text('7') // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
.css({ top: '-10px' })
.animate({ top: '-2px', opacity: 1 }, 500);
$('#noti_Button').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#notifications').fadeToggle('fast', 'linear', function () {
if ($('#notifications').is(':hidden')) {
$('#noti_Button').css('background-color', '#2E467C');
}
else $('#noti_Button').css('background-color', '#FFF'); // CHANGE BACKGROUND COLOR OF THE BUTTON.
});
$('#noti_Counter').fadeOut('slow'); // HIDE THE COUNTER.
return false;
});
// HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#notifications').hide();
// CHECK IF NOTIFICATION COUNTER IS HIDDEN.
if ($('#noti_Counter').is(':hidden')) {
// CHANGE BACKGROUND COLOR OF THE BUTTON.
$('#noti_Button').css('background-color', '#2E467C');
}
});
$('#notifications').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
});
</script>
<br><br>
click to Display from the body
<!-- The Modal chat menu starts-->
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal_chat {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content_chat {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close_chat {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_chat:hover,
.close_chat:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header_chat {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
height:10%;
}
.modal-body_chat {
padding: 2px 16px;
max-height: calc(100% - 25%);
overflow: auto;
}
//.modal-body {padding: 2px 16px;}
.modal-footer_chat {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
postion:fixed;
height:15%;
}
</style>
<div id="myModal_chat" class="modal_chat">
<!-- Modal content -->
<div class="modal-content_chat">
<div class="modal-header_chat">
<span class="close_chat">×</span>
</div>
<div class="modal-body_chat">
<input type="text" name='b_userid1a' id='b_userid1a' >
</div>
<div style="" class="modal-footer_chat">
info
</div>
</div>
</div>
<script>
var modal_chat = document.getElementById('myModal_chat');
var span = document.getElementsByClassName("close_chat")[0];
var btns = document.getElementsByClassName("myBtn_chat");
for (var i = 0; i < btns.length; i++)
btns[i].onclick = function() {
modal_chat.style.display = "block";
}
span.onclick = function() {
modal_chat.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal_chat) {
modal_chat.style.display = "none";
}
}
</script>
<!-- The Modal chat menu ends-->
</body>
</html>

The problem lies in the code below
$('#notifications').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
According to the author of the script, the above function says Do nothing when the container is clicked. To this effect when the link is clicked, it does not display any data. thus removing the above script solved my problem. Thanks