I tried changing in a condition statement but it did not work. The question is as follows.
How to toggle the active class while removing the class from siblings on owl carousel drag?
<div id="resource-hashes">
<div class="container">
<a href="#" id="resource-link" class="active">
<span>Startup Resources</span>
</a>
<a href="#" id="business-link">
<span>Business Resources</span>
</a>
</div>
</div>
var owl = $('#resources');
owl.owlCarousel();
//custom buttons on click actions
owl.on('dragged.owl.carousel', function() {
$('#resource-hashes .container > a').removeClass('active').siblings().toggleClass('active');
});
Related
I have a question for you.
I have a sidebar with a dropdown "toggle buttons". The code HTML are the following.
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item" id="sidebar">
<a class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1" href="#firstSubmenu" data-toggle="collapse"
aria-expanded="false" class="dropdown-toggle">Performance Monitoring<span data-feather="plus-circle"></span></a>
<ul class="collapse list-unstyled" id="firstSubmenu">
<li>
<a class="nav-link" href="#">
<span data-feather="monitor"></span>
Dashboard</a>
</li>
<li>
<a class="nav-link" href="/conto_economico">
<span data-feather="trending-up"></span>
Conto Economico</a>
</li>
....
All works perfectly, but If I open my dropdown menu and after I update or change the url page, the dropdown menu collapse and I'm force do open it again.
So I looked for a jQuery code that give me the possibility to achive my aim. I fund that it's possibile to use localStorage to memorize if a dropdown menu is open or not and when upload the page give the same opened and closed dropdown menu.
I have tried to adapt the code for my aim, but I'm not good at jQuery code. I have tried the following code but does not work
$("#sidebar li a").on("click", function() {
// get index of parent `<li>` within it's siblings
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
localStorage.setItem("sidebar_selected", selected_item_index);
});
$(function() {
$("#sidebar li").eq(parseInt(localStorage.getItem("selected_item_index "))).addClass("active").siblings().removeClass('active');
});
You have set the container as li element and you are trying to find its index in set of anchor element. You need to instead find the index in set of li element. like this
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
Also, You may want to remove the active class from other sibling elements after setting the li class active using setStorage. Also, the keyname used for getstorage and setstorage are different. They should be same instead
$("#sidebar li").eq(parseInt(localStorage.getItem("sidebar_selected "))).addClass("active").siblings().removeClass('active');
I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.
This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!
This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>
I have a mobile menu button that has an animation, the class changes on click of the menu and click backs to normal when clicked again. A menu also pops out on click.
I want the animation end state to also click back to normal when I click one of the pop out menu anchor links.
Here is my HTML code:
<div class="o-grid__item">
<button id="menu" class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</div>enter code here
<nav class="main-menu">
<ul>
<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>
<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>
<li>
<a href="#contact">
<i class="fa"></i>
<span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>
Here is the script I'm using to toggle the menu
$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});
Here is the code for the remove/add class for animating the button.
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
I need to know how to add remove this class for the menu button, on click of one of my list items in my list? any help much appreciated.
to remove a class from an element instead of just toggling it, use the .removeClass extension for the JQuery element selector. Add this to the anchor links
If you are using jquery anyways, then use this for the class toggling logic
$(".main-menu ul li a").click( function(){
e.preventDefault();
$(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active");
});
I have a functional side navigation that toggles in and out of display. Here is the "Filter" button...
<a href="#menu-toggle" style="background-color:black; color:white;" class="btn btn-default page-header" id="menu-toggle">
<span style="position:relative; top:2px; right: 5px;"class="glyphicon glyphicon-resize-horizontal"></span>
Filter</a>
and the JQuery...
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
When I add another clickeable link to toggle the same menu it breaks down but I can't understand why? I've changed the menu-toggle id to a class but that didn't help.
Here is the code that doesn't work i.e. the second clickable link that should give the same toggle effect...
<li class="sidebar-brand">
<a href="#" id="menu-toggle">Collapse
</a>
</li>
Add a class instead of an ID for multiple elements being operated on.
$(".menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Change <a id="menu-toggle"></a> to <a class="menu-toggle"></a>
I have a side menu that displays offcanvas. When you click the button, the canvas pushes left and opens the menu. I would like the menu to collapse and not remain open when a link is selected.
Here is the HTMl:
<header>
<nav class="menu" id="theMenu" ng-controller="MenuCtrl">
<div class="menu-wrap">
<a ng-href="/"><img src="/images/zj-logo.png" alt="Zach Janice" class="logo"></a>
<i class="fa fa-times menu-close"></i>
<a ng-href="/">Home</a>
<a ng-href="#/about">About</a>
<a ng-href="#/projects">Projects</a>
<a ng-href="#/services">Services</a>
<a ng-href="#/contact">Contact</a>
</div><!-- menu-wrap -->
<div id="menuToggle" class="active">
<i class="fa fa-bars"></i>
</div><!-- menuToggle -->
</nav>
</header>
jQuery:
(function(jQuery){
// Menu settings
jQuery('#menuToggle, .menu-close').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});
})(jQuery);
Any Help is greatly appreciated. Thanks in advance.
-Z
Since you're using toggleClass, you can just add .menu-wrap a to your selector which should toggle it off when clicked. The links won't be in view unless the classes are added, so you won't get any mis-clicks.
jQuery('#menuToggle, .menu-close', '.menu-wrap a').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});