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.

How to show a picture when hover a link (mouseover/mouseout)?

I am trying to get a link to show a box with a picture in it, with mouseover and mouseout. I have tried an array, but couldn't get any result out of that and right now, this is the code I have (which gives me the same result as the array).
I get the image to show, but I only get the first one, for all links. I got the same result when I used an array (that all links shows a pic, but only the first pic), but I guess I just fail to connect the right picture with the right link.
Can someone please help me with this?
<p id="lankar"><a href="#" alt="site1" />Link 1</p>
<p id="link" class="hide"><img src="img/bild1.jpg"></p>
<p id="lankar1"><a href="#" alt="site2" />Link 2</p>
<p id="link1" class="hide"><img src="img/bild2.jpg"></p>
<p id="lankar2"><a href="#" alt="site3" />link 3</p>
<p id="link2" class="hide"><img src="img/bild3.jpg"></p>
<script>
var links = document.getElementById('lankar');
links.addEventListener("mouseover", showBox);
links.addEventListener("mouseout", hideBox);
var links1 = document.getElementById('lankar1');
links1.addEventListener("mouseover", showBox);
links1.addEventListener("mouseout", hideBox);
var links2 = document.getElementById('lankar2');
links2.addEventListener("mouseover", showBox);
links2.addEventListener("mouseout", hideBox);
function showBox() {
if(document.getElementById('lankar'))
document.getElementById('link').style.display = 'block';
else if(document.getElementById('lankar1'))
document.getElementById('link1').style.display = 'block';
else if(document.getElementById('lankar2'))
document.getElementById('link2').style.display = 'block';
}
function hideBox() {
if(document.getElementById('lankar'))
document.getElementById('link').style.display = 'none';
else if(document.getElementById('lankar1'))
document.getElementById('link1').style.display = 'none';
else if(document.getElementById('lankar2'))
document.getElementById('link2').style.display = 'none';
}
</script>

Use CSS :hover ... and drop a few markup's
.lankar {
display: block
}
.hide {
display: none;
}
.lankar:hover + .hide, .hide:hover {
display: block;
}
<a class="lankar" href="#" alt="site1">Link 1</a>
<img class="hide" src="http://placehold.it/150x100/00f">
<a class="lankar" href="#" alt="site1">Link 2</a>
<img class="hide" src="http://placehold.it/150x100/0f0">
<a class="lankar" href="#" alt="site1">Link 3</a>
<img class="hide" src="http://placehold.it/150x100/f00">

Onclick method using JavaScript error

I found an onclick example here. I did everything given on the page and I don't know what's wrong/going on.
I did what's given there and when I create a new page, it's not working. What's going wrong?
JSFiddle
HTML
<div id="leftmenu">
<ul id="leftmenuidfrmslt" style="vertical-align: middle;">
<a href="" onclick="mob();"><li><span class="flaticon-smart">
</ul>
</div>
JavaScript
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
function hidemenus() {
document.getElementById('mobi').style.display = "none";
}
Onclick display menu
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >
<p class="flaticon-right127">Mobile Phones
<p class="flaticon-right127">Tablets</p>
<p class="flaticon-right127">Mobile Accessories</p>
</div>

At a quick glance through your code, you are trying to find an element by ID 'mobi' but there is no element that has that ID in the jsfiddle you provided.
So the function doesn't do anything because it can't find the element which it can apply the change/action to.
I tried a few other ids: 'elec', 'vehi' and couldn't find elements with those IDs either.

You have to set id attribute of the links.
For example:
<a href="" onclick="mob();">
Add this line its id:
<a id="mobi" href="" onclick="mob();">

Try something like this to make it more simple:
var allIds = ['mobi','elec','vehi','home','pets','book','clot','kids','spor','serv','jobs','real'];
function hideAll() {
for( id in allIds ) {
document.getElementById( id ).style.display = "none";
}
}
function showMenu( idToShow ) {
hideAll();
document.getElementById( idToShow ).style.display = "block";
}
In you're HTML you can now:
Also, as Code Whisperer pointed out, the elements you want to show should have ids:
<div id="elec"></div>

href attribute not working

HTML:
<a id="Change">Click to change</a>
<a href="image1_big.png" class="maneA blade">
<img id="maneP" src="image1.png"/></a>
Javascript:
<script>
$(function() {
$('#Change').click(function(){
$("#maneP").attr('src',"image2.png");
$(".maneA").attr('href',"image2_big.png");
return false;
});
});
</script>
Why is the href attribute not changing? when the src one is?!

<a id="Change" href="#">Click to change</a>
<a href="image1_big.png" class="maneA blade">
<img id="maneP" src="image1.png"/></a>
This one should work. I just removed the return false statement
$(function() {
$('#Change').click(function(){
$("#maneP").attr('src',"image2.png");
$(".maneA").attr('href',"image2_big.png");
var href = $(".maneA").attr('href');
alert(href);
});
});
http://jsfiddle.net/UwVRX/

Show/Hide div using javascript without page refresh

I have a script that shows /hides multiple independent divs on a page. The problem is that when you click to show a div, no matter where on the page, it will automatically focus on the first div. Is there a way to focus on the div that was displayed?
here is the javascript:
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;
}
here is the html:
<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>
here is a jfiddle of the work http://jsfiddle.net/YE6XZ/1/

Give your show links a class, like:
<a class="show" href="#" onclick="toggleOptions(this);" style="display:block;">show</a>
Then add this to your jQuery:
$('a.show').click(function(e){
e.preventDefault();
});
The default action for a bookmark anchor (href="#") is to jump to the top of the page. This would prevent that. jsFiddle example
An alternative, jQuery-less method would be to change your onclicks to:
onclick="return toggleOptions(this);"
As you are already returning false. jsFiddle example

I believe you could also use the .focus() method to focus on a given element. In your example:
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";
text.focus(); //This should give focus to the newly shown text element
ele.innerHTML = "hide";
}
else {
text.style.display = "none";
//text.innerHTML = "Hide GPS";
ele.innerHTML = "show";
}
return false;
}
Unless I am misunderstanding what you are looking to do....

use javascript:void(0) in href. Use javascript functions to show or hide using id
Show