I am trying to make a custom mobile menu. The idea is when user clicks on the chevron-right it will slideToggle the children UL and add class to the current LI (active) as well as it will display: block "chevron-down" and display: none "chevron-right". In other words the arrow will be changed from right to down.
jQuery(function(){
jQuery("#menu-main-menu-m li i.fa-chevron").click(function() {
if(jQuery(this).closest("li").children("ul").length) {
jQuery(this).toggleClass('active');
jQuery(this).children('ul').slideToggle(500);
}
else {
}
});
});
Here is the HTML
<ul id="menu-main-menu-m" class="menu"><li id="menu-item-3" class="menu-item-has-children menu-item-3 menu-item-ancestor">Open Account<i class="fa fa-chevron-right"></i><i class="fa fa-chevron-down"></i><ul class="sub-menu"><li>....</li><li></li></ul>
I think this is what you are looking for:
$("#menu-main-menu-m i[class*='fa-chevron']").click(function() {
if($(this).closest("li").children("ul").length) {
$(this).text($(this).text() == "Right" ? "Down" : "Right");
$(this).closest("li").children("ul").toggleClass('active');
$(this).closest("li").children("ul").slideToggle(500);
}
});
http://jsfiddle.net/rzseLj27/2/
Basic idea using CSS and binding the click event to the elements.
jQuery(function() {
jQuery("#menu-main-menu-m").on("click", "li i.fa", function() {
console.log("here");
var li = $(this).closest("li");
li.toggleClass("active");
li.find(".sub-menu").slideToggle();
});
});
.menu li i {
display: inline-block;
cursor: pointer;
}
.menu li.active i {
display: none;
}
.menu li i + i {
display: none;
}
.menu li.active i + i {
display: inline-block;
}
.sub-menu { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul id="menu-main-menu-m" class="menu">
<li id="menu-item-3" class="menu-item-has-children menu-item-3 menu-item-ancestor">Open Account<i class="fa fa-chevron-right"></i><i class="fa fa-chevron-down"></i>
<ul class="sub-menu">
<li>....</li>
<li></li>
</ul>
</li>
</ul>
Related
When I hover parent element his child is appear. When I click parent element his child also appear and when I click it again his child disappear. But then(after clicking parent element for disappearing child) when I hover parent element his child is not appearing. Why?
var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');
parent.addEventListener('click', function () {
if (children.style.display == 'block') {
children.style.display = 'none';
} else {
children.style.display = 'block';
}
});
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover ul {
display: block;
}
li {
width: max-content;
}
ul {
padding: 0px;
}
<body>
<nav>
<ul>
<li>Parent
<ul>
<li>child</li>
<li>child</li>
</ul>
</li>
</ul>
</nav>
</body>
Thanks.
It is easier to toggle a class when the parent is clicked.
var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');
parent.addEventListener('click', function() {
children.classList.toggle("showIt");
});
nav>ul>li>ul {
display: none;
}
nav>ul>li:hover ul {
display: block;
}
li {
width: max-content;
}
ul {
padding: 0px;
}
.showIt {
display: block;
}
<body>
<nav>
<ul>
<li>Parent
<ul>
<li>child</li>
<li>child</li>
</ul>
</li>
</ul>
</nav>
</body>
You can easily avoid this by setting children.style.display to the empty string instead of assigning none to it when you want to hide the children.
EDIT:
Need a correction: Instead of undefined the empty string needs to be assigned to children.style.display to drop the override (see the text marked in italics - I had to correct that).
The code snippet should look like this:
var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');
parent.addEventListener('click', function () {
alert(children.style.display);
if (children.style.display == 'block') {
children.style.display = '';
} else {
children.style.display = 'block';
}
}, true);
Use basic programming composition
$('#target').on('click mouseover', function () {
// Do something for both
});
I'm trying to make a carousel-like navigation and subnavigation.
This script works almost as I expected:
https://jsfiddle.net/xpvt214o/23270/
Here is how it should work:
If the navigation overflows, make next arrow visible.
If we scroll right, make the left arrow visible.
Hide both arrows if the navigation does not overflow.
In the first script I have a few problems:
1) Prev and next arrows from both navs work for first nav
2) When I scroll right and really get to the end of the navigation, I need to click the next arrow once more before it hides.
To make appropriate arrows work with their navigations I wrap my main code in a function and replace $('.go-left') to nav.find('.go-left') and same for the right arrow. Here's the code:
https://jsfiddle.net/0z5u4vyt/5/
The arrows are supposed to work but they don't. Please, I need your help!
in your javascript code var prevArrow = nav.find('.go-left'); and var nextArrow = nav.find('.go-right'); don't get value so change your code to
var prevArrow = nav.siblings('.go-left');
var nextArrow = nav.siblings('.go-right');
function navCarousel(el) {
var nav = el;
var navFirstItem = nav.find('li:first-child');
var navLastItem = nav.find('li:last-child');
var prevArrow = nav.siblings('.go-left');
var nextArrow = nav.siblings('.go-right');
function checkNavOverflow() {
if (nav.prop('scrollWidth') > nav.width() &&
(nav.find('ul').width() - navLastItem.offset().left) < 51) {
nextArrow.css('display', 'block');
} else {
nextArrow.css('display', 'none');
}
if (navFirstItem.offset().left < 15) {
prevArrow.css('display', 'block');
} else {
prevArrow.css('display', 'none');
}
}
checkNavOverflow();
$(window).on('resize', function() {
checkNavOverflow();
// console.log(nav.find('ul').width() - navLastItem.offset().left);
});
prevArrow.click(function() {
var pos = nav.scrollLeft() - 200;
nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
});
nextArrow.click(function() {
var pos = nav.scrollLeft() + 200;
nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
});
}
navCarousel($('.category-navigation .category-navigation-container'));
navCarousel($('.subcategory-navigation .subcategory-navigation-container'));
body {
background: #20262e;
padding: 0;
margin: 0;
font-family: Helvetica;
}
.category-navigation, .subcategory-navigation {
background-color: #fff;
position: relative;
border-bottom: 1px solid grey;
}
.category-navigation-container, .subcategory-navigation-container {
overflow: hidden;
}
.category-navigation ul, .subcategory-navigation ul {
list-style: none;
display: flex;
white-space: nowrap;
}
.category-navigation ul li, .subcategory-navigation ul li {
padding: 20px;
}
.category-navigation .go-left, .subcategory-navigation .go-left, .category-navigation .go-right, .subcategory-navigation .go-right {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 20px;
height: 20px;
background-color: grey;
z-index: 9;
border-radius: 50%;
padding: 10px;
text-align: center;
}
.category-navigation .go-left, .subcategory-navigation .go-left {
left: 0;
}
.category-navigation .go-right, .subcategory-navigation .go-right {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-navigation">
<div class="go-left">←</div>
<div class="category-navigation-container">
<ul>
<li>Category Item 1</li>
<li>Category Item 2</li>
<li>Category Item 3</li>
<li>Category Item 4</li>
<li>Category Item 5</li>
<li>Category Item 6</li>
<li>Category Item 7</li>
<li>Category Item 8</li>
<li>Category Item 9</li>
</ul>
</div>
<div class="go-right">→</div>
</div>
<div class="subcategory-navigation dropdown">
<div class="go-left">←</div>
<div class="subcategory-navigation-container">
<ul>
<li>
<a href="#">
<div>Subitem 1</div>
</a>
</li>
</ul>
</div>
<div class="go-right">→</div>
</div>
Having a situation here!
I have multiple images in a div. On click of the image, it should toggle something like select and de-select but, at a time only one image should be selected on Click event or none.
Now, when using CTRL+Click, I should be able to select/toggle other images also, something like multi-select.
Following is my code for single-select
jQuery toggleClass with single select on - on both left click and right click
$(document).on('click', '#snapshotsRpt img', function(e) {
e.preventDefault;
$('#snapshotsRpt img.htmlView_img_select_toggle').not(this).removeClass('htmlView_img_select_toggle');
$(this).toggleClass('htmlView_img_select_toggle');
});
$(document).on('mousedown', '#snapshotsRpt img', function(e){
if(e.which == 3){
e.preventDefault;
$('#snapshotsRpt img.htmlView_img_select_toggle').removeClass('htmlView_img_select_toggle');
$(this).addClass('htmlView_img_select_toggle');
}
});
This is what I tried doing for ctrl-click but something is not quite right.
$(document).on('click', '#snapshotsRpt img', function(e) {
e.preventDefault;
// To detect ctrl + click
if(e.ctrlKey) {
//alert("need to select multiple");
$(this).toggleClass('htmlView_img_select_toggle');
}
});
Any direction will be helpful. Thank you!
Here is the demo which will hek
$(document).ready(function () {
$(".selectOption").click(function (e) {
if (e.ctrlKey) {
$(this).toggleClass("selected");
} else {
if ($(this).hasClass("selected")) {
$(".selectOption").removeClass("selected");
} else {
$(".selectOption").removeClass("selected");
$(this).addClass("selected");
}
}
});
});
.selectOption{
height:30px;
width:30px;
background:red;
margin-bottom:2px;
}
.selected{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
May be this is not what you are expecting. But this could do the trick. **jQueryUI** has an interaction called **Selectable**
So the structure should be,
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
CSS:
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
Script:
$(function() {
$( "#selectable" ).selectable();
});
A working Fiddle
I'm creating a team members page and I used this thread to help me out a little.
Fade Out/Fade In of List Items
I have everything working as I want except I can't figure out how to make the other people in
my gallery stay active (red border) and hide the other description of the team members on page load. ( On page load scroll down to see what I mean. )
Here is the code I'm working with.
HTML
<div class="grid_6">
<div id="staffDirectory">
<ul class="team list-image clearfix">
<li class="selectedMember">
<img src="images/team/head1.jpg" class="max-img headshots" />
</li>
<li><img src="images/team/head2.jpg" class="max-img headshots" /></li>
<li><img src="images/team/head3.jpg" class="max-img headshots" /></li>
...
</ul>
</div>
</div><!--End 6-->
<div class="grid_6">
<div id="staffMember">
<ul>
<li class="staffSelected">
<div class="box white-bg">
<img src="images/team/head1.jpg" class="headshots-red" />
<h2 class="red3-tx bold">John Doe 1</h2>
<h3 class="blue4-tx" style="font-weight:400; font-style:italic;">Position: Manager</h3>
<p class="blue3-tx">text</p>
</div>
</li>
...
</ul>
</div>
CSS
#staffDirectory ul li
{
opacity: 0.9;
}
#staffDirectory li:hover{
opacity: 1;
}
.selectedMember {
opacity: 1.0 !important;
}
.staffSelected {
display: inherit;
}
#staffMember li:not(.staffSelected) {
display: none;
}
.team li{
display:inline-block;
float:left;
margin-bottom: 10px;
margin-right: 8%;
width:28%;
cursor: pointer;
}
.headshots{
border:5px solid #034A68;
}
.headshots:hover{
border:5px solid #981B1E;
}
.headshots:active{
border:5px solid #981B1E;
}
.headshots-red{
border:5px solid #981B1E;
margin-bottom:25px;
height: auto;
width: 98%;
}
JS
<script>
$(document).ready(function()
{
$("#staffDirectory ul li").click(function()
{
var index = $("#staffDirectory ul li").index(this);
var newMember = null;
newMember = $("#staffMember ul li").get(index);
$(".staffSelected").fadeOut(500);
setTimeout(function() {
$(newMember).fadeIn(500).addClass('staffSelected');
}, 500);
});
});
</script>
Sorry for the code dumb, just not sure where the problem is.
Any help would be appreciated.
Thank you.
EDIT!!! WORKING VERSION
Here is the completed working version of this employee gallery. Thank you to the people that helped me out. Hope someone else can find this useful.
http://codepen.io/daugaard47/pen/ctHru
First off all: Red border.
CSS
.selectedMember>img {
border-color: #981B1E;
}
Second: Hide unselected team members
CSS
#staffMember li {
display:none;
}
#staffMember li.staffSelected {
display:inherit;
}
Note that you created the second #staffMember with the 'staffSelected' class. Only the first one has to have it..
EDIT
Try this JS script:
$(document).ready(function()
{
$("#staffDirectory ul li").click(function()
{
var index = $("#staffDirectory ul li").index(this);
$('.staffSelected').fadeOut(500);
$('.selectedMember').removeClass('selectedMember');
$(this).addClass('selectedMember');
setTimeout(function() {
$('.staffSelected').removeClass('staffSelected');
$("#staffMember ul li:eq("+index+")").fadeIn(500).addClass('staffSelected');
}, 500);
});
});
Try simulating a click event on the first element of the directory after you define the click handler:
$(document).ready(function() {
$("#staffDirectory ul li").click(function() {
var index = $("#staffDirectory ul li").index(this),
newMember = $("#staffMember ul li").get(index);
$(".staffSelected").fadeOut(500, function () {
$(this).removeClass('staffSelected');
$(newMember).fadeIn(500).addClass('staffSelected');
});
});
$("#staffDirectory ul li:first-child").click();
});
I've gotten my menu to expand by one level, but cannot figure out how to get it to expand a second time. What am I doing wrong?
HTML:
<ul id="nav">
<li>Root
<ul>
<li>Option 1
<ul>
<li>Link3</li>
<li>Lin4</li>
<li>Link5</li>
<li>Link6</li>
</ul>
</li>
<li>Option2
<ul>
<li>Link3</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
ul {
padding: 0px;
margin: 0px;
list-style: none;
background-color: #53BF58;
width: 10em;
}
li ul {
display: none;
background-color: #86EF8A;
}
li.active ul {
display: block;
}
li ul li ul {
display: none;
background-color: #86EF8A;
}
li ul li.active ul {
display:block;
}
Javascript:
function hideAll() {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.className = node.className.replace(new RegExp("\s?active", "i"), "");
}
}
}
window.onload = function () {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.onclick = function() {
hideAll();
this.className += " active";
}
}
}
}
childNodes only contains the direct children of the element--you need to recurse the childNodes of each node as well.
I highly recommend that you use a framework like jQuery (http://jquery.com) to make the code simpler:
http://jsfiddle.net/jDEhU/5/
$('#nav').delegate('li', 'click', function() {
var self = $(e.target), //get a reference to the clicked element
active = self.parents().andSelf() //select all li's that should be active
.addClass('active'); //and activate them
$('#nav .active').not(active).removeClass('active'); //deactivate others
});
I think the problem is that you're only looping through the first level of nodes in your list. You need to go through the child elements of each subsequent list and add an onClick function to keep it expanding.