I would like to open specific menu item and set focus on keydown event.
I can open kendo menu by following code but can't set focus over there.
Thanks is Advance !
<ul id="menu">
<li>
Test
</li>
<li>
Master
<ul id="ulMaster">
<li>County</li>
<li>State</li>
<li>City</li>
</ul>
</li>
<li>
Transaction
<ul>
<li> Service Order </li>
<li> Technician Payment </li>
</ul>
</li>
</ul>
document.body.onkeydown = function (e) {
var event = e || window.event
var key = e.charCode || e.keyCode;
if (event.altKey) {
switch (key) {
case 68: // D
$("#ulMaster").trigger("mouseover");
break;
}
}
$("#menu").kendoMenu({});
You can attach an event handler to Menu select event like this:
$("#menu").onkeydown({ select: function (e) {
console.log(e.item);
} });
You also get the menu item in the event argument.
All The Best .
Vote if your Code Working
Related
I have two buttons that will open a modal, but I don't know how to differentiate them to open the right modal.
It's an accept button and a reject button.
<a id='aceitar' href="{{route('despesas.modal', $item)}}">
<i class="fas fa-check text-info mr-1"></i>
</a>
<a href="{{route('despesas.modal2', $item)}}">
<i class="fas fa-ban text-danger mr-1"></i>
</a>
Modal acept
<?php
if (#$id != "") {
echo "<script>$('#modalaceitar').modal('show');</script>";
}
?>
modal reject
<?php
if (#$id != "") {
echo "<script>$('#modalrejeita').modal('show');</script>";
}
?>
Do I have any way to differentiate them? Because both check if the ID is different from empty
if (#$id != "")
You could use a data attribute to target the required modal.
<button class="open-modal" data-target="modal-a">Modal A</button>
<button class="open-modal" data-target="modal-b">Modal B</button>
<div id="modal-a" class="hidden">Modal A</div>
<div id="modal-b" class="hidden">Modal B</div>
The .hidden class applied above simply sets the css display property to none.
.hidden {
display: none;
}
Then using some JavaScript, you can apply click event handlers to each button by using querySelectAll to find all button elements with the given class name and then when a button is clicked, read the data-target dataset and toggle (or remove) the display property for that modal.
let buttons = document.querySelectorAll('.open-modal');
buttons.forEach(button => {
button.addEventListener('click', function (event) {
document.getElementById(event.target.dataset.target).classList.toggle('hidden');
});
});
Example JSFiddle here
I have a menu in a PHP page:
<li data-target='MA'><span>M.A.</span></li>
<li data-target='MBA'><span>M.Com.</span></li>
<li data-target='MBA'><span>B.E.</span></li>
and I have content:
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
I have to selectively show the content. How do I do it?
You need to search for javascript solution.
For example look on the answer to this question:
Responsive menu show and hide on click
Solution:
function switchContent(id) {
var content = $(('#' + id));
$('.content').not(content).hide();
content.show();
}
function handleHash() {
switchContent(location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li data-target='MA'><a class='link' href="#MA"><span>M.A.</span></a></li>
<li data-target='MCOM'><a class='link' href="#MCOM"><span>M.Com.</span></a></li>
<li data-target='BE'><a class='link' href="#BE"><span>B.E.</span></a></li>
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
<ul class="messages">
<li class="error-msg">
<ul>
<li><span>"Product6" is available for purchase in increments of 2 only.</span></li>
<li><span>"Product3" is available for purchase in increments of 3 only.</span></li>
</ul>
</li>
</ul>
<script>
Event.observe('messages', 'click', function(event) {
this.remove();
});
</script>
I want is that when I click on first 'li' which is the children of 'li having class name error-msg only this should disappear and when I click on second 'li' then 'ul' having class message should disappear using prototype js.
I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.
HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.
The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.
I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.
jQuery Toggle Dropdown Menu
and
http://jsfiddle.net/hXNnD/1/
Javascript
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
I created another example that has 2 sub ULs so you can see where the code is falling down.
http://jsfiddle.net/BxsEX/
Hide with CSS your spans and go for: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
I think this is all you wanted. I may be wrong.
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});
I've made a list who's content is loaded via AJAX, and it works as intended.
I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.
Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)
<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>
I've made the outer code work with:
function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}
but I can't really see where to start with the inner lists.
How about this? You don't need another controller.
<ul>
<li ng-repeat="item in group.items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>