We Keep Coding

unable to hide the ul if it has no li inside it

I am trying to hide the ul, on page and also using ajax because some parts of the website are ajax based.
<ul class="sub-nav-20-m" id="filtersList_m">
</ul>
so here is the code i am trying but it is not doing anything
window.onload = function(){
alert("hi");
$(".sub-nav-20-m").each(function(){
if($(this).children().length == 0){
$(this).hide();
} else{
$(this).show();
}
}
}

You can use CSS for this:
.sub-nav-20-m:empty {
display: none;
}
See here

It might be useful to first check for empty LI tags for whatever reason and remove them, then if the element is empty, hide it. As a separate function, you could call it after window.onload or after an ajax transaction.
window.onload = function() {
setTimeout(function() {
hideEmptyULs()
}, 2000)
}
function hideEmptyULs() {
$('ul').each(function() {
$(this).children().each(function() {
if ($(this).children().length === 0) $(this).remove()
})
if ($(this).children().length === 0) $(this).hide()
});
}
ul {
border: 1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class='thing'></ul>
<ul class='thing2'>
<li></li>
</ul>

Dropdown Menu Closes On Hover (Error)

Whhenever I hover over the menu it works fine. But, when I try to get to the submenu links and children, the menu closes
/*----------------------------------------------------
/* Dropdown menu
/* ------------------------------------------------- */
jQuery(document).ready(function($) {
function mtsDropdownMenu() {
var wWidth = $(window).width();
if (wWidth > 865) {
$('#navigation ul.sub-menu, #navigation ul.children').hide();
var timer;
var delay = 100;
$('#navigation li').hover(
function() {
var $this = $(this);
timer = setTimeout(function() {
$this.children('ul.sub-menu, ul.children').slideDown('fast');
}, delay);
},
function() {
$(this).children('ul.sub-menu, ul.children').hide();
clearTimeout(timer);
}
);
} else {
$('#navigation li').unbind('hover');
$('#navigation li.active > ul.sub-menu, #navigation li.active > ul.children').show();
}
}
mtsDropdownMenu();
$(window).resize(function() {
mtsDropdownMenu();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-513" class="menu-item "><i class="fa fa-calculator"></i> OFFERTE AANVRAGEN
<ul class="sub-menu">
<li id="menu-item-1146" class="menu-item">Zonnepanelen installatie (België)
</li>
<li id="menu-item-1144" class="menu-item">Zonnepanelen reinigen (België)
</li>
<li id="menu-item-1145" class="menu-item">Zonnepanelen installatie (Nederland)
</li>
</ul>
</li>

The code you posted works just fine; here's a plnkr to prove it: https://plnkr.co/edit/IFaueUhKE3J1K9vY1NkQ?p=preview
(simply wrapped a <div id='navigation'><ul> round the top li).
If you still loose the hover over the child-elements, it's caused by something you're not showing in the original question. E.g. adding this css:
li.menu-item {
position: relative;
top: 50px;
left: 300px;
}
would make it difficult to reach the child items because you, briefly, lose the parent-hover while moving to the child.

JQuery contextmenu Not Working On Appended Elements

JSFiddle Demo
On my mail side nav I have a custom right-click hijack of which I have just made it so you can add a new sub-folder as partly seen below;
if ($(this).hasClass('NewSubFolder')) {
if($('ul.inbox-nav li.Clicked').find('ul').length) {
$('ul.inbox-nav li.Clicked > ul').prepend("<li class='NewSubFolder'><input type='text'></li>");
} else {
$('ul.inbox-nav li.Clicked').append('<ul><li class="NewSubFolder"><input type="text"></li></ul>');
}
$("ul.inbox-nav li.Clicked").removeClass('Clicked');
}
This will add another tier where there is not one to prepend where there is, an input field. Currently you have to hit the enter key after typing something for the new folder name and then it will have worked its magic...
...However this newly appended list item does not work when you right-click it.

Hopefully this gets what you need done.
Let me know if the comments are not clear enough.
EDIT
Made an edit to combine the two on(contextmenu) calls into one function. No need for redundancy.
$(document).ready(function() {
// Trigger action when the contexmenu is about to be shown
$('#inbox-nav').on("contextmenu", 'a', function(event) {
event.preventDefault();
$('.clicked').removeClass('clicked'); //Gets rid of all other clicked elements
$(this).closest('li').addClass('clicked');
//Clicks the closest li element
var menu = ($(this).is('#inbox-nav>li>a')) ? 'MailMenuFirstTier' : 'MailMenuSecondTier';
/*This is an inline if statement, read in words it goes like this:
if this element is a direct level link, then we're going to need to use the first menu tier.
else we're going to need use the second menu tier.
*/
$("#" + menu).finish().show(100)
//dynamically calls the menu we're using.
.css({
left: event.pageX,
top: event.pageY
}); //Moves the first mail menu to the event position
});
/*
check the element to see which menut to show instead of using two different things.
*/
$(document).on('mousedown', function(e) {
//Mouse down events!
if ($('.custom-menu').is(':visible') && !$(e.target).parent().hasClass('custom-menu')) {
/*
In English:
if a custom menu is visible, AND the target of the click DOES NOT have the custom-menu class, hide the custom menu.
*/
$('.custom-menu').finish().hide();
}
if ($(e.target).parent().hasClass('custom-menu')) {
//Figure out what to do since your element is a child of the custom menu
$('.custom-menu').finish().hide();
var action = $(e.target).data('action');
//Gets our action element
var clicked = $('.clicked');
//gets the clicked element we will be working on.
switch (action) {
case 'new-folder':
//If the clicked element does not have a child ul element, add one.
$('input.rename').focusout();
//Any current input.renames will have their focus out method called
if (clicked.children('ul').length == 0) {
clicked.append($('<ul></ul>'))
}
var ul = clicked.children('ul');
//Either this child element existed before or we just made it the step before.
var input = $('<input />', {
type: 'text',
value: 'New Sub Folder',
class: 'rename',
'data-start': 'New Sub Folder',
focusout: function() {
var value = ($(this).val() == '') ? $(this).data('start') : $(this).val();
$(this).siblings('a').html(value).show();
$(this).remove();
},
autofocus: true
});
//Creates an input tag of type text, with class rename, a placeholder value, and a focusout function.
var anchor = $('<a>', {
href: '#',
css: {
display: 'none'
}
});
//Creates an anchor tag that is originally hidden
ul.append($('<li>').append([input, anchor]));
ul.find('input').click();
//Adds the (should be selected) element and the anchor
//The input element takes care of things from there
break; // end new-folder case
case 'rename-folder':
$('input.rename').focusout();
//any current input.rename items will have their focusout method called
var anchor = clicked.find('a');
//get our closest anchor of our clicked element
anchor.before($('<input />', {
type: 'text',
value: anchor.html(),
class: 'rename',
'data-start': anchor.html(),
focusout: function() {
var value = ($(this).val() == '') ? $(this).data('start') : $(this).val();
$(this).siblings('a').html(value).show();
$(this).remove();
},
autofocus: true
})).hide();
//Creates an input element, adds it before the anchor element,
//hides anchor element. the newly created input element takes care of things from there
break;
/*
ADD NEW ACTIONS HERE
*/
default:
return;
break;
}
}
}).on('keyup', 'input.rename', function(e) {
//Used for laziness. If a user hits enter in the input.rename tag, we fire the focusout target
e.preventDefault();
if (e.keyCode == 13) {
$(e.target).focusout();
}
});
});
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
font-size: 12px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
menu {
position: absolute;
}
.custom-menu .divider {
content: " ";
height: 1px;
margin: 4px 10px;
background: #929292;
}
#MailBodyList.custom-menu li.Title {
color: #929292;
}
#MailBodyList.custom-menu li.Title:hover {
background: #FFF;
cursor: default;
}
#MailBodyList.custom-menu li.ForThisSenderMore {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="inbox-nav" id="inbox-nav">
<li class="active">
<a href="javascript:;" data-type="inbox" data-title="Inbox">
<div class="Arrow"></div>Inbox
</a>
<ul>
<li>Sub-Folder 1
</li>
<li>Sub-Folder 2
</li>
<li>
Sub-Folder 3
<ul>
<li>Sub-Folder 1
</li>
<li>Sub-Folder 2
</li>
</ul>
</li>
<li>Sub-Folder 4
</li>
<li>Sub-Folder 5
</li>
</ul>
</li>
<li>
Important
</li>
<li>
Sent
</li>
<li>
<a href="javascript:;" data-type="draft" data-title="Draft"> Draft
<span class="badge badge-danger">8</span>
</a>
</li>
<li>
<a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
<span class="badge badge-info">23</span>
</a>
</li>
<li>
<a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
<span class="badge badge-warning">2</span>
</a>
</li>
<li>
News
</li>
</ul>
<ul id="MailMenuFirstTier" class="custom-menu">
<li>Mark All As Read</li>
<li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailMenuSecondTier">
<li class="NewSubFolder" data-action="new-folder">New Sub-Folder</li>
<li class="Rename" data-action="rename-folder">Rename</li>
<li class="Delete" data-action="delete-folder">Delete</li>
<li>Mark All As Read</li>
<li>Empty Folder</li>
</ul>

You can use .contextmenu() to overwrite right-clic behavior.
$('.NewSubFolder').contextmenu(function() {
console.log("Right clic detected!");
});
Documentation here: https://api.jquery.com/contextmenu/
I hope it helps! :)

Compare string to each li element

I would like to compare a input against li elements but for some reason it's only checking the last li element. You can see this when running the script below everything with "test" works fine but not for "example" or "example 2"
$(document).ready(function() {
var $input = $('#autocomplete');
$(document).on('keyup', $input, function() {
var $val = $input.val().trim(),
$select = $('.autocomplete-content');
// Check if the input isn't empty
if ($val != '') {
$select.children('li').each(function() {
var $li = $(this),
$html = $li.html(),
$text = $li.text().trim();
// Set input value
$li.click(function() {
$input.val($text);
});
// Check if the value has at least 1 match else hide
if ($text.indexOf($val) !== -1) {
// Remove class hide when input changes and finds a match
if ($li.hasClass('hide')) {
$li.removeClass('hide');
}
// Unhide "ul.autocomplete-content"
if ($select.hasClass('hide')) {
$select.removeClass('hide'); // Show options
}
} else {
$li.addClass('hide');
$select.addClass('hide'); // Hide options
}
});
} else {
$select.addClass('hide');
}
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" class="autocomplete">
<ul class="autocomplete-content hide">
<li><img src="test.jpg"> example</li>
<li><img src="test.jpg"> example 2</li>
<li><img src="test.jpg"> test</li>
</ul>
So my question is how can I compare the input against each li element. Thanks in advance.
Update
Something I forgot to mention was that in the li element could be an img thats the reason why I used $li.text()

Instead of looping through all the li's when anything is entered in the input, you can try to use the pseudo selector :contains. This finds all elements with the text we have provided and if your intention is to find elements which starts with the search string, then you might need to improvise a little. This thread might be helpful.
$(document).ready(function() {
var $input = $('#autocomplete');
$(document).on('keyup', $input, function() {
var $val = $input.val().trim(),
$select = $('.autocomplete-content');
// Check if the input isn't empty
if ($val != '') {
$select.children('li').addClass('hide')
$select.children('li').filter(function() {
console.log($(this).text().indexOf($val))
return $(this).text().indexOf($val) !== -1;
}).removeClass('hide');
} else {
$select.children().addClass('hide');
}
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" class="autocomplete">
<ul class="autocomplete-content">
<li class="hide"><img src="test.jpg"> example</li>
<li class="hide"><img src="test.jpg"> example 2</li>
<li class="hide"><img src="test.jpg"> test</li>
</ul>

Need to remove $select.addClass('hide');. It's called when the input does not match test, even when it may match example.
$(document).ready(function() {
var $input = $('#autocomplete');
$(document).on('keyup', $input, function() {
var $val = $input.val().trim(),
$select = $('.autocomplete-content');
// Check if the input isn't empty
if ($val != '') {
$select.children('li').each(function() {
var $li = $(this),
$html = $li.html(),
$text = $li.text().trim();
// Set input value
$li.click(function() {
$input.val($text);
});
// Check if the value has at least 1 match else hide
if ($text.indexOf($val) !== -1) {
// Remove class hide when input changes and finds a match
if ($li.hasClass('hide')) {
$li.removeClass('hide');
}
// Unhide "ul.autocomplete-content"
if ($select.hasClass('hide')) {
$select.removeClass('hide'); // Show options
}
} else {
$li.addClass('hide');
//$select.addClass('hide'); // Hide options
}
});
} else {
$select.addClass('hide');
}
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" class="autocomplete">
<ul class="autocomplete-content hide">
<li>example</li>
<li>example 2</li>
<li>test</li>
</ul>

You have to set class hide to li instead of ul On keyup event of #autocomplete iterate through the lis, which one contains the textbox value remove class hide from that and add class hide which one not contains.
$(document).on('keyup', '#autocomplete', function () {
var text = $(this).val();
$('.autocomplete-content li').each(function () {
if ($(this).text().trim().indexOf(text) > -1) {
$(this).removeClass('hide');
} else {
$(this).addClass('hide');
}
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" class="autocomplete">
<ul class="autocomplete-content">
<li class="hide"><img src="test.jpg"> example</li>
<li class="hide"><img src="test.jpg"> example 2</li>
<li class="hide"><img src="test.jpg"> test</li>
</ul>

add paginated dots and text captions to small jQuery carousel

I would like to enhance already implemented slider as seen below; to now have simple dotted pagination and small show caption text area. (Caption text to appear under each image slide)
JSFIDDLE / DEMO Updated Fiddle!
Image sample of dotted-pagination and caption effect I would like to implement:
jQuery:
jQuery(document).ready(function(){
/**
* Check if first li element is hidden
* then show
*/
if( jQuery('.carouselNav li:first-child').is(':hidden') ) {
// Toggle visibility
jQuery('.carouselNav li:first-child').toggle();
}
// Interval time
var carouselInterval = 5000;
// Slider
function carouselSlide(){
// Check if last element was reached
if( jQuery('.carouselNav li:visible').next().length == 0 ) {
// Hide last li element
jQuery('.carouselNav li:last-child').slideUp('fast');
// Show the first one
jQuery('.carouselNav li:first-child').slideDown('fast');
} else {
// Rotate elements
jQuery('.carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
}
}
// Set Interval
var carouselScroll = setInterval(carouselSlide,carouselInterval);
// Pause on hover
jQuery('.carousel').hover(function() {
clearInterval(carouselScroll);
}, function() {
carouselScroll = setInterval(carouselSlide,carouselInterval);
carouselSlide();
});
});
Mark-Up:
<section id="slideShowHold" class="floatLeft"><!-- slider wrap -->
<div class="carousel">
<ul class="carouselNav">
<li>
<img src="images/states/state1.jpg" />
</li>
<li>
<img src="images/states/state2.jpg" />
</li>
<li>
<img src="images/states/state3.jpg" />
</li>
</ul>
</div>
</section><!--slideShowHold-->

HTML :
<div class="carousel">
<ul class="carouselNav">
<li>
<img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513-Sample-grunge-blue-round-stamp.jpg" />
</li>
<li>
<img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513-Sample-grunge-blue-round-stamp.jpg" />
</li>
<li>
<img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513Sample-grunge-blue-round-stamp.jpg" />
</li>
</ul>
</div>
<div class="carouselPagination">
<ul >
<li>
O
</li>
<li>
O
</li>
<li>
O
</li>
</ul>
</div>
</section><!--slideShowHold-->
JS :
jQuery(document).ready(function(){
/**
* Check if first li element is hidden
* then show
*/
if( jQuery('.carouselNav li:first-child').is(':hidden') ) {
// Toggle visibility
jQuery('.carouselNav li:first-child').toggle();
jQuery('.carouselPagination li:first-child').addClass('active');
}
// Interval time
var carouselInterval = 5000;
// Slider
function carouselSlide(){
// Check if last element was reached
if( jQuery('.carouselNav li:visible').next().length == 0 ) {
// Hide last li element
jQuery('.carouselNav li:last-child').slideUp('fast');
// Show the first one
jQuery('.carouselNav li:first-child').slideDown('fast');
jQuery('.carouselPagination li:last-child').removeClass('active');
jQuery('.carouselPagination li:first-child').addClass('active');
} else {
// Rotate elements
jQuery('.carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
jQuery('.carouselPagination active').removeClass('active').next('li').addClass('active');
}
}
// Set Interval
var carouselScroll = setInterval(carouselSlide,carouselInterval);
// Pause on hover
jQuery('.carousel').hover(function() {
clearInterval(carouselScroll);
}, function() {
carouselScroll = setInterval(carouselSlide,carouselInterval);
carouselSlide();
});
});
CSS :
img { max-width: 300px; }
.carousel img {
border: 2px solid #0b0b0b;
}
.carousel {
text-align: center;
}
.carousel ul {
list-style: none;
}
.carousel li {
display: none;
}
li.active{color:red;}
And you can make what you want with li.active and change 'O' to an image or what you want, enjoy.