Positioning UL absolutely when parent is overflow hidden - javascript

I'm trying to build a 'mega nav' only I'm running into some issues when I use a custom scrollbar.
My issue is that the custom scrollbar adds markup adding overflow hidden to my nav and as a result the .sub-nav element becomes hidden.
The only solution I can think of is to add position fixed to the .sub-nav element and then position it using JavaScript which very messy and not that reliable.
I've pasted 2 fiddles showing what I mean - I hope these make sense and any advice would be much appreciated!
Thanks
Without Plugin
http://jsfiddle.net/f4qh27n7/11/
With Plugin
http://jsfiddle.net/f4qh27n7/10/
Function to position element
function calcNav(){
if( $('#breadcrumb').length > 0 ){
var b = $('#breadcrumb').offset().top;
var w = $(window).scrollTop();
var x = b - w;
$('.sub-nav').css('top', x);
}
}
calcNav();
var scrollTimeout;
$(window).scroll(function() {
clearTimeout( scrollTimeout );
scrollTimeout = setTimeout( calcNav, 50 );
});

Pretty similar to #Lajon solution.
Just needed a little bit of restructuring:
http://jsfiddle.net/8zxq5jas/4/
Kind of what you where looking for?
$(".js-parent-category")
.on("mouseenter", function() {
var target = $(this).attr("data-sub-nav-target");
var element = $("." + target);
element.addClass("active");
})
.on("mouseleave", function() {
var target = $(this).attr("data-sub-nav-target");
var element = $("." + target);
element.removeClass("active");
});
$(".demo").customScrollbar();
<ul class="products-nav btcf">
<li>Products</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<!-- Products Mega Nav -->
<div class="mega-nav btcf">
<ul class="parent-cat demo gray-skin scrollable">
<li>Parent Category 1</li>
<li>Parent Category 2</li>
<li>Parent Category 3</li>
<li>Parent Category 4</li>
<li>Parent Category 5</li>
<li>Parent Category 6</li>
<li>Parent Category 7</li>
<li>Parent Category 8</li>
<li>Parent Category 9</li>
<li>Parent Category 10</li>
</ul>
<div class="js-sub-nav-1 sub-nav">
<h3>Sub Category 1</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-2 sub-nav">
<h3>Sub Category 2</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-3 sub-nav">
<h3>Sub Category 3</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-4 sub-nav">
<h3>Sub Category 4</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-5 sub-nav">
<h3>Sub Category 5</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-6 sub-nav">
<h3>Sub Category 6</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-7 sub-nav">
<h3>Sub Category 7</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-8 sub-nav">
<h3>Sub Category 8</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-9 sub-nav">
<h3>Sub Category 9</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-10 sub-nav">
<h3>Sub Category 10</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
</div>

My suggestion would be to move all your sub-nav's out of the demo parent.
I would change the DOM structure to something as:
<div class="mega-nav">
<div class="sub-nav"></div>
<div class="sub-nav"></div>
<div class="sub-nav"></div>
<ul class="parent-cat demo gray-skin">
<li>Parent Category</li>
<li>Parent Category</li>
<li>Parent Category</li>
</ul>
</div>
After changing the DOM structure to the one above you can use index() to target relevant content on hover:
var tid;
$('.sub-nav').hide();
$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseenter", function () {
$('.sub-nav').hide();
clearTimeout(tid);
$($(".sub-nav")[$(this).index()]).show();
});
$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseleave", function () {
tid = setTimeout(function () {
$('.sub-nav').hide();
}, 1000);
});
$(".demo").customScrollbar();
Working fiddle

Related

How to copy contents of list items from one list to another

I need to copy the contents of each <li> in a list to a corresponding <li> in another list. So the first item from #list1 would go into the first item of #list2. The third item of #list1 would go into the third item of #list2.
Here is my html:
<ul id="list1">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
</ul>
<ul id="list2">
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
</ul>
I tried the following, but it copies the whole <li> elements, and I only want to copy the text inside each <li>:
$(newList).html($(oldlist).html());
Then I tried this, but couldn't get it to work:
var headings = '';
$("#list1 li").each(function(idx, li) {
headings = $(li).html();
});
$("#list2 li").each(function(idx, li) {
var items = $(li).html();
$( items ).html( headings );
});
Any ideas? Thank you!
Please try to do it with below code
const list1 = document.querySelectorAll('#list1 li'),
list2 = document.querySelectorAll('.list2');
list2.forEach((list) => {
const newList = list.querySelectorAll('li');
list1.forEach((li, index) => newList[index] ? newList[index].textContent = li.textContent : '');
})
<ul id="list1">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
</ul>
<ul class="list2">
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
</ul>
<ul class="list2">
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item yes">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
<li class="item">COPY GOES HERE</li>
</ul>

