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.
Related
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">
I want to change the visibility of an element based onclick event of refreshA element
<a id="refreshA">Click here</a>
<a style="display: none;" id="refreshTab"> Info</a>
here is the js code
<script>
document.getElementById("refreshA").onclick(function () {
document.getElementById("refreshTab").style.display = 'block';
})
</script>
Try this:
function showhide(){
document.getElementById("refreshTab").style.display = 'block';
}
document.getElementById('refreshA').onclick=showhide;
See the working fiddle
function myFunction() {
document.getElementById("refreshTab").style.display = 'block';
}
<a id="refreshA" onclick="myFunction()">Click here</a>
<a style="display: none;" id="refreshTab"> Info</a>
I'm very new to jQuery and coding in general and have been trying to get this sidebar to work. When you click on the INFO link a sidebar opens up. As of right now you can only close the sidebar by clicking on the X in the corner, but I want to also be able to close the sidebar when you click in the body area (but not when you click in the sidebar area). I got this to work sort of, but then I wasn't able to open any of my links to view my projects (only the second project, Frankenstein eBook, has a functioning link as of now).
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
I've seen a lot of similar problems on here but could never quite match it up to mine specifically. Any help would be awesome, and i Thank you!
Here is my site: Josh Diaz Portfolio
And here is a JSFiddle: JSFiddle
My HTML:
<div class="wrap">
<!--Sidebar-->
<!--Info Panel-->
<div class="infoPanel">
<nav class="closeBtn"> X
</nav>
<div class="infoText">
<h2>infoPanel</h2>
<p>Copy goes here.</p>
</div>
</div>
<section class="sidebar">
<div class="sidebarNav">
<nav> <a class="infoLink" href="#">INFO</a>
</nav>
</div>
<div class="content">
<section class="projects">
<div class="wrapper">
<ul class="grid">
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Images Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
</ul>
</div>
</section>
</div>
</section>
My JS:
$(document).ready(function () {
var menu = "close";
$('.infoLink').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
$('.closeBtn').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
});
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
Because $('.closeBtn') is referring to div and not the link, use $('.closeBtn a') instead.
Anyway, heres another Quick and dirty way ( needs a bit of refactoring ) but the idea is there. I'll add comments to this if it works for you: http://jsfiddle.net/Varinder/RfFSv/
$(document).ready(function () {
var menu = "close";
var $infoLink = $(".infoLink");
var $infoPanel = $(".infoPanel");
var $closeButton = $(".closeBtn a");
var $document = $(document);
$infoLink.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("open");
});
$closeButton.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("close");
});
$document.on("click.nav", function(e) {
if ( !$infoPanel.is(e.target) && $infoPanel.has(e.target).length === 0 ) {
sidebar("close");
}
});
function sidebar(action) {
if (action == "open") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else if (action == "close") {
console.log("stuff");
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
}
});
You can try something like this:
Your HTML
<body>
<div id="content"></div>
<div id="sidebar"></div>
</body>
And your JS
$('body').click(function(){
$('#sidebar').hide(); //hide sidebar when body is clicked
});
$('#sidebar').click(function(e){
e.stopPropagation(); //this call will cancel the execution bubble
});
I hope this help.
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
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();
}
);