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();
});
});
Related
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 :)
I have correctly referenced jquery, version 2.1 (the newest one). But nothing happens when I click "About". I am running the code on a python (Flask) local server. What am I doing wrong?
<div id="main">
<div class="inner">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
</div>
<script>
$(document).ready(function () {
$('#about').click(function() {
$('#main').append("testing");
});
});
</script>
edit: changed #about to href='#', nothing changed
Replace:
<li>About</li>
with
<li>About</li>
Checkout this Working version.
You need to prevent the default action of the link...
$('#about').click(function(e) {
e.preventDefault();
$('#main').append("testing");
});
The reality is, the page will be refreshed because you left the link href empty which means it points to the page itself.
Solution 1:
<li>About</li>
Solution 2: stop hyperlink.
$(document).ready(function () {
$('#about').click(function() {
$('#main').append("testing");
return false;
});
});
I've done a search both on here and via Google, I've tried all the codes that they have given me, and no success on any of them. I've got no idea at all why they don't work.
Basically when you scroll the page and reach the anchor link "about" I want "about" to be highlighted until you get to "events", etc.
<div id="menu-wrapper">
<div id="menu">
<ul>
<li class="logo"><img src="/images/ccky_logo.png" height="60"/></li>
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Team</li>
<li>Location</li>
<li>Contact</li>
</ul>
</div>
<!-- end #menu -->
</div>
Thanks!
You can use bootstrap's Scrollspy to achieve this effect: http://twitter.github.io/bootstrap/javascript.html#scrollspy
After you implemented the JavaScript plugin simply call it with $('#menu').scrollspy().
In your HTML, just add the data parameters bootstrap instructs you to use.
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