I am trying to setup a wizard-style theme on one of my pages for building a profile, and I want to be able to toggle the class of the pill nav on bootstrap by clicking next, although I am not entirely sure how to do so. My nav for the tabs layout is like this:
<!-- Nav tabs -->
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">aaa</li>
<li role="presentation">bbb</li>
<li role="presentation">ccc</li>
<li role="presentation">ddd</li>
</ul>
My buttons look something like this, and they work, but they don't toggle the "active" class on the corresponding nav-pills:
Next
Is there a way I an target the nav-pills to toggle the active class?
$('.nav-tabs > .active').next('li').find('a').trigger('click');
This JQuery code in next button click may helps you to set next item in list as active.
Also i think that you should remove href="#bbb" from 'Next' button.
Related
I have a simple 2 level dropdown nav in bootsrap with the code below:
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav pull-left">
<li>Főoldal</li>
<li class="dropdown">
Iskolánk
<ul class="dropdown-menu">
<li>Alapadatok</li>
<li>Még egy teszt menü</li>
<li>Osztályok</li>
<li>Teszt menüpont valami</li>
</ul>
</li>
<li class="dropdown">
Információk
<ul class="dropdown-menu">
<li>Teszt, infók menüpontba</li>
</ul>
</li>
<li>Árlista</li>
<li>Hírek</li>
<li>Képgaléria</li>
<li>Dokumentumok</li>
<li>Kapcsolatfelvétel</li>
</ul>
</div>
I added this css to the style file, because i want to show the submenu on hover, not clicking a nav item.
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
When i click the "iskolánk" nav item, and move the cursor to the submenu, the "Iskolánk" nav item will get a white background, that shows me, that this is the active item, and also shows the submenu.
If i dont click the "Iskolánk" nav item, only just hover it, the submenu shows up, but if i move the cursor to the submenu, the "Iskolánk" nav item looses the white background, and it doesnt show that that is the active nav item.
How can i do that? I want to show the submenus always on hover, and not by clicking the parent. The bootstrap css and js file is from the bootstrap website, i dont change anything in them.
The problem is when you are moving to the submenu, cursor leaves the menu (parent) so the CSS hover does not work on it. So to solve this you can write a simple jquery code which keeps the hover effect on the parent(menu) when you are moving to the submenu. but remember, when you are leaving that submenu, you have to remove that effect from the parent.
Add this code snippet to your HTML file.
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-menu').hover(function(){
$(this).parent().css({background:'#eee'});
})
$('.dropdown-menu').mouseleave(function(){
$(this).parent().css({background:'#fff'});
})
})
</script>
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
I'm wondering if anybody could help. I'm using a Bootstrap Template from wrapbootstrap, called "Black Pearl". It contains a dropdown style menu that is structured like the below; It creates a menu with options, and you can specify submenus which drop down when the main option is clicked - as per example below. "Customers" is the main heading, and "New Cutomer" drops down when customers is clicked.
<ul class="side-menu shadowed">
<li> <a class="navmenu" url="login.php?" href="#"><i class="icon-home"></i>Home</a>
</li>
<li class="submenu"> <i class="icon-address-book"></i>Customers
<ul>
<li>New Customer
</li>
</ul>
</li>
</ul>
The javascript which i think runs this...
/* --------------------------------------------------------
Side Menu
-----------------------------------------------------------*/
(function(){
$('.side-menu > li.submenu > a').unbind();
$('.side-menu > li.submenu > a').click(function(e){
e.preventDefault();
if (!$(this).next('ul').is(":visible")) {
$('.side-menu > li ul').slideUp(150);
$(this).next('ul').slideDown(150);
}
else {
$(this).next('ul').slideToggle(150);
}
});
})();
Anyone have any ideas how i could toggle the menu change from a link outside the menu?
Thanks a lot :)
You can find the target menu trigger and programatically trigger a click event...
like if you want to trigger the customers menu, for easy selection of the element add a Class to the anchor element as given below
<li class="submenu"><i class="icon-address-book"></i>Customers
then
$('a.customers').click()
I want to be able to automatically scroll down when a link in the navbar is clicked. Right now when links in the navbar are clicked the page reloads and returns to the top of the page. I used JQuery to hide the sections that aren't selected now I need to add the scroll method when a link is clicked. OR build it so that when the navbar link is selected, the page reloads with the new unhidden section, and the page moves down to the navbar. I would like to see both methods if possible.
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
You need to provide an ID for the link to point to. If you only link to '#', the page will simply reload.
This link will jump to the corresponding ID on the H2
Click to move to ID 'myLink'
<h2 id="myLink">My link</h2>
As for the jQuery, did you use .hide(), .toggle() or .remove()?
.hide() does exactly that, but doesn't delete it from the DOM.
.toggle() switches between visible and invisible.
.remove() actually deletes your target from the DOM, and it can't be manipulated after that.
I am trying to change the class of a tab on the dashboard depending upon the page selected.
I have 3 tabs in the dashboard like
<div>
<ul class="menu">
<li class="MenuDashboard"><a href="#" >Dashboard</a></li>
<li class="MenuSearch">Search</li>
<li class="MenuAccountSetup">Account Set up</li>
</ul>
</div>
Now I want to highlight the tab when I select that particular tab. By default the 'Dashboard' tab should be highlighted. I have a style class called "current" which highlights the tab.
Please advise.
This should work:
$('.menu li').click(function() {
$(this).addClass('current').siblings().removeClass('current');
});
// Clicks on the first menu item to style it
$('.menu li').eq(0).click();