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
Related
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
I want to find out with jQuery what point of the dropdown menu was clicked.
I tried it so:
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
jQuery:
$("#changeLanguage").click(function(){
alert($(this).attr("requestLanguage"));
});
But only the first dropdown point (german) calls the jQuery Event. Denmark has no function.
How I can realize it?
An id can only be used once on the page. Change them to a class like so:
HTML
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
</ul>
JS
$(".changeLanguage").click(function(e){
e.preventDefault()
alert($(this).attr("requestLanguage"));
});
FIDDLE
I'm new to js/bootstrap and am reading about it from the official website.
I'm having problem with the nav-tabs. In the official example, they are taking the user to some other url, like this:
<ul class="nav nav-tabs">
<li class="active">Search</li>
<li>Click</li>
<li>Play</li>
<li>Hours Viewed</li>
</ul>
But my requirement is to call some js method on click on these tabs.
Is it possible using nav-tabs ? or do I have to use buttons ?
You can change the native comportement of the <a> with JS. For example, if you set something like this, the link will execute your doSomething function but not link you to another page :
click me
To go further, if you want to better separate the JS and the HTML (good practice), avoid the inline-javascript and prefer the use of listener : https://developer.mozilla.org/fr/docs/DOM/element.addEventListener
The simplest way I can think of is to add an onclick attribute for each <a> tag...
Maybe something like this...
<ul class="nav nav-tabs">
<li><a onclick="clickFirst();" href="#">Click</a></li>
<li><a onclick="clickSecond();" href="#">Play</a></li>
<li><a onclick="clickThird();" href="#">Hours Viewed</a></li>
</ul>
and add this in your script tag...
function clickFirst() {
alert('First anchor clicked...');
}
function clickSecond() {
alert('Second anchor clicked...');
}
function clickThird() {
alert('Third anchor clicked...');
}
You can use bootstrap javascript. And this one is about tab.
Here is a sample code:
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
I have a few tabs on a page that have this markup
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
The hiding and showing of the content in these tabs are controlled by some JQuery code that begins thus
$(document).ready(function () {
// Hide all tabs apart from the overview
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
...
The problem is that if I add, remove or rename tabs (like I have just done), then I have to change all this code. What I would like is to add, rename or remove as many tabs as I like but to not have to modify this JQuery code.
I'm not really looking for someone to code a solution for me but rather wanted to start a discussion on tools, techniques etc that can be used to avoid this sort of naming dependency.
EDIT
I also have this bit of ugliness for when a tab is clicked.
$('#holiday-details-nav ul li a').click(function () {
// Remove active class from all links
$('#holiday-details-nav ul li').removeClass('active');
//Set clicked link class to active
$(this).parent().addClass('active');
// Set variable currentTab to value of href attribute of clicked link
var currentTab = $(this).attr('href');
// Hide all tabs
$('#holidaydetails-description-imagecontainer').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-overview').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
$('#holiday-details-bottom').show();
$('#holiday-details-left-booknow').show();
// Show div with id equal to variable currentTab
$(currentTab).show();
$('#holidaydetails-description-imagecontainer').show();
return false;
});
Thanks,
Sachin
You could assign a common CSS class, say tab, to every li except overview, and then use a jQuery class selector to hide them all. For example:
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="tab holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="tab holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="tab holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="tab holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
And then, to hide every tab except overview:
$("holiday-details-nav .tab").hide();
Or the other way around, that is, add a specific class to overview, and hide every other tab:
<div id="holiday-details-nav">
<ul>
<li><a class="overview holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
Then, to hide, select all tabs, and exclude overview using .not():
$("#holiday-details-nav a").not(".overview").hide();
When dealing with tabs, especially in the setup you have (where the href attribute has the id of the div related to it), you don't need to hardcode anything, use the title attribute, or use any extra classes. Look at this:
http://jsfiddle.net/FAM2s/2/
All it does it find all of the tabs' detail divs and hide them all, then only show the one related to what was just clicked.
As long as you set the correct href attributes for the links, and set the corresponding divs with those id's, it will work, no matter how many tabs you add/remove whenever you want.
Using Firebug I have found that the Dynatree plugin changes the following code:
<li id="id3.1" class="expanded">Menu 1
<ul>
<li id="id3.1.1">Sub-menu 1</li>
</ul>
</li>
To this:
<li class="">
<span class="dynatree-node dynatree-exp-c dynatree-ico-c">
<span class="dynatree-connector"></span>
<span class="dynatree-icon"></span>
<a class="dynatree-title" href="#">Sub-menu 1</a>
</span>
</li>
So when I try to make a click event on the id="id3.1.1" nothing happens because this id doesn't exist anymore.
I made a search here and found the onActivate option that will make my click happen on the menu:
$("#treeMenu").dynatree({
onActivate: function(node){
var menuTitle = node.data.title;
alert(menuTitle);
}
});
My question: Is this the only way to do the click event using Dynatree?
Well I think that is the best option, because it uses the API of the plugin, but of course you could still attach an event to the <a> like this:
$('a.dynatree-title').live('click', function(e){
//here e.target is the link you have clicked
});
I'm trying to register a click event for a menu list button identified by a class, but it doesn't seem to be firing. My code is as follows:
<body>
<!-- jQuery Simple Drop-Down Menu http://javascript-array.com/scripts/jquery_simple_drop_down_menu/# -->
<div id="dropDownDiv" style="width: 908px; height: 24px; margin: auto auto; background: #324143;">
<ul id="jsddm">
<li>Item 1
<ul>
<li><a class="btn myOtherClass" href="#">Button 1</a></li>
<li><a class="btn myOtherClass"href="#">Button 2</a></li>
</ul>
</li>
<li>Item 2
<ul>
<li><a class="btn myOtherClass" href="#">Button 3</a></li>
<li><a class="btn myOtherClass" href="#">Button 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
And in my script I have the following:
/* Register the click event for menu buttons */
$('.btn').click(function () {
alert("You clicked a button");
});
The alert never fires and I'm not sure why, any help is appreciated.
UPDATE:
The code in the link works for me to, not sure why it's not working in my project. I'm in an Eclipse PHP Project environment with Java resources enabled. I tried my project in Chrome and Firefox, not working for either. I'll check the rest of my script.
UPDATE 2:
Looks like Shef's recommendation about wrapping in a .ready function did the trick. I still don't understand why it needs that to work, "c=smiles"'s link worked without it.
Works fine for me, check it out. Maybe you didn't include jQuery? Or, you are not wrapping your event listener bind code inside a document ready like this:
$(document).ready(function(){
$('.btn').click(function () {
alert("You clicked a button");
});
});
are you using stopPropagation or return false in another click event that may have prevented the click event from happening?
Is the jQuery used after jQuery has been loaded?
Is the in the DOM at the time of binding? (use delegate instead of click if not, or bind after loading)