In my Application,in particular div,I want to show custom right click menu with options instead of default browser menu.
I tried with following code.
events: {
"contextmenu #navContainer":"rightClickTest"
},
rightClickTest:function(event){
if (event.button == 2){
alert("Right Click is not possible Here !")
}
}
we am using backbone.js for my Application.Event is working fine but the problem is after completion of event logic,default right click menu appearing as usually.
Note:
I want to disable default right click menu at particular div(navContainer) of my App.
How can I fix this.
This should do it..
rightClickTest:function(event){
if (event.button == 2){
event.preventDefault();
alert("Right Click is not possible Here !")
}
}
Related
I have a link(link1) in my top navbar that opens a sliding down menu with links to different page(on desktop) . It sets a flag and then checks if it is opened or not when you click the link.(this works as it should-opening and closing the menu)
var flagga=true;
$$(document).on("click",".openstoramenyn", function(){
if(flagga){
$$(document).find('.storamenyn').animate({"top":"59px"}, { duration:300, easing: 'linear'});
flagga = false;
}else{
$$(document).find('.storamenyn').animate({"top":"-"+hojden+"px"}, { duration:300, easing: 'linear'});
flagga = true;
}
});
Then in that menu I have a link(link2 with id=tabkategorierna) that opens the popup menu.
Now, if I click on the link2 to open a popup menu it works every time to open the popup menu and link1 is always working.
But if I instead open the popup with the key event "s"(for search) then after the popup menu is closed, link1 is not working anymore - it won´t open the top menu!?
When I click on the key "s" on my keyboard I run a click event on the id=tabkategorierna to trigger it to fake a click on the link with id=tabkategorierna.
So this is the code for opening the popup with the key "s" and faking a click on the id=tabkategorierna link.
var mykeysearchFunc;
mykeysearchFunc = function(event) {
//o=79 s=83 f=70
if ((event.keyCode === 79) || (event.keyCode === 83) || (event.keyCode === 70)){
// Trigger the button element with a click
document.getElementById("tabkategorierna").click();
console.log(flagga)
event.preventDefault();
}
if ((event.keyCode === 67) || (event.keyCode === 27)){
app.popup.close();
event.preventDefault();
}
}
document.addEventListener("keydown", mykeysearchFunc)
So why does it work if I actually click on the link to open the popup menu and not when it is opened by running document.getElementById("tabkategorierna").click();
What is the difference between actually clicking on the link and run the fake click on it?
Why does link1 stop working after I run document.getElementById("tabkategorierna").click(); ?
Any help really appreciated, thanks.
If you click on the top "MENY" and then"TEST KATEGORIER" you will get the popup menu. if you just hit enter it will close and load a page. Thats how it should work. Now, if you instead open the popup menu with the key "s", it opens the popup menu and then you hit enter and it will load the search page again as it should. But now comes the problem, if you click on the first link you clicked the "MENY", it will not work anymore. That is my problem. https://xn--tervinnmera-w8a.se
You need to stop the animation when it has completed its action. It is hijacking other page elements from working on your page.
Try this code:
$$(document).find('.storamenyn').stop();
You can refer to this https://api.jquery.com/stop/
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
Building a mobile menu and would like when the user clicks on the document, not the menu to close the menu if its open.
Problem is that when the first click is fired to open the mobile it automatically closes. I'm struggling to get this bit to work.
The code recognises the click so the window is detecting the right action. I'm just missing one final step I think.
Code is:
$('.mobile-menu-button').click(function(e) {
e.preventDefault();
$('.mobile-menu').slideToggle('slow');
});
// close on off click
$(window).click(function(e){
e.preventDefault();
e.stopPropagation();
if($('.mobile-menu').css("display") == 'block') {
$('.mobile-menu').slideToggle();
console.log('click');
}
});
Thanks
You can use event delegation. When you click on '.mobile-menu', you open it or close it, when you click somewhere else you only close it.
$(window).on('click', function(e){
e.preventDefault();
if ($(e.target).hasClass('mobile-menu-button')) {
$('.mobile-menu').slideToggle('slow');
} else {
$('.mobile-menu').css('display') === 'block' && $('.mobile-menu').slideUp();
}
});
a basic example on this fiddle: https://jsfiddle.net/6e7atrmn/2/
I have a notification dropdown similar to what stackoverflow has. So when the user request the notifications window I open and close my dropdown div using .show and .hide.
Meanwhile I also want to close it when the user clicks anywhere outside my dropdown div.
My approach was to do the following on my layout.cshtml :
$(document).on("click", onDocumentClick);
function onDocumentClick(event) {
var target = $(event.target);
if (!target.hasClass('nbr-notifications')) {
if ($('#notifications-dropdown').css('display') === 'block') {
$('#notifications-dropdown').hide();
}
}
}
My question and concern is : Is this the best way to do it? From the performance perspective? Since I am handling all clicks on my document everytime.
Couldn't you use this if you are not sure where the element would be?
$('body').on("click",".nbr-notifications", onClick)
.on('blur','.nbr-notifications',closeNotifications);
function onClick(event) {
if ($('#notifications-dropdown').css('display') === 'block') {
$('#notifications-dropdown').hide();
}
}
function closeNotifications()
{
//close it
}
Here only responding to clicks on elements with the class 'nbr-notifications' rather than hooking event handler for all clicks and check if the target is the required one.
If you want the notification to disappear after it loses focus why not just bind a focusout event specifically to that element instead of click to the entire document.
http://api.jquery.com/focusout/
$('.nbr-notifications').on('focusout',function(){
//close functionality here. something like: $(this).hide();
});
When a user opens dialog, there are a bunch of ajax requests that have to be processed and therefore i have a second dialog that just displays loading information and closes once all the requests have been processed.
I am not able to close the user opened dialog with Escape key once it has opened. I have to click on the the dialog itself before I can use escape.
I have tried the following to assign the user opened dialog the focus after the loading dialog closes but to no avail, I still have to click on the dialog before it can close with the escape key.
$(document).ajaxStart(function () {
// IF loading dialog is not allready being shown show it.
if ($("#LoadingData").dialog('isOpen') === false) {
$("#LoadingData").dialog('open');
}
});
$(document).ajaxStop(function () {
//Close the loading dialog once the requests have finished
$("#LoadingData").dialog('close');
//Find the user opened dialog
$('.cmdialog').each(function () {
if ($(this).dialog('isOpen')) {
$(this).trigger('click');//set focus to dialog
// have also replaced .trigger('click') with .focus() but to no avail
}
}).on('click', function() {
//if click is triggerd set the focus of the dialog.
if ($(this).prop('id') != 'LoadingData') {
$(this).focus();
}
});
});
I have also tried setting the focus to the first element within the dialog with $('#DialogName:first-child').focus() and $('#DialogName:first-child').trigger('click') but this is also not working.
Any ideas as to why the focus is not set? Or am I misunderstanding/incorrectly using .focus() and .trigger('event')?
Thanks :)
Try the below code for close the dialog when Escap key is pressed:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc
});
I had the same issue, and found pretty elegant solution, in case you want to close dialog before actually clicking inside it:
$("#LoadingData").dialog({
...,
focus: function () {
$('#LoadingData').closest('.ui-dialog').focus();
}
});
So, we just need to set focus to parent .ui-dialog container, and in that case Esc will work for all cases. Disadvantage of $(document).keyup solution, if you have nested dialogs, Esc button will close your most top dialog and bottom one too.
the focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links. docs here
You can try moveToTop method of the dialog, maybe it will help
And in your code, I think, you should bind "click" event before triggering it.
The following code should work even for multiple modals open:
$(document).on('keydown','.modal-dialog',function(event){
if (event.keyCode == 27) {
$(this).closest('.modal-dialog').find('[data-dismiss="modal"]').click();
}
});