We Keep Coding

Close menu by clicking outside it

I have created a mobile menu that opens on clicking the hamburger button. At present I can only close the menu by clicking the hamburger button. What do I need to add to be able to close the menu by clicking elsewhere on the page?
Code below.
Apologies for the basic question! Thanks in advance for any help.
Jordan
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
<div class="topnav">
<strong>NELSON TRAILS</strong>
<div id="myLinks">
<a class="sub">SHORT WALKS</a>
<a class="sub">DAY TRIPS</a>
<a class="sub">MULTI-DAY</a>
<a class="sub">MAP EXPLORER</a>
<a class="sub">TRAIL SEARCH AND FILTER</a>
<a class="sub">TRAIL ALERTS</a>
<a class="sub">ABOUT</a>
</div>
<i class="fa fa-bars"></i>
</div>

There are many ways, one if using a generic onclick event in a superior element.
Here is an example:
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
window.onclick = myFunction;
<div class="topnav">
<strong>NELSON TRAILS</strong>
<div id="myLinks">
<a class="sub">SHORT WALKS</a>
<a class="sub">DAY TRIPS</a>
<a class="sub">MULTI-DAY</a>
<a class="sub">MAP EXPLORER</a>
<a class="sub">TRAIL SEARCH AND FILTER</a>
<a class="sub">TRAIL ALERTS</a>
<a class="sub">ABOUT</a>
</div>
<a class="icon" onclick="myFunction()"><i class="fa fa-bars">Menu</i></a>
</div>
Of course window isn't a good element to use because it polutes js namespace. Put this in an element which is above your menu and that covers the whole page.
You can use a root div or something like that.

Like the previous answer said, there are many ways to solve this. An alternative way is utilize the focus and blur events. As the previous comment said, you might want to avoid polluting the global name space.
Here is an implementation utilizing focus and blur events.
function onClick(e) {
if (myLinks.classList.contains('hidden')) {
myLinks.classList.remove('hidden');
navMenu.focus();
} else {
myLinks.classList.add('hidden');
navMenu.blur()
}
}
function onBlur() {
myLinks.classList.add('hidden');
}
var myLinks = document.getElementById("myLinks");
var navMenu = document.querySelector('.topnav')
var myBtn = document.getElementById('home');
myBtn.addEventListener('click', onClick);
navMenu.addEventListener('blur', onBlur);
.topnav {
border: 1px dashed blue;
}
.sub {
display: block;
}
.hidden {
display: none;
}
<div class="topnav" tabindex="0">
<a id="home" class="nt"><strong>NELSON TRAILS</strong></a>
<div id="myLinks" class="hidden">
<a class="sub">SHORT WALKS</a>
<a class="sub">DAY TRIPS</a>
<a class="sub">MULTI-DAY</a>
<a class="sub">MAP EXPLORER</a>
<a class="sub">TRAIL SEARCH AND FILTER</a>
<a class="sub">TRAIL ALERTS</a>
<a class="sub">ABOUT</a>
</div>
</div>

This method probably not the best (one with blur/focus is better imo) but there a lot of different ways to do it so here goes another one.
function openModal(){
var x = document.getElementById('myLinks');
if(x.style.display != 'block'){
x.style.display = 'block';
window.addEventListener('click', closeMenu, {capture: true});
}
}
function closeMenu(event){
var el = document.getElementById('myLinks');
if(el.style.display == 'block' && event.target != el){
window.removeEventListener('click', closeMenu, {capture: true});
el.style.display = 'none';
}
}
div#myLinks{
display: none;
}
<div class="topnav">
<strong>NELSON TRAILS</strong>
<div id="myLinks">
<a class="sub">SHORT WALKS</a>
<a class="sub">DAY TRIPS</a>
<a class="sub">MULTI-DAY</a>
<a class="sub">MAP EXPLORER</a>
<a class="sub">TRAIL SEARCH AND FILTER</a>
<a class="sub">TRAIL ALERTS</a>
<a class="sub">ABOUT</a>
</div>
<p class="icon" onclick="openModal()">Menu</p>
</div>
We need capture option for event listener so it wont fire after initial click. This method is much less poluting the window because our listener exists only when menu is open.
Also you shouldn't use javascript:void(0) for preventing redirecting.
What you should do is something like this:
document.addEventListener('DOMContentLoaded', function(){
document.querySelectorAll('a.prevent-default').forEach(function(el, i){
el.addEventListener('click', preventDefault);
});
});
function preventDefault(event){
event.preventDefault();
}
Can't go through me!
This will find of all a elements with class prevent-default and prevent redirecting. Use of href="javascript:void(0);" is something to leave in the past.

JQuery: How to get an element to show up once the user clicks?

I'm new to JQuery. The assignment I have to do is a card game where two players play to beat each other's sum. Anyways I am having trouble with the initial step of getting the game area to show up once the user enters their names and clicks "new game". I was able to successfully hide the game when the page loads, but at the moment when I enter the names and click new game, nothing happens. I prevented defaults and I do have the .show in there in the method as well. Does anyone know how to do this? This is my code so far:
$(document).ready(function(){
$(".GameArea").hide();
GameStart();
});
function GameStart(){
$(".PlayerID").on("button",function(event) {
event.preventDefault();
setupUsers();
turnSetUp();
});
}
function setupUsers(){
Player1Name = document.PlayerName;
Player2Name = document.PlayerName2;
var player1Score = 0;
var player2Score = 0;
var x = [[Player1Name,Player1Score], [Player2Name, Player2Score]];
$(".GameArea").show();
}
function turnSetUp(){
$.post("link.php") //this is a full php address that was provided to me, ignore the link
.done(function (data){
var deck = $.parseJSON(data);
resetListeners();
//deck.Cards[0] is the value to beat
//loop to get the remainder cards from the deck
});
}
function resetListeners(){
$(".GameArea a").on("click", function(fixCard){
//event.preventDefault();
//console.log( $( this ).text() );
});
}
function fixCard(){
}
function calculateCurrentScore(){
}
function EndGame(){
}
This is the Game Area of the html too
<div class="GameArea">
<span id="firstgroup">
<a href="">
<img src="Desktop Cards/desktopCard0.png" alt="0"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard1.png" alt="1"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard2.png" alt="2"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard3.png" alt="3"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard4.png" alt="4"/>
</a>
</span>
<span id="secondgroup">
<a href="">
<img src="Desktop Cards/desktopCard0.png" alt="0"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard1.png" alt="1"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard2.png" alt="2"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard3.png" alt="3"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard4.png" alt="4"/>
</a>
</span>
</div>

