I am a beginner to JavaScript and can't figure out how to get links working within this dd menu. I'm assuming it has something to do with the javascript function closing the dropdown menu wherever you click overriding the links.
HTML
<div id="right_box">
<div id="wrap">
<div id="dropdown" class="ddmenu"> User Settings
<ul>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
</div>
JavaScript
<script type="text/javascript">
$("#dropdown").on("click", function(e){
e.preventDefault();
if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).children("ul").slideUp("fast");
} else {
$(this).addClass("open");
$(this).children("ul").slideDown("fast");
}
});
</script>
It happens because you're using e.preventDefault(), remove it.
When you use it you stop the default a action.
demo
Related
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.
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...
I'm learning jQuery and need advice/help on the creation of a drop down menu. So far I have it set up where I scroll down and the links disappear and a link called "menu" appears.
I would like to know how to have the links slide down when I click on the menu.. I'm not too sure how to go about doing this.
Here's what I have so far
html
<div class="container">
<header>
<nav>
<a href="#">
<span class="menu">Menu</span>
</a>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</header>
<div class="blueDiv">
</div>
<div class="redDiv">
</div>
<div class="greenDiv">
</div>
</div>
Javascript
$(window).scroll(function(){
var topScroll = $(this).scrollTop();
if (topScroll >= 3) {
$(".menu").show();
$("ul").hide();
} else{
$("span").hide();
$("ul").show();
}
})
$("a").click(function(){
$("nav.ul").slideToggle();
})
I don't mind list of easy to use plug-ins as well.
You're on the right track, here's a JS Fiddle that expands on the example you provided from CodePen.
All you needed to add was:
$(document).scroll(function(){
$('.navigation').hide();
})
So now your script hides the menu when the page loads:
$(document).ready(function(){
$('.navigation').hide();
Then toggles it on or off when the user clicks it.
$('.box').click(function(){
$('.navigation').toggle();
});
});
Lastly, it hides the menu when the user scrolls.
$(document).scroll(function(){
$('.navigation').hide();
})
If you want to snaz it up a bit, you could use slideToggle instead of toggle to hide and reveal the menu :)
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>