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');
})
});
Related
I have a sortable set up like so:
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">First <a title='delete' class="itemDelete text-right"><i class="fa fa-minus-circle" aria-hidden="true"></i></a></li>
<li class="ui-state-default">Second <a title='delete' class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a></li>
<li class="ui-state-default">Third <a title='delete' class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a></li>
</ul>
When I have dragged all the child elements, the li's out of the ul I cannot add anymore since there needs to be one li in place for me to add. How can I make it so that even when it is empty I can still drag from sortable1 into this sortable2.
You can add a hidden "< li >" that can be used as a factory entity for you drag!
After looking at the dev tools console and witnessing the changes. I found that a simple statement fixes this, even some words but a break is clean.
In dev tools after removing all elements i edited the html like so:
<ul id="sortable2" class="connectedSortable">
<br>
</ul>
Just add that br, you can even style on css... i think.
I have an unstructured list(ul) inside div tags and I am trying to get the title of an anchor tag, which is inside an li that has class="selected".
<div class="mainmenu">
<div class="mainmenulinks">
<ul>
<li class="selected">
<a class="topmenu-navigation-links" id="topMenuItem0" href="" title="Private">
<span class="span-link-Private">Private</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem1" href="" title="Business">
<span class="span-link-Business">Business</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem2" href="" title="Broker">
<span class="span-link-Broker">Broker</span>
</a>
</li>
</ul>
</div>
</div>
In this case, I should be getting Private as its li has class="selected".
[Updated] Working Fiddle https://jsfiddle.net/prashantkumar_999/rd9zttyn/9/
You can use:
$("li.selected>a").attr("title")
If you need to be more specific, you can add before the li, eg:
$(".mainmenu .mainmenulinks li.selected a").attr("title")
Your fiddle doesn't work as you've
not included jquery
not included "." for some classes (but have for others)
with hasClass, it needs to be in quotes without ".", eg .hasClass("selected")
tried to use this outside of a relevant context
Prop vs Attr
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
while prop does work and is an easy fall-back incase you're not sure which to use, it should be attr for title.
Try this
$('li.selected').find('a').attr('title');
Updated Fiddle https://jsfiddle.net/rd9zttyn/3/ which is working fine
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
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.
I am using MVC 5. I have created navigation drop down. This is my code:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menu">
Report
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="myselector">a </li>
<li>b </li>
</ul>
</li>
Now I have same controller but different actions for a and for b.
How to move to another page while click a and b. Is there any click event available?
I think it work with some js code, but you does not attach any js here. So, you need to add something to your html code for identify your links as different links.
Something like this
<li class="myselector action-show-a"><a>A</a></li>
<li class="myselector action-show-b"><a>B</a></li>
Then you need to select your elements using .myselector and add to them specified action according to .action-show-a and .action-show-b. For this purpose you need to add eventlistners to onclick actions.