When I put $("header nav ul").toggleClass("open") outside of the on click function it works, but it doesn't when I put it inside. Why is that??
The alert method is running, so clicking the a tag works.
<header>
<div class="wrapper">
<h1 class="logo">Blesto</h1>
<nav>
<h2>Main Navigation</h2>
<ul class="burger-nav-ul">
<li>Our Story</li>
<li>Menu</li>
<li>Reservations</li>
<li>News</li>
<li>Reviews</li>
</ul>
</nav>
</div>
</header>
$(document).ready(function(){
$(".burger-nav").click(function(){
alert("hi");
$("header nav ul").toggleClass("open");
});
});
You need to stop the default behavior of anchor element.
$(".burger-nav").click(function(event){
event.preventDefault();
alert("hi");
$("header nav ul").toggleClass("open");
});
You are right about alert being run, but then the default behavior is run which is going to wherever href points to. In this case, the same page.
Related
I have a simple open/close responsive menu that uses jQuery. The menu works just fine but the website I'm using it on is a simple single page site with different sections. My problem is the menu opens and closes when the user clicks the menu handle and I'd like it to close when the user clicks on a menu item also. I have very little experience in jQuery so I need help solving this problem.
The HTML:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
The jQuery:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
Thank you.
I think you need this:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
$('nav ul a').on("click", function(){
$('nav ul').removeClass('showing');
});
I also noticed your HTML structure is wrong...
The <li> should be child of <ul>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
Working fiddle ==> https://jsfiddle.net/osd4nn1n/
You can change the toggleClass to just toggle to hide the elements. To get the behavior you'd like, change your jQuery selector to:
$('.handle, nav ul a').on('click', function(){
$('nav ul').toggle();
});
When the cursor hovers over my link, I want it to display a message saying "Hovering". I have tried the code below, but it does not create this window. Why not?
HTML:
<body>
<nav id="menu">
<ul>
<li><a href="index.html" id="home_button">
</ul>
</nav>
</body>
Javascript:
$(document).ready(function()
{
$("#menu ul li a").mouseover(function()
{
alert("Hovering");
});
});
Your code works, you just need to fix your HTML tags.
You are missing the anchor and list-item closure tags.
<nav id="menu">
<ul>
<li>Home</li>
</ul>
</nav>
JSFiddle: https://jsfiddle.net/40acxxet/1/
So I'm trying to make my navigation bar toggle using JQuery however when I click on the span button, nothing is happening.
HTML
<div id="navbar">
<span class="navbar-btn"></span>
<ul>
<li class="currentpage">Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
JQuery
<script>
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
</script>
Live Version can be found at http://joshscottonthe.net/Unit20/Photographer - Just rescale your browser less than 960 pixels and you should see the button
You need to include your script after the document is loaded.
$(function() {
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
})
Or you can include it in the same way you did, just make sure that the <script> tag is placed after that <span class='navbar-button'>.
I think this should solve the problem:
$(document).ready(function(){
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
});
I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?
Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>
JAVASCRIPT(jQuery)
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load
You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...
Suppose I have a navigation menu that works by using Javascript to hide or show the respective div.
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
</script>
I know I should be using the <noscript></noscript> tag to facilitate users who do not have Javascript enabled.
Question
How should I go about doing this?
For javascript disabled users, I want to allow them to click "Home" or "Contact Me" and be taken to "home.php" or "contact.php" respectively.
This should work:
<ul>
<li><a data-target="#home" href="home.php">Home</a></li>
<li><a data-target="#contact" href="contact.php">Contact Me</a></li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).data('target');
$(toShow).show();
});
</script>
With noscript you can add another menu, but can't change available one. Having something like above, people with no js will not trigger click handler and default get will be executed. If js is enabled, click function will be executed and e.preventDefault will stop browser from redirect to another page.
This solution also does not require duplicated menus. Once you need to change it somehow, you will need to change HTML of two menus actually, not one.
Please note that this is a quick trial, code is UNTESTED
Leave the links to the full pages in the anchors, and remove the ".php" programmatically
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
toShow=toShow.split(".");
toShow=toShow[0];
$("#"+toShow).show();
});
</script>
Like this:
<ul id="scriptMenu" style="display:none">
<li>Home</li>
<li>Contact Me</li>
</ul>
<noscript>
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
</noscript>
<script>
$(function(){
$("#scriptMenu").show()
});
</script>
scriptMenu will be hidden on browsers that don't support JavaScript.
Browsers that do support JavaScript will not render the elements in the tag, and will show the scriptMenu list.
Working example
What about adding the actual link as the href in the "a" tag, and then in the jQuery add return false at the end. This stops the browser executing the link specified in the href element if the Javascript was triggered. If Javascript isn't enabled they just link to the href element. No need for noscript.
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
return false;
});
</script>