I think you may be having an error here in your code.
function GameStart(){
$(".PlayerID").on("button",function(event) {
event.preventDefault();
setupUsers();
turnSetUp();
});
}
when using the jquery on function you are saying on "button" which really doesn't mean anything, what we need to do is select the button in the $([button id]) and create an on click event. Kind of like this.
$("[id for area to show]").on("click",function(event) {
//code to display game area goes here.
}
In the future I would isolating the issue, or even checking out the developer console on google chrome. The error messages can be easily tracked here, and can let you know what is going wrong.

Highlight clicked hyperlink in angularjs

Below is my HTML code,
<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical")' href="javascript:void(0);">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital")' href="javascript:void(0);">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service")' href="javascript:void(0);">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
I want to highlight the selected hyperlink, I have tried many methods in internet but almost all are linked with the URL of the hyperlink. Please help. I have succeed in using hover to highlight when hovering over a link but I'm stuck in highlighting the clicked link.

If you say your code does not have url paths, I'm assuming that all of this needs to happen within the same view and the same controller. In that case, you can put a variable on the scope, say selectedLink, and use ng-class to apply the proper styling:
<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical");selectedLink = "Physical"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Physical'}">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital");selectedLink = "Digital"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Digital'}">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service");selectedLink = "Service"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Service'}">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
css:
.selected { color: yellow; }

You can try something like this:
<a ng-click='addType("Physical"); visited = true' ng-class="{'visited' : visited}" href="javascript:void(0);"></a>

<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical")' href="javascript:void(0);" class="{selectedPhysical}">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital")' href="javascript:void(0);" class="{selectedDigital}">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service")' href="javascript:void(0);" class="{selectedService}">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
in your controller
$scope.addType = function(type){
if(type == 'Physical'){
$scope.selectedPhysical = 'selectedLink'
$scope.selectedDigital = ''
$scope.selectedService = ''
}
else if(type == 'Digital'){
$scope.selectedDigital = 'selectedLink'
$scope.selectedService = ''
$scope.selectedPhysical = ''
}
else{
$scope.selectedService = 'selectedLink'
$scope.selectedDigital = ''
$scope.selectedPhysical = ''
}
}
add css for selectedLink
.selectedLink{
color : Blue;
font-size: 1.2em;
//whatever the changes you want to made for the active link text
}
If you are using this you can overwrite the browser Active pseudo class

Hide/Show a div in a list

I have a list with an arbitrary number of items. Each item has a number of actions that can be done onto it. I want to display those actions in a div that appears when the user clicks a link associated with the specific list item.
I have tried the following code but when I click the link it just shows the first hidden div and not the hidden div associated with the link.
<script language="javascript">
function toggleOptions() {
var ele = this;
var text = this.parentNode.getElementsByClassName("displayOptions");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "TESTING";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide GPS";
}
}
HERE IS THE HTML. The list could be endless though, this is just an excerpt of the list.
<a href="javascript:toggleOptions();">
ITEM 1 OPTIONS
</a>
<div class="toggleOptions" style="display: none">
ITEM 1 OPTIONS
</div>
<a href="javascript:toggleOptions();">
ITEM 2 OPTIONS
</a>
<div class="toggleOptions" style="display: none">
ITEM 2 OPTIONS
</div>
<a href="javascript:toggleOptions();">
ITEM 3 OPTIONS
</a>
<div class="toggleOptions" style="display: none">
ITEM 2 OPTIONS
</div>

put another div or something around each group: ... put the toggleOptions() function to onclick and pass the href a # so that it is not empty... pass toggleOptions(this) to know which element is clicked
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
SHOW
</a>
<div class="toggleOptions" style="display: none">
ITEM 1 OPTIONS
</div>
</div>
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
SHOW
</a>
<div class="toggleOptions" style="display: none">
ITEM 2 OPTIONS
</div>
</div>
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
SHOW
</a>
<div class="toggleOptions" style="display: none">
ITEM 3 OPTIONS
</div>
</div>​
try with this here http://jsfiddle.net/YE6XZ/1/
function toggleOptions(e) {
var ele = e;
var text = e.parentElement.querySelector('.toggleOptions')
if(text.style.display == "none") {
//ele.style.display = "none";
text.style.display = "block";
text.innerHTML = "TESTING";
ele.innerHTML = "hide";
}
else {
text.style.display = "none";
//text.innerHTML = "Hide GPS";
ele.innerHTML = "show";
}
return false;
}

.toggleOptions is not a valid id DOM attribute value. Are you trying to get an element by its className? Then you should use getElementsByClassName instead, or remove the leading dot in the literal.

Show a div when a mouseover on a link

If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?

Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.

Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.

look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});

Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);