We Keep Coding

Replace URL using JS in menu only inside li with certain class on mobile

I have a menu like this on my WordPress site:
<ul id="menu-main-menu" class="clearfix"><li id="menu-item-397" class="menu-item-397">About us</li>
<li id="menu-item-1001" class="menu-item-object-custom menu-item-has-children has-dropdown menu-item-1001">OFFER
<ul class="nav-dropdown">
<li id="menu-item-454" class="not_on_mobile menu-item-has-children has-dropdown menu-item-454">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-1569" class="menu-item-1569">Test</li>
<li id="menu-item-1572" class="menu-item-1572">Test</li>
</ul>
</li>
<li id="menu-item-1063" class="not_on_mobile menu-item-has-children has-dropdown menu-item-1063">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-1242" class="menu-item-1242">Test</li>
<li id="menu-item-1243" class="menu-item-1243">Test</li>
</ul>
</li>
<li id="menu-item-508" class="not_on_mobile menu-item-has-children has-dropdown menu-item-508">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-670" class="menu-item-670">Test</li>
<li id="menu-item-1133" class="menu-item-1133">Test</li>
<li id="menu-item-1427" class="menu-item-1427">Test</li>
</ul>
</li>
<li id="menu-item-673" class="menu-item-673">Ortodoncja</li>
<li id="menu-item-443" class="not_on_mobile menu-item-object-custom menu-item-has-children has-dropdown menu-item-443">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-1820" class="menu-item-1820">Test</li>
</ul>
</li>
<li id="menu-item-1160" class="menu-item-object-custom menu-item-1160">Test</li>
<li id="menu-item-741" class="menu-item-741">Test</li>
</ul>
</li>
<li id="menu-item-523" class="menu-item-523">Test</li>
</ul>
The problem is that on mobile, when I click on elements that I called PROBLEM, the URL is triggered and it expands another level of menu but in the same time enters an url I just clicked.
I thought that the fix for this could be to replace this PROBLEM URL's by a link like #menu_on_mobile
All of those PROBLEM url's are the first 'a' items in li which has a 'not_on_mobile' class.
I tried to do it like this:
document.querySelectorAll(".not_on_mobile a:first-child").forEach(a => a.setAttribute('href', '#menu_on_mobile'));
But the problem is that it replaces URL in all 'a' element in not_on_mobile class.
How to edit it to replace only the first element in 'li' and work only on mobile?

Try to select the items this way .not_on_mobile>a. In this way, only the first elements will be selected without taking all the children's elements inside.
I hope I understood the task correctly
document.querySelectorAll(".not_on_mobile>a").forEach(a => a.setAttribute('href', '#menu_on_mobile'));

How to iterate through each parent list items in jquery?

I just started working with jQuery and I'm running into a bit of a snag with iterating through each parent UL's list items.
I have a simple accordion menu where I'm adding transition-delay inline style to each individual list item. The issue I have is that I'm not sure how to iterate through each set of parent's list items.
Below is an example of what is occurring on every list item.
<ul class="sub-menu">
<li style="transition-delay: 0ms;></li>
<li style="transition-delay: 25ms;>
<ul class="sub-menu">
<li style="transition-delay: 50ms;>
<li style="transition-delay: 75ms;>
<li style="transition-delay: 100ms;>
</ul>
</li>
<li style="transition-delay: 125ms;></li>
<li style="transition-delay: 150ms;></li>
<li style="transition-delay: 175ms;></li>
</ul>
This is what I'm looking to achieve:
<ul class="sub-menu">
<li style="transition-delay: 0ms;></li>
<li style="transition-delay: 25ms;>
<ul class="sub-menu">
<li style="transition-delay: 0ms;>
<li style="transition-delay: 25ms;>
<li style="transition-delay: 50ms;>
</ul>
</li>
<li style="transition-delay: 50ms;></li>
<li style="transition-delay: 75ms;></li>
<li style="transition-delay: 100ms;></li>
</ul>
This is what my jQuery looks like:
$('ul.mobile-menu li.menu-item-has-children ul.sub-menu li').each(function(i){
$(this).css({ 'transition-delay': (i*25)+"ms" });
});
Any help would greatly be appreciated as I am just getting started with jQuery. I created a codepen so you can see the menu in action and visually see the issue.
http://codepen.io/creativenauts/pen/wGLqPg

