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.
Related
I am currently working with the mmenu jquery plugin. http://mmenu.frebsite.nl/documentation/core/off-canvas.html
Is there way to keep my class names that use in my navigation items when the mmenu plugin is triggered? They are removed and i have headings for menu items that I need to style.
For reference:
<ul>
<li><a class="dropdown-item nav-heading" href="#">Coffee Services</a></li>
<li><a class="dropdown-item" href="#">Quality Equipment</a></li>
<li><a class="dropdown-item" href="#">Our Coffees</a></li>
</ul>
Becomes:
<ul class="mm-listview">
<li class="mm-listitem">Coffee Services</li>
<li class="mm-listitem">Quality Equipment</li>
<li class="mm-listitem">Our Coffees</li>
</ul>
I need to keep the 'nav-heading' class!
By some testing I discovered that the plugin removes all classes that are attached to any div, a, li or span. If you add classes to any other element inside the li tag, it does get copied over. So you can use an i element if you want the classes to be copied. For example:
<li>
<a class="dropdown-item" href="#">
<i class="nav-heading">
Coffee Services
</i>
</a>
</li>
This will get copied like this:
<li class="mm-listitem">
<a href="#" class="mm-listitem__text">
<i class="nav-heading">
Coffee Services
</i>
</a>
</li>
Then in your CSS counter the styling the i tag adds, and add your own:
.nav-heading {
font-style: initial;
// Add your styling
}
I'm not sure what situation that you are facing. But if I found this trouble, I will use Mutation Observer for detecting changes of HTML element. You can insert 'nav-heading' into class attribute when you've detected any change of the element (The class attributes change).
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
If your classes are removed by the plugin itself, nothing to do with that but you can dynamically add your desired class. Using this snippet may help you.
$(document).ready(function(){
$('.mm-listitem:eq(0)').addClass('nav-heading');
$('.mm-listitem').on('click', function(){
$('.mm-listview > *').removeClass('nav-heading');
$(this).addClass('nav-heading');
})
});
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
Ive got this dropdown styled with bootstrap:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> 15min </li>
<li> 1hod </li>
</ul>
</li>
and I want that dropdown menu to be rolled down on a page load, anyone know how to achieve that? thanks in advance :)
The dropdown is toggled with having the additional class 'open' added to the enclosing <li> element. So if you want to have it open on page loading:
<li class="dropdown open">
That will do the trick.
This little bit of jQuery script (I'm assuming you've loaded it becasue you're using Bootstrap) ought to do the trick. Once the DOM has loaded, it sends a click() to the dropdown toggle button.
$(document).ready(function () {
$("#posuvnik").click();
});
There is probably a way to do it in straight CSS, but without seeing more of your code it's hard to know.
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'm currently working on a project with a one page design that'll slide up and down between sections on an <a href> link...
Currently, i have it written as follows:
<ul>
<li>home</li>
<li>artist's materials</li>
<li>picture framing</li>
<li>gallery</li>
<li>contact us</li>
</ul>
...with the most relevant portion being the links:
<a href="javascript:void(0)" onClick="goToByScroll('contactus')">
Then in a .js file I have:
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
Is this ok? Or should this be done a different way?
A better approach would be to not use anchors in this case, you can simplify your markup and code like this:
<ul id="scrollMenu">
<li rel="top">home</li>
<li rel="artistsmaterials">artist's materials</li>
<li rel="pictureframing">picture framing</li>
<li rel="gallery">gallery</li>
<li rel="contactus">contact us</li>
</ul>
And then this script:
$(function() {
$("#scrollMenu li").click(function() {
$('html,body').animate({scrollTop: $("#"+$(this).attr("rel")).offset().top},'slow');
});
});
This adds a click handler to your <li> elements telling them to use their rel="" property to know where to scroll to. Just change your CSS around to point to the <li> elements instead of <a> and you're all set.