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;
});
});
Related
I have a pop out menu in a div.
I'm controlling the opening and closing of the div using: ng-click="showNavMenu = !showNavMenu".
However for each, link where I use this, i need to duplicate that code so that the menu actually closes, once the new view is loaded.
I'd like to avoid this code duplication - any ideas on what I can do:
<div class="navMenu" ng-show="showNavMenu">
<ul>
<li>About</li>
<li>Privacy</li>
<li>Contact Us</li>
</ul>
</div>
Use function instead
<li>About</li>
And define this function in controller
$scope.toggleMenu = function() {
$scope.showNavMenu = !$scope.showNavMenu;
}
What about putting the ng-click on the parent ul? I'm not super well-versed in angular's event bubbling/propagation rules - there might be some tweaks you need to make to your function or to the ng-click attribute. Or it might just work.
function toggleMenu() {
$scope.showNavMenu = !$scope.showNavMenu
}
-----
<ul ng-click="toggleMenu()">
I would go with moving the navigation logic to the controller code, seems the cleanest solution to me. So your markup would look like:
<div class="navMenu" ng-show="showNavMenu">
<ul>
<li><a href ng-click="navigate('about')">About</a></li>
<li><a href ng-click="navigate('privacy')">Privacy</a></li>
<li><a href ng-click="navigate('contact')">Contact Us</a></li>
</ul>
</div>
And inside your controller:
$scope.navigate = function(path) {
$scope.showNavMenu = false;
window.location.href = '/' + path; //better navigate via router
}
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 thought i had solved my problem, but not.
I use a normal call to load content and it works easy, fast and fine.
$( document ).ready(function() {
$('#leftmenu').jstree();
$('.jstreelink').click(function(){
alert("Clicked!");
$('#maincontent').load(this.href)
return false;
});
});
<div id="leftmenu">
<ul>
<li>Admin
<ul>
<li><a class="jstreelink" href="backend/test4.php">task1</a></li>
<li><a class="jstreelink" href="backend/test3.php">task2</a></li>
</ul>
</li>
<li>Moderator
<ul>
<li><a class="jstreelink" href="backend/testp.php">task3</a></li>
<li><a class="jstreelink" href="backend/test1.php">task4</a></li>
</ul>
</li>
<li><a class="jstreelink" href="backend/test.php">task5</a></li>
</ul>
</div>
I added a test alert, and i only get that alert when clicking on task5.
I have tried different combinations, but when clicking on a leaf , nothing happens. Also checked with Firebug.
repeatingly clicking on task 5 fires everytime the alert and does load the html in the maincontent div.
So it seems this isn't a normal jquery problem,but a problem with jsTree (and myself of course:))
I am using
jQuery v2.1.3
jsTree - v3.0.9
Thanks in advance for any comment.
Try this
$('#leftmenu').on("select_node.jstree", function(a,b){
alert(b.node.a_attr.href);
$('#maincontent').load(b.node.a_attr.href)
return false;
});
Thanks maddin, but i already found the solution:
$( document ).ready(function() {
$('#jstree').jstree();
$('#jstree').on('click', '.jstreelink', function() {
$('#maincontent').load(this.href);
});
});
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
A JQuery UI Tab that inherits from a JQuery Theme and redirects (HTTP GET) to a new page is the goal.
I'm 90% there using the following code, but the compromise has been to put the target URL in the anchor TITLE (the Tab widget expects the HREF to be a local page selector).
This works, but for SEO purposes I'd like the HREFs to be actual URLs to ensure search engines will follow and index them.
Thoughts?
<script>
$(function () {
$("#tabs").tabs();
$(".nav-link")
.click(function () {
window.location = this.title;
});
});
</script>
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>
If you make sure that you follow certain HTML structure, you can do something like,
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<!-- Make sure that your DIVs are called 'tabs-0', 'tabs-1' etc. 'tabs-0' will be referred by first link, tabs-1 will be referred by second link, so on and so forth. -->
<div id="tabs-0"></div>
<div id="tabs-1"></div>
</div>
If your HTML structure looks like this, you can do:
<script>
$(function() {
var tabId = '#tabs';
$(tabId + ' a').each(
function(index, val)
{
$(this).attr('href', tabId + '-' + index);
}
);
$("#tabs").tabs();
});
</script>
Now, search engine will see those links where as user will see your regular tab behavior.
I'm confused as to why this must be done through jquery. If you just want a Http Get redirect, that's what <a href=""> tages were designed to do.