Develop Reference

How to close a side bar when i pressed anywhere

What I want to do is to dismiss the sidebar when I press anywhere on the screen.
How can it be done? How can I make it so that when I hover over my image, my text would appear instead of it being visible the whole time?
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
document.getElementById("toggle").style.position = "static";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("toggle").style.marginRight = "0";
document.getElementById("toggle").style.position = "relative";
}
#toggle {
position: relative;
left: 400px;
font-size: 1.2em;
visibility: visible;
}
#toggle:hover {
color: white;
transition: 0.5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 50px;
}
.sidenav a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<div>
<ul id="topBar">
<li id="ixora">Ixora</li>
<li class="lists">2014</li>
<li class="lists">2015</li>
<li id="toggle" onclick="openNav() ">☰</li>
</ul>
</div>
<div id="mySidenav" class="sidenav">
×
<span class="textImage">Outing</span>
<img src="outing.jpg">
<span class="textImage">Prom Night</span>
<img src="prom.jpg">
<span class="textImage">PortDickson Trip</span>
<img src="pd.jpg">
<span class="textImage">Merdeka</span>
<img src="merdeka%20(2).jpg">
</div>

I honestly think you should be using jQuery here as it's fantastic for DOM manipulation. If for some reason you have to use vanilla js then it's going to be a little trickier.
Adding jQuery to your project is easy and well explained on the jQuery site. Here;s a comparison of selecting an element in js/jquery:
Vanilla JS:
document.getElementById("mySidenav")
jQuery:
$('#mySidenav')
To get things to happen when events happen (i.e. button press, or clicking away from a menu) you set up event handlers.
It's hard to picture from your code as there seems to be CSS missing for #topBar so I can't see your site very well (here's your code running in jsfiddle).
But lets say you have a button with ID of #openToggle. You would set up your sideNav in css with the correct width, height, etc, and leave it as display: none. Then we create an event handler to do something when you click that button:
//event handlers go at the bottom of your js file or script tag
$('#openMenu').on('click', openMenu);
That example is basically saying when the element with ID 'openMenu' is 'clicked' the run the 'openMenu' function - simple! :)
The openMenu function would look something like (basic example):
function openMenu() {
var $menu = $('#sideNav');
$menu.show();
};
A better way would be to have a toggle function that toggles the menu based on whether it's already open or closed:
function toggleMenu() {
var $menu = $('#sideNav');
if (($menu).is(':visible')) { //if it's visible
$menu.hide(); //hide the menu
} else { //else it's hidden
$menu.show(); //so show it
}
};
// event handler for menu toggle button
$('#menuToggle').on('click', toggleMenu);
With regards to closing the menu when you click away from it, you could bind an event handler to the body of the page and use jQuery's .one() function (runs only once) which will detect if the body is clicked and then run the menuToggle funtion - you'd end up with 2 handlers for this:
// event handler for menu toggle button
$('#menuToggle').on('click', toggleMenu);
$('body').one('click', toggleMenu);
Alternatively you could have the menu close when your mouse pointer leaves the menu?:
//event handlers
$('#menuToggle').on('click', toggleMenu);
$('#sideNav').mouseleave(toggleMenu);
The mouseleave handler is basically saying, once the mouse pointer leaves the element with ID of 'sideNav' then run the toggleMenu function.
I'm a newb too so my examples may not be great, but I hope I helped at least a little. Hopefully some real javascript devs will be along shortly to add to this or give better examples.
Cheers,
Dave

JQuery
$( document ).onclick(function() {
$("#mySidenav").hide();
}
Reference documentation:
JQuery .on
JQuery .hide

With javascript, you can do the following:
document.onclick = function(e){
if(e.target.id == "mySidenav"){
return false;
}
closeNav();
}

I see that you already have functions to open and close your sidebar,
clicking "anywhere" is the same as "clicking on the body", But I guess that you don't want your sidebar to close when you're clicking on it.
So, here's what you can do :
var myNav = document.getElementById("mySidenav");
myNav.onclick = function(e) {
e.stopPropagation();
}
document.body.onclick = function(e) {
closeNav();
}
So, when you click on your sidebar, you won't click on the body because the event propagation is stopped, and when you click elsewhere, it will close your sidebar.
Hope it helps,
best regards

Disable OnClick Event Until Another One Is Triggered First

I have 6 divs (.selector) set to do (onclick):
Show all tables
Show Nº1, Hide rest
Show Nº2, Hide rest
...
Show Nº5, Hide rest
They also toggle a class "activated" that changes the background color.
What I'm trying to do is that once I click on "Show Nº1, Hide rest" disable the click option (On this div) until I click in another one first like "Show all tables" or "Show Nº2, Hide rest".
Something like the "once function" but that resets as soon as another div is activated. Any way to do this?
Here is my CSS
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
Here is my JavaScript
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});

