I have a menu structure like this:
<ul class="menu">
<li class="parent">
<a class="menu-link" href="http://url.com/#Id">Id</a>
</li>
<li class="parent">
<a class="menu-link" href="http://url.com/#Id">Id</a>
</li>
</ul>
and an English version where the menu is like this:
<ul class="menu">
<li class="parent">
<a class="menu-link" href="http://url.com/en/#Id">Id</a>
</li>
<li class="parent">
<a class="menu-link" href="http://url.com/en/#Id">Id</a>
</li>
</ul>
Using scrollspy, I’m detecting which section of the page is currently visible. So I can get the Id part of the anchor link. Now how do I select that specific anchor link?
I tried this:
$('.menu').find(":contains('#" + this.id"')" ).addClass('active');
But that doesn’t work (otherwise I wouldn’t be here!).
:contains will check html()/ text() part of the anchor tag, you need to use attribute selector for href of anchor tag as shown below
$('.menu').find("a[href*='#" + this.id + "']" ).addClass('active');
JSFiddle Demo
More Information on attribute contains selector
what about to separate url (which should be SEO) and set id independent of url query by using data-binding? I hope you are using some template engine to render this html code. If not its ok only one attribute more.
for example:
<ul class="menu">
<li class="parent">
<a class="menu-link" href="http://url.com/en/topic-for-women" data-id="1">Id</a>
</li>
<li class="parent">
<a class="menu-link" href="http://url.com/en/topic-for-men" data-id="2">Id</a>
</li>
For this you can use very simple calling of jquery:
$(".menu .menu-link[data-id='2']").addClass("active");
here s link enter link description here
Related
<li>
<a>Parent Node</a>
<ul>
<li><a>Child 1</a></li>
***<li><a>Child 2</a></li>***
</ul>
</li>
I need to find 'UL' tag and I want to appendTo Child 3 inside 'Ul' at run time.
I'm able to insert the first child but Second child is not inserting.
Can anybody help on this?? thanks..
You can use the :nth-child() Selector to achieve this as in this:
// Javascript
$("ul li:nth-child(2)").append("<li><a>Child 3</a></li>");
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a>Parent Node</a>
<ul>
<li><a>Child 1</a>
</li>
<li><a>Child 2</a>
</li>
</ul>
</li>
$("ul").append('<li><a>Child3</a></li>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a>parent Node</a>
<ul>
<li><a>Child1</a></li>
<li><a>Child2</a></li>
</ul>
</li>
I cant see your image. Do you looking for the :nth-child(3) selector ?
http://www.w3schools.com/cssref/sel_nth-child.asp
I'm trying to open a submenu from the parent link using the mmenu jquery plugin, and almost got it, but once open the submenu, the function also close the menu (the main menu opened from the left).
I got this:
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
So, when I click on the Guides link, opens the submenu, but also close the main menu, animating to the right.
Anybody knows how is the right way to open a submenu?
This is the plugin page: http://mmenu.frebsite.nl/
Is not a simple jquery javascript.
Thanks.
The jquery.mmenu plugin automatically appends a "open-submenu"-button to every LI with an UL inside it. If the A doesn't link to an actuall page, all you need to do, is replace it with a SPAN:
<ul>
<li><span>Guides</span>
<ul>
<li>Beer Guide 2013</li>
</ul>
</li>
</ul>
$('li').hover(function(){
$('ul',this).slideDown();
},function(){
$('ul',this).slideUp();
});
Just change the selector with your own li tags class name.I think you can also toggle method.
$('#li').toggle(function() {
$('ul',this).slideDown();
}, function() {
$('ul',this).slideUp();
});
We ran into this exact same scenario today, and after a good amount of research used the following solution (adapted to your situation). It seems like they've changed things around so the data attributes on the elements are not clearly supported, so we moved the initialization to JavaScript.
HTML (did not change):
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$("#leftMenu").mmenu({
onClick: {
close: false
}
});
});
</script>
Specifying the close option as false makes it so it does not close the mmenu when you click on the li, and allows the onclick event handler to open up the sub-menu item.
I have a WordPress site and I would like to add a class to the links in the main navigation using jQuery.
This is how the code currently looks:
HTML
<div class="nav-menu">
<ul>
<li class="current_page_item">
<a title="Home" href="www.example.com">Home</a>
</li>
...
</ul>
</div>
And this is what I'd like to achieve:
HTML
<div class="nav-menu">
<ul>
<li class="current_page_item">
<a title="Home" href="www.example.com" class="new-class-goes-here">Home</a>
</li>
...
</ul>
</div>
Does anyone have a clue how to do this?
You can use jQuery's .addClass() method and the appropriate selector for the <a> tags:
$(".nav-menu a").addClass("new-class-goes-here");
Here is a jsFiddle to demonstrate.
I created menu using fg.menu.js once its loaded I want to remove the unwanted menu for which user dont have access.
for eg:-
<ul>
<li> menu1
<ul>
<li id="8000610">Test1
</li>
<li id="20247">Test2
</li>
<li id="8000526">Test3
</li>
</ul>
</li>
</ul>
Now after loading the menu I want to remove the Test2
Thanks in advance
If you use jQuery, it's as simple as $('#20247').remove();
With vanilla JS it's
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Also, use search.
The autocomplete is outputting data in this format:
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
<li class="ui-menu-item">
<a class="ui-corner-all">item 1</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 2</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 3</a>
</li>
</ul>
where do I change it to make it output it this way:
<ul class="pageitem">
<li class="menu">
<a class="name">item 1</a>
</li>
<li class="menu">
<a class="name">item 2</a>
</li>
<li class="menu">
<a class="name">item 3</a>
</li>
</ul>
? I even tried to change the jquery script, but it's too complex for me hehe, what do I need to change?
You should't change the classes. jQuery UI uses the classes not only for styling but as selectors to make its widgets work so, if you change them, you no longer have a working plugin.
Depending on your needs, if you need to style the select at your own will, you should edit the css file provided by jQuery, or add classes of your own.
I repeat, don't remove those classes...
If you want to add a span to the LIs, after the anchor, use the callback 'open', something like this:
$( ".selector" ).bind( "autocompleteopen", function(event, ui) {
$(this).find('li.ui-menu-item').each(function(index){
var span = $('<span>');
$(span).text('whatever you want');
$(this).append($(span));
});
});
$('.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all').addClass('pageitem').removeClass('ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all');
$('.ui-menu-item').addClass('menu').removeClass('ui-menu-item');
$('.ui-corner-all').addClass('name').removeClass('ui-corner-all');
I was working in a template for opencart, and in a specific tpl, the tracking.tpl I had a problem with the autocomplete list position.
There can be very simple for who knows javascrit, bad I dont have a lot of knowledge about.
Was little hard found the point where it is generated.
Well, I got it. I did a search for it: zIndex(this.element.zIndex()+1).css({top:0,left:0}) in the jquery-ui-1.8.16.custom.min.js only change the top and left for change the position or what you need.
I know, its very simple bad not so simple to found.
I hope this can help the others with the same problem.