I'm having trouble getting <a href="#"> to follow the link when jQuery is activated.
<ul>
<li class="menuOption">Home</li>
<li class="menuOption">About</li>
</ul>
I looked at a few posts but they involve people trying to prevent a link being followed by using preventDefaults(); in the .js file. I'm not sure what my solution would be.
You Need to put the link text inside of the anchor tags. Right now, the a tag is empty and so therefore un-clickable.
Try this instead:
<ul>
<li class="menuOption">Home</li>
<li class="menuOption">About</li>
</ul>
There can be multiple ways to accomplish this :-
1. One way is to change your href to point to javascript:void(0) rather than #
so the code should be
<ul>
<li class="menuOption">Home</li>
<li class="menuOption">About</li>
</ul>
You must also return false from your jquery function if you have some url written and onclick is present
<ul>
<li class="menuOption">Home</li>
</ul>
Dont forgot to return false from your function
function somefun(){
return false;
}
Related
I have the following HTML for consideration...
<ul class="foo">
<li class="bar"><a>Here #1</a></li>
<li class="bar">Here #2</li>
<li class="bar">Here #3</li>
<li class="bar">Here #4</li>
</ul>
The problem is that I have an anchor tag that does not have an href in the first list item tag. I want to use JQuery to add the href to the tag. I tried doing it like this (it did not work):
var fooBar;
fooBar = $('li.bar').children().first();
fooBar.attr('a', 'href="#1"');
I thought maybe I needed to pass in the index, but I figured the .first() would grab the correct element. Either way my code fails to do what I want.
I would greatly appreciate any direction and/or input.
Problem is this line
fooBar.attr('a', 'href="#1");
Do it as bellow
fooBar.attr('href', '#1');
Here is the correct way of setting attribute value:
fooBar.attr('href', "#1");
You can use like this
$('li.bar').children('a').first().attr('href', '#1');
var add_attr = $('.foo > li:first-child');
$(add_attr).find("a").attr('href','#');
I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
I am trying to figure out how to detect what page I am on so I can add a selected class to my html with Jquery. I have tried a few bits of script but they have not worked. I am working on a local server and for now just need something that can somehow detect the page I am on and somehow link it to the li's. I'm not sure how to tackle it
HTML:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><img src="img/small-icons/access-icon.png" width="17" height="16" alt=""/>Access</li>
<li>Fader Layout</li>
<li>Patching</li>
<li>Wild Controls</li>
<li>Buses & Outputs</li>
<li class="submenu">Contribution
<ul class="sub-section">
<li class="go-back"><a>I AM BACK BUTTON for contribti</a></li>
<li><a>test</a></li>
<li><a>test</a></li>
</ul>
</li>
<li>Oscillator</li>
<li>Talkback</li>
<li>Meters</li>
<li>Automixer</li>
<li>Audio Follow Video</li>
</li>
<li class="submenu selected">test-page
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
<li class="submenu">Control Surface
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
</ul>
</div>
A solution would be to use get params with something like How to get query string params and form the URL's so that they append the param as ?page=mypage and then get the page name or ID with getParameterByName('page') and then check out where you handle your tabs and perform your desired stylings/actions.
This can also be handled from backend, depending on the backend technology you are using.
For example
if PHP, perhaps append the get params there or set specific $_SESSION['page'] variable and handle these clientside
if Django, it can be exported to context or, also appended to get params and handled in the template via javascript or template tags
...and many other possibilities.
If the question though refers to how to set a status based on what page you are on depends on where you want to set that status, for example you might write a script that when clicking a button/link it would first make an ajax POST request to your server sending the ID that you are interested in (setting it in the backend somewhere) and then redirect to wherever you need.
I have used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos
<div id="enscroll_name">
<ul>
<li id="p1">product1</li>
<li id="p2">product2</li>
<li id="p3">product3</li>
<li id="p4">product4</li>
<li id="p5">product5</li>
</ul>
</div>
On Page load the product3 need to be in the visible area. I used <a name="p3"></a> for this. But in query how to achieve this? In html we used anchor name tag like <a name="p3"></a>. But in this script how to achieve this?
You can use .scrollTop() jquery function to visible whatever the area that you want inside the div.
Try like this..
$('#yourdiv').scrollTop($("p[name='p2']").height());
Check the sample fiddle
Ok lets say I have:
<title>Monkey</title>
and then some navigation:
<ul id="navigation">
<li>
Monkey
</li>
</ul>
As the site loads, the title of the page gets stored as a variable, then I want the string to match anything within #navigation, in this case it is Monkey. After finding the string of text it then assigns a class:
<ul id="navigation">
<li class="current">
Monkey
</li>
</ul>
Are there any examples people can refer me to?
Try this:
$('#navigation a').filter(function() {
return $(this).text() == document.title;
}).closest('li').addClass('current');