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>

change color of current page angularjs

Does AngularJS help in any way with setting an active class on the link for the current page?
I imagine there is some magical way in angularjs or css this is done, but I can't seem to find.
My menu looks like:
<ul>
<li ><a href="#/person" ng-click = "person()" id="bl" >Person</a></li>
<li><a href="#/product" ng-click = "product()" id="or" >Product</a></li>
<li ><a href="#/place" ng-click = "place()" id="gr" >Place</a></li>
</ul><br/><br/>
my css looks like:
body {
font-family: Source Sans Pro;
}
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a{
float: left;
width: 6em;
text-decoration: none;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
#navbar li a.current {
background-color: #FFF;}
li {
display: inline;
}
#bl {
background-color:#5a5a5a;
color: yellow;
}
#or {
background-color:#5a5a5a;
color: yellow;
}
#gr {
background-color : #5a5a5a;
color: yellow;
}
#bl:hover ,#or:hover , #gr:hover {
background-color:#ff6900;
}
#persons{
float:left;
}
.left{
float:left;
}

Looks like you have functions person(), product(). Set background-color by using getElementsByName('body').style.backgroundColor = 'red'; and respective colors in respective functions.

You could use https://docs.angularjs.org/api/ngRoute/service/$route service to get/detect the current route and set some class in your li or a tag then use css to style them based on the class you set.

Disappearing drop down menu

I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}

Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.

You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>

With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>

jQuery idTabs - Auto Change and Fade With Mouseover

I'm using jQuery idTabs in an upcoming redesign for my website. I've styled it to my content and it looks great, but there are a couple of functions which are missing what I require.
First, here's what I'm using right now:
<script type="text/javascript">
$("#featured").idTabs("!mouseover");
</script>
Obviously, the code above means that it changes to the next tab when hovered, making clicking unnecessary.
Here's what I want to do:
1 - Have the tabs automatically changed every specified number of seconds when the user is not interacting with them.
2 - When they change, have them fade. There is actually already a function for this in idTabs:
<script type="text/javascript">
$("#adv2").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
</script>
The only problem is that it doesn't work well with the mouseover event. Rather than fading-in on each mouseover, it simply changes automatically.
Can anyone help me out with this?
It'd be greatly appreciated! Thanks!

Here i have done complete bins for changing tab automatically on some time interval without mouse over or click. please check demo link once.
Demo: http://codebins.com/bin/4ldqp7r/2
HTML
<div>
<div id="adv2">
<ul>
<li>
<a class="selected" href="#ani1">
1
</a>
</li>
<li>
<a href="#ani2">
2
</a>
</li>
<li class="split">
</li>
<li>
<a href="#ani3">
3
</a>
</li>
<li>
<a href="#ani4">
4
</a>
</li>
</ul>
<span>
<p id="ani1">
Click on the tabs to see a nice fade.
</p>
<p id="ani2">
You're not impressed?
</p>
<p id="ani3">
But it's so cool... in a nerdy way.
</p>
<p id="ani4">
Download idTabs and have your cake. You can eat it too.
</p>
</span>
</div>
</div>
jQuery
$(function() {
var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
var current = $("#adv2 ul a.selected").attr("href");
var index = ($.inArray(current, tabList) + 1) % tabList.length;
tabClick(tabList[index], tabList, tabDiv);
}
var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
if (!tabList) {
tabList = list;
}
if (action && action.event == "click") {
timer && clearInterval(timer);
timer = setInterval(rotate, interval);
}
$("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
for (i in list) {
$(list[i]).hide();
}
$(id).fadeIn();
return false;
}
$("#adv2").idTabs(tabClick);
});
** CSS:**
body{
font: 10pt Calibri,Arial,sans-serif;
text-align: center;
color: #FFFFFF;
background: none repeat scroll 0 0 #111111;
margin: 0;
padding: 0;
}
#adv2 {
background: none repeat scroll 0 0 #181818;
margin-left:5%;
margin-top:5%;
width: 500px;
}
#adv2 ul{
display: block;
float: left;
height: 50px;
width: 50px;
margin:0px;
background:#333;
}
#adv2 li {
float: left;
}
li {
list-style: none outside none;
}
#adv2 li a.selected {
background: none repeat scroll 0 0 snow;
color: #111111;
font-weight: bold;
}
#adv2 li a {
display: block;
height: 25px;
line-height: 22px;
text-decoration: none;
width: 25px;
}
#adv2 li a:hover {
background:#0A0A0A;
}
#adv2 li.split {
clear: both;
}
a{
color: #FFFFFF;
}
a {
outline: medium none;
}
#adv2 span {
background: none repeat scroll 0 0 #181818;
float: right;
height: 50px;
line-height: 45px;
width: 410px;
}
Demo: http://codebins.com/bin/4ldqp7r/2

A way to keep a link bold once selected (not the same as a:visited)

I am creating a 'FAQ' page which has a list of questions at the top (links) and the answers appear below.
As each question is clicked the corresponding answer is shown (using show/hide divs). My questions is: Is there a way to make the clicked question/link bold? and for it to stay bold until another question is clicked, in which case the newly clicked question will be bold and the previously clicked question will go back to normal.
I have tried using a:active in the CSS but although this makes the text bold on clicking, as soon as you let go of the mouse it goes back to normal.
This is my CSS
div#newboxes1, div#newboxes2, div#newboxes3
{
border: 1px solid black;
background-color: #CCCCCC;
display: none;
padding: 5px;
width: 659px;
}
div#newboxes1 {
display:block;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ol#toc li {
float: left;
}
ol#toc li a img
{
border: none;
}
ol#toc a {
color: #676767;
float: left;
line-height: 2em;
text-decoration: none;
}
ol#toc li.current {
background-color: #e5e5e4;
background-position: 0 -60px;
}
ol#toc li.current a {
color: #676767;
}
ol#toc li.current a:hover {
color: #fff;
font-weight: bold;
}
div.content {
background: #e6e5e4;
padding: 20px;
width: 669px;
margin: 0px;
}
div.content a
{
color: #000000;
text-decoration: underline;
}
div.content a:active
{
font-weight: bold;
}
div.content a:visited
{
font-weight: bold;
}
This is my HTML
<ol id="toc"><li class="current"><img src="delivery_0.jpg" alt="Delivery" /></li>
<li><img src="returns.jpg" /></li>
<li><img src="contact.jpg" /></li>
<li><img src="shopping.jpg" /></li></ol>
<div class="content">
<p><a name="newboxes" href="javascript:showonlyone('newboxes1');" >Where is my order? </a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes2');" >UK Standard Delivery</a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes3');" >UK Next Day Delivery</a></p>
<div name="newboxes" id="newboxes1">
<p>Where is my order answer</p>
</div>
<div name="newboxes" id="newboxes2">
<p>UK Standard Delivery answer</p>
</div>
Javascript function is called when each link is clicked, this shows/hides the relevant divs which are currently on top of each other.
javascript is below
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
Thanks for your help :)
Theresa

You have to add this style to your css file:
ol#toc li.current a:active {
font-weight: bold;
}

Yes, just amend your Javascript to add or remove a class. Define that class as having text-weight bold or normal.

CSS selector :active will do it. Usage same as with :hover.

using jquery something like this may work. you can substitute ".css" for ".addClass('class')" and ".removeClass('class')" in the relevant places.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').css('font-weight','normal');
$(this).css('font-weight','bold');
});
});
// or:
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').removeClass('active');
$(this).addClass('active')
});
});
</script>
should note - where "active" is your css class to style the LI. and ol#foo is your OL.