Here is my approach:
$('.sub-menu').each(function() {
// $(this) = single ul element
$(this).children('li').each(function(idx, el){
// idx = index of current list [0 ... number]
// $(el) = single li element
$(el).css('transition-delay', (idx * 25) + 'ms');
});
});
But in this use case (w.r.t. the size of the list) you can and should use CSS, something like this.

You could use .index(), which gives an element's position among its siblings:
$('ul.mobile-menu li.menu-item-has-children ul.sub-menu li').each(function(){
$(this).css({ 'transition-delay': ($(this).index()*25)+"ms" });
});

Like this:
$('ul.mobile-menu li.menu-item-has-children ul.sub-menu').each(function(j, subMenu){
$(subMenu).children('li').each(function(i, li){
$(li).css('transition-delay', (i*25)+'ms')
})
});

jQuery replacing multiple elements with a single one

I'm trying to replace two divs that has separate ul elements into a single one, so I can create a single ul with the li of both, but my current code creates separate ul, and that is not my intended purpose, could anyone enlighten me on how to make the proper selection for these:
my jQuery
$('nav div.moduletable_gfbb_navigationbar, nav div.moduletable_menu_navigationbar').replaceWith(function(){
var html = '<ul class="nav navbar-nav navbar-right">';
$(' ul',this).each(function(){
html += $(this).html();
});
html+='</ul>';
return html;
});
my HTML
<div class="moduletable_menu_navigationbar">
<ul class="menu">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
</div>
<div class="moduletable_gfbb_navigationbar">
<ul class="menu">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
</div>
And the output I get (not what I want)
<ul class="nav navbar-nav navbar-right">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
What I want is a single 'ul', I know I can recode it, but I'm trying to use the less code posible.

Your example does not include a <nav> tag which may be the primary cause of your problem, but to produce more readable code I would do it like this.
I used an array for the selectors, because it aids in readability and maintainability. It also allows you to easily insert the new list before the first menu by using only the first selector, whatever that may be.
Basically I select all of the <li> elements descending from the selectors and move those to the newlist. Then insert the new list before the first list div. Then remove the old lists.
var selectors = [
'nav div.moduletable_gfbb_navigationbar',
'nav div.moduletable_menu_navigationbar'
], selectorText = selectors.join(', ');
var newList = $('<ul class="nav navbar-nav navbar-right">');
$('li', selectorText).each(function(){ newList.append(this); });
$(selectors[0]).before(newList);
$(selectorText).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="moduletable_menu_navigationbar">
<ul class="menu">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
</div>
<div class="moduletable_gfbb_navigationbar">
<ul class="menu">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
</div>
</nav>

$('.moduletable_menu_navigationbar .menu').append($('.moduletable_gfbb_navigationbar .menu').html());
$('.moduletable_gfbb_navigationbar').remove();
Is this what you are looking for!!

Making a nav menu that becomes sticky as the page scrolls down