If you change toggleClass to addClass in your click function. Then, more than 1 click in your .activated will have no effect (as the click is disabled):
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).addClass('activated');
});
Or you can check if the clicked .selector has .activated class like:
$('.selector').on('click', function(event) {
if($(this).is('.activated')) return;
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});

There's two things to do:
Wrap the JavaScript inside a function
Unbind the click event everytime you click on something
Here's how:
function clickEvent(elements){
elements.bind('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
$('.selector').unbind('click');
clickEvent($('.selector').not(this));
});
}
clickEvent($('.selector'));
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
color: #FFF; //for display purposes
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="selector">1</div><div class="selector">2</div><div class="selector">3</div><div class="selector">4</div><div class="selector">5</div><div class="selector">6</div>

You should be able to do
if($(this).hasClass('activated'))
return;
To skip it if this was allready activated.

Change button colour

My idea is to show an image on a map as soon as I press a button. I would like to change the colour of the button after it has been clicked and it should stay that colour until I deselect the button. The colour of the button should then change back to its original colour.
Here is the code for the button:
<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>
And here is the function that inserts an image to the map:
$('#tram7')[0].onclick = function() {
if (overlayTram7.getMap() == map) {
$('#tram7').addClass('deselected');
overlayTram7.setMap(null);
} else {
$('#tram7').removeClass('deselected');
overlayTram7.setMap(map);
}
};
The style change worked with a hover, but I don't know how to change the style of a clicked button.
.Button {
font-family: Calibri, sans-serif;
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:grey;
color: white
}
.Button:hover {
color: white;
background:green
}
Thanks in advance.

Your question isn't too clear for me. Are you wanting to change the color ONLY while the user is clicking on the button? If so, that's pretty easy, just with CSS:
You'll want the psuedo-selector, :active
.Button:active {
color: white;
background:green
}
Here is an example
Update: You clarified that you want the button's color to be changed after being clicked. Essentially acting like a toggle. Luckily JQuery has a simple solution for you: toggleClass()
Updated example using toggleClass()

The :active pseudo-selector should be what you're looking for
.Button:active {
color: white;
background:red;
}

Use toggleClass in your click callback to add/remove a class which will style your button:
$('#tram7').toggleClass('clicked');
And the class:
.Button.clicked {
color: white;
background:blue
}
http://jsfiddle.net/5m9h6/1/

Toggling a slide out menu

So I'm in the process of making a slide out menu on my site. It slides out on click, but how can I set it up so on another click it will slide back in?
Pretty simple source code right now:
$(document).ready(function() {
$("#menuicon").click(function() {
$("nav ul, .content").animate({left: "-15%"}, 1000);
});
});
Thanks in advance!

Check this simple Slide Out menu.
DEMO http://jsfiddle.net/yeyene/TLtqe/1/
$('a').on('click',function() {
if($('#website').css('left')=='0px'){
$('#website').animate({left: '-30%'}, 1000);
}else{
$('#website').animate({left:0}, 1000);
}
});