A simple vertica menu accordion JavaScript Jquery

I'm trying to make a simple accordion menu
When you click on the menu the submenus are shown:
When you click "A" or "B" or "C", your respective submenu will be displayed
If the submenu of the letter is open, the only way to close it is to click on the letter again
did not get the way to just apply the jquery to the clicked class
https://jsfiddle.net/mafervemg/g0rb9xL1/
$(document).ready(function () {
$(".submenu").slideDown(); // open web there all submenu close
$(".UP").click(function () {
$(".submenu").slideUp();
});
$(".DOWN").click(function () {
$(".submenu").slideDown();
});
});
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>A</li>
<li>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>B</li>
<li>
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>C</li>
<li>
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>
You need to change a bit in your html and js
Have a look at Js below:
$(document).ready(function () {
$("submenu").slideDown(); // open web there all submenu close
$(".toggle").addClass('open');
$(".UP").click(function () {
$(".submenu").slideUp();
$(".toggle").removeClass('open');
});
$(".toggle").click(function(){
if($(this).hasClass("open")){
$(this).parent().find(".submenu").slideUp();
} else {
$(this).parent().find(".submenu").slideDown();
}
$(this).toggleClass('open');
})
$(".DOWN").click(function () {
$(".submenu").slideDown();
$(".toggle").addClass('open');
});
});
and change html
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li><a href="#" class='toggle'>A</a>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li><a href="#" class='toggle'>B</a> <ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul></li>
<li><a href="#" class='toggle'>C</a> <ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul></li>
</ul>
Error:$ is not defined is because jQuery has not been included properly
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
I slightly changed your code, Hope you can understand
$(document).ready(function() {
$("submenu").slideDown(); // open web there all submenu close
$('.toggle-menu').addClass('opened');
$(".UP").click(function() {
$(".submenu").slideUp();
$('.toggle-menu').removeClass('opened').addClass('closed');
});
$(".DOWN").click(function() {
$(".submenu").slideDown();
$('.toggle-menu').removeClass('closed').addClass('opened');
});
$('.toggle-menu').click(function() {
if ($(this).hasClass('opened')) $(this).removeClass('opened').addClass('closed').siblings('.submenu').slideUp();
else $(this).removeClass('closed').addClass('opened').siblings('.submenu').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>
A
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>
B
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>
C
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>

jQuery UI Sortable Multiple element target

I have 2 list element
<div id="list-one">
<ul class="ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?
I want get the result like
<div id="list-one">
<ul class="ul-one">
<li data-order="2">item 2</li>
<li data-order="1">item 1</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="2">item 5</li>
<li data-order="1">item 4</li>
<li data-order="3">item 6</li>
</ul>
</div>
just drag ul-one element
Thanks for the answer
Sorry for misunderstand the question.
This is a working solution. I added id tag to easy call
http://jsfiddle.net/39ZvN/1141/
Try this
<div id="list-one">
<ul class="sort ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="sort ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
$( '.sort li' ).each(function() {
var position = $(this).data('order');
$(this).siblings().eq(position+1).after(this);
});

Get li Element Text When Click on that Element

I have this code. When I click on any li element then the first alert it shows its value, then show its parent then again that parent and so on. I just want to show the text of the clicked li element. How can I do that?
$('#container li').on('click', function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>
Your first issue is that you need to stop the proprgation of the event from the clicked li to the parent li elements. You can call stopPropagation on the passed event handler to do that.
Secondly, I assume you only want to retrieve the child text value of the li, not the text of it's descendants, in which case you would need to use contents()[0] to access it. Try this:
$('#container li').on('click', function(e) {
e.stopPropagation();
var text = $(this).contents()[0].nodeValue.trim();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>
Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>

Dropdown submenu issue

I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D
I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>

Categories