I have two menus in use on a site I'm building. The second menu is a category menu, and I need to make it stick to the top of the page as a user scrolls down the page to view content. I had it working previously, but had to remove some elements from my header. For whatever reason, it won't work now. Code to follow.
<script type="text/javascript">
function sticky_relocate() {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('#scroller-anchor').offset().top;
if (window_top > div_top)
jQuery('#navbar').addClass('sticky')
else
jQuery('#navbar').removeClass('sticky');
}
jQuery(function() {
jQuery(window).scroll(sticky_relocate);
sticky_relocate();
});</script>
And the menu structure looks like this...
<div id="scroller-anchor"></div>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-category-menu-container">
<ul id="menu-category-menu" class="nav-menu">
<li id="menu-item-1408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1408">
All
</li>
<li id="menu-item-1414" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1414">
Videos
</li>
<li id="menu-item-1409" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1409">
Entertainment
</li>
<li id="menu-item-1412" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1412">
Politics
</li>
<li id="menu-item-1413" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1413">
Sports
</li>
<li id="menu-item-1410" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1410">
Fashion
</li>
</ul>
</div>
</nav><!-- #site-navigation -->
</div>
Help?
EDIT
Forgot to include what was in the sticky class.
.sticky {
position: fixed;
top: 0;
}
EDIT2
Attempted the following fix, still to no avail.
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({ scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky )
{ jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else { jQuery('#navbar').removeClass('sticky'); // remove sticky css class } });
</script>

for anyone interested in making a sticky nav on scroll:
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({
scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky ) {
jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else {
jQuery('#navbar').removeClass('sticky'); // remove sticky css class
}
}
});

Making parent link unclickable in a drop-down menu with jQuery

I have a drop-down menu that are dynamically added through WordPress. It looks like this:
Pictures
Sea
Forest
City
"Sea", "Forest" and "City" is categories with "Pictures" as parent category.
My question is:
How do I make the "Pictures" category unclickable?
I did this with jQuery:
$(document).ready(function(){
//Make parent links unclickable
$(".page-item-3").click(function(){
return false;
});
});
...and this with CSS:
li.page-item-3 a {
cursor:default;
}
.page-item-3 ul li a {
cursor: pointer;
}
Markup looks like this:
<div id="menu" class="jqueryslidemenu">
<ul>
<li class="cat-item cat-item-1 current_page_item">Blabla</li>
<li class="page_item page-item-2">Blabla
<ul>
<li class="page_item page-item-28">Blabla</li>
<li class="page_item page-item-30">Blabla</li>
<li class="page_item page-item-39">Blabla</li>
</ul>
</li>
<li class="page_item page-item-3">Blabla
<ul>
<li class="page_item page-item-5">Blabla 1</li>
<li class="page_item page-item-7">Blabla 2</li>
<li class="page_item page-item-9">Blabla 3</li>
<li class="page_item page-item-11">Blabla 4</li>
<li class="page_item page-item-13">Blabla 5</li>
</ul>
</li>
<li class="page_item page-item-15">Blabla
<ul>
<li class="page_item page-item-222">Blabla</li>
<li class="page_item page-item-224">Blabla</li>
<li class="page_item page-item-226">Blabla</li>
</ul>
</li>
<li class="page_item page-item-17">Blabla</li>
<li class="page_item page-item-36">Blabla</li>
</ul>
</div>
This almost works But the jQuery code makes all the drop-down links unclickable too.
It would be great if anyone knows how to remove the status bar url while hover the "Pictures" link. But I don't think that is possible to make in moderns browsers such as Safari och Firefox?
Thanks!

I don't know what control you have because of Wordpress but you're having this problem because everything is contained in the title list item (page-item-3) and you're cancelling the click on this item. If you can apply a class to the title link itself, you can apply the jQuery to that directly.
Unfortunately you can't say ".page-item-3 a" because this apply to all links in the list.
Re-Edit - This should select the first link in the list and cancel the click value of that. You may need to apply this for each 'title' link you have.
$(".page-item-3 a:first").click(function() {
return false;
}

$(".page-item-3").children("a").click(function(e) {
e.preventDefault();
});
*****or with CSS*****
.unclickable {
z-index:-1;
}
$(".page-item-3").children("a").addClass("unclickable");

just replace the href attribute value with #. That way when the user clicks on it, the page goes to #, which is the same page they are on, and nothing happens. Keep the CSS you wrote so the hand pointer does not appear when they hover it, but remove the jQuery code.
Using jQuery:
$(".page-item-3>a").attr("href", "#")

Try this:
$(document).ready(function(){
//Make parent links unclickable
$("div > ul > li > a").click(function(){
return false;
});
});
This will disable all the first links in your list without needing the class name.

I use this :
$j = jQuery.noConflict();
$j(document).ready(function(){
//Make parent links unclickable
$j("div[id='nav'] > ul > li > a ").removeAttr("href");
});