I'm using a basic Bootstrap tab structure, where I wish to fire a Javascript event once the tab is clicked. I can't figure out how to do this. This is the code I have come up with so far:
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#tab1"> tab(<?php echo $count ?>) </a></li>
<li><a data-toggle="tab" href="#menu2"> tab(<?php echo $count3 ?>) </a></li>
<li><a data-toggle="tab" href="#menu1"> tab(<?php echo $count2 ?>) </a></li>
</ul>
and the Javascript:
$("#menu2").click(function() {
alert('yes, the click actually happened');
});
$('.nav-tabs a[href="#menu2"]').click(function() {
You have to do:
$('[href=#menu2]').on('shown.bs.tab', function (e) {
alert('Your Code')
});
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
http://getbootstrap.com/javascript/
Related
I have tables called: 1) purchase_requisitions; 2) liquidations. Assuming that I have 100 data for both purchase requisitions and liquidations.
In our application, we have all the lists of users and when the client clicked a certain user, there will be a modal that will pop-up.
In this modal you can see all the records for that user and also there's 2 tab. 1) Purchase Requisition tab; 2) Liquidations tab.
Purchase Requisition is the active tab once the client clicked the certain user and this is where I'm fetching the data of purchase requisitions.
Now what I want is, I dont want to load the 100 data of purchase requisitions and liquidations at the same time.
I want to load the liquidations, for example when I clicked the liquidations tab.
Question: Why does my click event is not working?
Tab pane
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
Javascript
<script type="text/javascript">
function getPurchasesPayments(vendor_id,start_date,end_date){
// .... code
}
$(document).ready(function(){
var vendor_id = "<?= $vendor->id; ?>";
var start_date = "<?= $start_date;?>";
var end_date = "<?= $end_date;?>";
if ($('.purchases-payments').length > 0) {
$('div').click('.purchases-payments',function(e){
// $('.purchases-payments').click(function(e){
$('.purchases-payments-details').html('');
getPurchasesPayments(vendor_id,start_date,end_date);
e.preventDefault();
return false;
})
}
if ($('.liquidations').length > 0) {
$('div').click('.liquidations',function(e){
// $('.liquidations').click(function(e){
alert('test');
e.preventDefault();
return false;
})
}
// if ($('.liquidations').hasClass('active')) {
// alert('liquidations active');
// }
})
You're targeting "div" in your jQuery click code, but you want to target your a elements, you should also add classes or ids to this elements which you will be targeting.
Add ids to your a elements
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a id="purchases" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li id="liquidations" class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
</ul>
and in your javascript:
$(document).ready(function(){
$('#purchases').click(function(e){
// your code
});
$('#liquidations').click(function(e){
// your code
});
})
An issue that’s been bugging me for a while is that by default in the mobile menu of my theme, ALL menu items auto expand so it makes it hard to navigate if you have a lot of sub-menu items.
I’m trying to have my sub-menu items collapse with a drop-down arrow. Something that seems fairly simple but there are no options for adjust this in WordPress.
I managed to find some code in Header.php that you will find below
Any ideas how I can modify this code to have my sub-menu items collapse with a dropdown arrow?
Thanks
Christian
You can do it easily by Bootstrap:
Bootstrap Dropdowns
or, You can also hide dropdowns in css:
li ul{
display: none;
}
and show it on arrow click using jQuery:
$("li a").click(function(){
$(this).parent().find("ul").toggle();
});
Demo:
https://codepen.io/seyyedmojtaba72/pen/VOgmdE
Pure js
let arr=[...document.querySelectorAll(".toggle")];
arr.map(a=> a.onclick = e => {
a.nextElementSibling.classList.toggle('hide');
a.innerHTML = a.innerHTML=='→' ? '↓' : '→';
});
.hide { display: none }
.toggle { cursor: pointer}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li>
<a class='prett' href='#' >SubMenu A</a>
<span class="toggle">→</span>
<ul class='submenus hide'>
<li><a href='#' >Dropdown 1</a></li>
<li><a href='#' >Dropdown 2</a></li>
</ul>
</li>
<li>
<a class='prett' href='#' >SubMenu B</a>
<span class="toggle">→</span>
<ul class='submenus hide'>
<li><a href='#' >Dropdown 3</a></li>
<li><a href='#' >Dropdown 4</a></li>
</ul>
</li>
<li><a class='home' href='/'>Back</a></li>
</ul>
</nav>
Sorry I had a hard time figuring out how to paste code without errors. Here is my code below. Any way to modify this code to have a collapsible drop down menu on mobile devices?
<!– Toggle button for Main Navigation on mobile –>
<button class=”btn btn-primary header__navbar-toggler hidden-lg-up js-sticky-mobile-option” type=”button” data-toggle=”collapse” data-target=”#shaka-main-navigation”><i class=”fa fa-bars hamburger”></i> <span><?php esc_html_e( ‘MENU’ , ‘shaka-pt’ ); ?></span></button>
<!– Main Navigation –>
<nav class=”header__navigation collapse navbar-toggleable-md js-sticky-desktop-option” id=”shaka-main-navigation” aria-label=”<?php esc_html_e( ‘Main Menu’, ‘shaka-pt’ ); ?>”>
<?php
if ( has_nav_menu( ‘main-menu’ ) ) {
wp_nav_menu( array(
‘theme_location’ => ‘main-menu’,
‘container’ => false,
‘menu_class’ => ‘main-navigation js-main-nav js-dropdown’,
‘walker’ => new Aria_Walker_Nav_Menu(),
‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s” role=”menubar”>%3$s‘,
) );
}
?>
<?php
I'm pretty new to jQuery, so I admit I don't fully know what I'm doing. The top menu item is just text and not it's own link, but it has a dropdown. I'm trying to add a plus and minus sign before the text that toggles while keeping the original content clickable.
HTML
<div class="menu-clinical-materials">
<ul>
<li class="menu-item-has-children"><a>Clinical Studies & Articles</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a>Counseling Sheets</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
</ul>
JS
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".Expander").click(function () {
jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
jQuery(this).toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).addClass("Expanded").end().slice(1).siblings("ul").hide();
});
So I want "Clinical Studies & Articles" clickable, not just the +/- sign.
Here's what I have so far
EDIT
I was able to get it to work the way I wanted but using a different method. I'd still like to know how to do this with the .click function instead of toggle though. I'd appreciate it. Here's the fiddle with my workaround
Fiddle
Here is the changed JS
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"plus-minus\">+</span>");
jQuery(".sub-menu").addClass('expander').hide();
jQuery('.menu-item-has-children').parent().toggle(function () {
jQuery(".plus-minus").text("-");
jQuery(".expander").slideDown();
}, function () {
jQuery(".plus-minus").text("+");
jQuery(".expander").slideUp();
})
});
Improved demo. Use event.stopPropagation() to prevent click on inner links to bubble and close the whole block.
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".menu-item-has-children").click(function () {
buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
jQuery(this).children('.Expander').html(buttonText);
jQuery(this).children('.Expander')
.toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).slice(1).siblings("ul").hide();
});
//Prevent close on click of inner links.
jQuery(".sub-menu > li").click(function (e) {
e.stopPropagation();
});
//]]>
I have this code:
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I want to capture the any tab click event and alert the id of the tab being activated by the click. How is this done?
$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I would use the bootstrap events API instead of adding additional click handlers
$('.yourTabsClass a').on('show.bs.tab', function(e){
alert('ID clicked = ' + e.target.id)
});
Reference: bootstrap tabs docs
DEMO
$("a[data-toggle='tab']").click(function() {
alert($(this).attr("id"))
});
Here is jsfiddle
I am creating a website for portfolio and learning purpose and I am new to web programming so sorry if i made some stupid mistake in code :)
I want to single page scrolling website with a simple fixed position menu at the top, with little animation during the page scroll for that i took a reference from http://css-tricks.com/jquery-magicline-navigation/. Here is what i achieved so far http://www.pk-pixels.com
Beside on hover event i want the line to animate to next/prev item when user scroll the page upwards or downwards. So i used jquery waypoints plugin to generate an event
I am successfully able to move the highlight to current item when user scrolls the page but only problem is that it does not animate(some time it does strangely....), here i need your help just make that line animate when page scrolls :), here is my js
$(document).ready(function() {
var $menuline = $("#menuline");
linePosition($menuline);
$('#page1').waypoint(function() {
$("#main-menu ul li").removeClass("current_page_item");
$("#main-menu ul #link1").addClass("current_page_item");
linePosition($menuline);
}, { offset: -10 });
$('#page2').waypoint(function() {
$("#main-menu ul li").removeClass("current_page_item");
$("#main-menu ul #link2").addClass("current_page_item");
linePosition($menuline);
});
});
function linePosition($menuline)
{
$menuline
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left);
var $linewidth = $menuline.width();
var $lineposition = $menuline.position().left;
$menuline.animate({
width: $linewidth,
left: $lineposition
});
}
here is html code for the menu
<nav id="main-menu">
<ul>
<li class="current_page_item" id="link1">Home</li>
<li id="link2">About Us</li>
<li id="link3">Services</li>
<li id="link4">Projects</li>
<li id="link5">Contact Us</li>
<div id="menuline-container">
<div id="menuline"></div>
</div>
</ul>
<!-- <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?> -->
</nav>
Please help me on this one :)
Thanks
Just some ideas that may help
Firstly create real page links for each menu item not just # as the below code depends on what page link is the current page to work
Secondly you have getton rid of the "$("#example-one").append("");" line of the magicline script and hardcoded the magic line and I am not sure that the animation will work this way
here is some code that relates to the current_page_item class - the animation won't work without something like this
<nav id="main-menu">
<li id="link1" role="navigation" class="page_item <?php if(is_page('home')) echo ' current_page_item'; ?>">Home</li>
<li id="link2" role="navigation" class="page_item <?php if(is_page('about-us')) echo ' current_page_item'; ?>"><a href="about-us" >About Us</a></li>
<li id="link3" role="navigation" class="page_item <?php if(is_page('Services')) echo ' current_page_item'; ?>"><a href="Services" >Services</a></li>
/*this link has multiple pages still highlighting Projects as the current_page_item in the case that you have subpages under one menu link*/
<li id="link4" role="navigation" class="page_item <?php if(is_page('projects')) echo ' current_page_item'; ?><?php if(is_page('project_1')) echo ' current_page_item'; ?><?php if(is_page('project-2')) echo ' current_page_item'; ?><?php if(is_page('project-3')) echo ' current_page_item'; ?>">Projects</li>
<li id="link5" role="navigation" class="page_item <?php if(is_page('contact-us')) echo ' current_page_item'; ?>"><a href="contact-us" >Contact Us</a></li>
</ul>
</nav>