You may be able to just use the toggle() function in place of click, but I'm not a big fan of toggle. The below solution incorporates a class as well, but this is how I'd do it:
$(document).ready(function() {
$("#menuicon").click(function(e) {
var menuicon = $(e.target);
if (!menuicon.hasClass('open'){
menuicon.addClass('open');
$("nav ul, .content").animate({left: "-15%"}, 1000);
} else {
menuicon.removeClass('open');
$("nav ul, .content").animate({left: "0"}, 1000);
}
});
});
I would also incorporate a 'working' class on there to prevent double clicks, but that may be more than you need with your project.
EDIT:
Little extra tidbit that I use quite a bit, if you have complex menu options that involve a few different objects (like an anchor, with an img and a span inside, or some other elements in it) you can pair e.target with the jquery 'closest()' function to be sure you're always selecting the anchor and not one of its children.
var clicked = $(e.target).closest('a');
This is pretty helpful if you're trying to also fetch any attribute values from your clicked objects, using this you know for certain that your selection will always be the 'a' (rather than e.target returning a child img or something), and you can work from there.

Use the jquery slidetoggle instead!
E.g, $(document).ready(function() { $("#menuicon").click(function() { $("nav ul, .content").slideToggle(1000); }); }); instead of animate!

Couldn't you use something like this?
$(document).ready(function() {
$(".nav_button").click(function () {
$(".top.mini_nav").slideToggle();
});
});
I'm using this here -> DEMO
And this is the CSS I use for that button
.top.mini_nav {
display: none;
top: 20px;
left: 20px;
margin-bottom: 60px;
position: relative;
}
.top.mini_nav a:hover {
background-color: #F8F8F8;
}
.nav_button {
position: relative;
width: 40px;
height: 40px;
left: 40px;
display: block;
color: white;
background-color: #2898F2;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 39px;
cursor: pointer;
top: 20px;
border-radius: 5px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.nav_button:hover {
background-color: #D0A624;
}
You will probably want something cleaner - but this works fine so far for me.

I realized that I just needed to make a variable that would set itself to true/false depending on if it was open.
var open = false;
$(document).ready(function() {
$("#menuicon").click (function() {
if (!open){
$(".content, nav ul").animate({left: "-=15%"}, 1000);
open = true;
} else {
$(".content, nav ul").animate({left: "+=15%"}, 1000);
open = false;
}
});
});
Thanks for all the help guys!

Issues with toggle, hide and show (Jquery)

I've been looking all over for a script that will take care of the following issues:
http://jsfiddle.net/k7E9V/3/
Close the div when clicking outside of it.
Close one div when the other one is clicked.
Close the div when "More info" is clicked again.
I'm wondering why the minus icon won't stay put when the div is active and also how to restore the plus icon in all the above scenarios.

The functionality of :active is different than what you have in mind. To be able to toggle the icon, first add a CSS rule like this, instead of the :active one:
a.trigger.isshown{
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}
Now, you can use .toggleClass('isshown');, .removeClass('isshown'); and .addClass('isshown'); the same way you're toggling/hiding/showing div panels to change the icon as well.

Final version: jsFiddle
I made the :active selector a subclass of .trigger as #Christopher commented and fixed the behavior of the .trigger X button to toggle the class accordingly:
$('.trigger').click(function(event) {
event.preventDefault();
var panel = $(this).next('.panel');
$('.panel').not(panel).hide();
panel.toggle("fast");
$('.trigger').not(this).removeClass('active'); //remove active class from other X buttons
$(this).toggleClass('active'); //toggle the clicked button's active class
});
This way it will remove the active class from the other X buttons, and toggle the current one as requested.
To close the boxes when you click outside the .panel and .trigger, add this inside of your DOM Ready handler:
$(document).click('click', function(e) {
if (!$('.panel').is(':visible')) return;
var targ = $(e.target);
//doesn't close the boxes if target is .panel/.trigger or their descendant
if (targ.closest('.panel').length || targ.is('.panel')
|| targ.closest('.trigger').length || targ.is('.trigger')) return;
$('.panel').hide('fast');
$('.trigger').removeClass('active');
});

http://jsfiddle.net/dwZnG/
Try this out for size.
a.trigger{
position: absolute;
text-decoration: none;
bottom:0;
right: 0;
font-size: 17px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#333;
padding: 20px 30px 10px 15px;
font-weight: 600;
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Add-icon.png) 95% 65% no-repeat;
display: block;
}
/* Change active to a class name*/
a.trigger.active {
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}
Then your JS:
$(document).ready(function() {
$('.trigger').click(function(event) {
event.preventDefault();
var me = $(this);
var panel = me.next('.panel');
//If active is there, remove it
if (me.hasClass("active")) {
me.removeClass("active");
}
//If it ain't...add it
else {
me.addClass("active");
}
$('.panel').not(panel).hide();
panel.toggle("fast");
$(document).ready(function() {
$('.panel').hover(function() {
mouse_inside_div = true;
}, function() {
mouse_inside_div = false;
});
$('body').mouseup(function() {
if (!mouse_inside_div) $('.panel').hide();
});
});
});
});​
Basically the same thing as Abody said. Once you have this down, you should be able to figure out the rest of the functionality.