When you click a menu item first time, the others automatically open onmouseover event. But if you don't click, the others do not open onmouseover event. But I want to open a menu item while onmouseover event without any click. How can I do this?
$(document).on('mouseenter', '.mce-menubtn', function() {
if (!$(this).hasClass('mce-active'))
$(this).trigger('click');
});
Maybe not good solution, but context menu generate by click.
You can check here: http://coding.kz/stack/tinymce.html
for answer in comments
$(document).on('mouseenter', '.mce-menubtn', function() {
menuItem = $(this);
if (!menuItem.hasClass('mce-active'))
menuItem.trigger('click');
});
$(document).on('mouseleave', '.mce-menu', function() {
if (!$('.mce-menu-sub-tr-tl:visible').length) $('.mce-menu').hide();
menuItem.removeClass('mce-active');
});
$(document).on('mouseleave', '.mce-menu-sub-tr-tl', function() {
if (!$('.mce-menu-sub-br-bl:visible').length) $('.mce-menu').hide();
});
$(document).on('mouseleave', '.mce-menu-sub-br-bl', function() {
$('.mce-menu').hide();
});
In the Init Script you can set up your own Event handlers.
Use something like this, and then check for the menu, I have not in mind,
how the elements are called but ID, names and classes can be found in sourcecode.
tinyMCE.init({
// Custom Commands
setup : function(ed) {
ed.on("keyup change mouseup", function(e) {}
}
});
Related
I have a problem with Bootstrap tabs. I want to create a tab-based menu with a submenu. On all tabs there is a mouseenter event attached, so when I enter the tab with the mouse pointer there appear links in submenu. But some of the tabs do not need a submenu, so I need attach to them a click event, that recognizes what tab i clicked and redirects me to a page. I attached the click event with this code:
$('#mainTabPanel a').click(function (e) {
e.preventDefault();
var $destination = $(this);
if ($destination.hash === "#about") {
window.location.replace("http://stackoverflow.com");
}
});
But it's not working. Can you help me?
EDIT
I've made a example in JsFiddle:
https://jsfiddle.net/Romanus91PL/a12m71pf/5/
When I click the "Bing Link" anchors, they redirect me to the bing.com site. I want to apply such an event too to the About tab (when I click it, it should redirect me to the bing site).
If I understand Your problem correctly, what about this
$(function () {
$('#mainTabPanel a').mouseover(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#mainTabPanel a').click(function(e) {
e.preventDefault();
if (this.hash === "#about") {
window.location.replace("https://bing.com");
}
});
});
https://jsfiddle.net/szepiet83/myqo4wx7/
Please try below given code.It may help you..
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
console.log(e.target) // activated tab
})
I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});
I'm building mobile theme using jquery-mobile.
//Swipe to reveal delete icon
$(".swipe-delete li").on("swipe", function(e) {
$(".swipe-delete .delete").remove();
$(this).find(".ui-btn-inner").append('<div class="delete">Delete</div>');
});
//Click to delete fav from list
$(document).on("click", ".swipe-delete .delete a", function() {
$(this).closest("li").remove();
});
//Currently playing
$(".ui-listview li").on("click", function() {
$(".ui-listview .playing").remove();
$(".swipe-delete .delete").remove();
$(this).find(".ui-btn-inner").append('<div class="playing">Playing</div>');
});
So, I'm implementing swipe to delete a button. It works correctly until I enable currently playing section. When it is enabled, whenever I try to click the delete button the event is intercepted by currently the playing function and method remove() doesn't get invoked.
To see it in action please visit this site.
And click "favorites" in the footer. Swipe on the listview to show delete button. Try to click it and you will see that play button appears instead of removing it.
Since the delete handler is bound to the document, the event doesn't reach there until after the click handler for the "currently playing" section has run, removing the element that would cause the event. There are a few ways to go about fixing this, but this is probably the simplest:
//Currently playing
$(".ui-listview li").on("click", function(e) {
// if the target of the event was the delete button, don't to anything
if ($(e.target).is('.swipe-delete .delete a')) { return; }
$(".ui-listview .playing").remove();
$(".swipe-delete .delete").remove();
$(this).find(".ui-btn-inner").append('<div class="playing">Playing</div>');
});
You can use the stopPropagation() method.
So change your remove function to this:
$(document).on("click", ".swipe-delete .delete a", function(e) {
e.stopPropagation();
$(this).closest("li").remove();
});
I have a drop down menu, and clicking the icon should add the class "Open" to its parent, and then clicking the menu anywhere should close it. But the function inside the bind fires when the icon is clicked. The effect being it adds the class Open, and then removes it straight away.
This is probably a simple issue, but I cannot seem to work out why the 'click' event fires straight away!?
This question may be similar but can't still can't work it out: jQuery bind event firing the event
$(function () {
$(".ui-dropdown-action").bind("click", function () {
$(this).parent()
.addClass("Open")
.bind("click", function () {
$(this).removeClass("Open");
});
});
});
I think you might have a problem with the click event bubbling up the DOM tree. Which is why click is also being fired on the parent.
if you pass in the event object as an argument for the first bind and call event.stopPropagation() as follows
$(function () {
$(".ui-dropdown-action").bind("click", function (event) {
event.stopPropagation();
$(this).parent()
.addClass("Open")
.bind("click", function () {
$(this).removeClass("Open");
});
});
});
should fix your issue.
You can pass the event argument and stop the bubbling of the event .. Try this
$(function () {
$(".ui-dropdown-action").bind("click", function () {
$(this).parent()
.addClass("Open")
.unbind().bind("click", function (e) {
$(this).removeClass("Open");
e.stopPropagation();
});
});
});
This will make sure the parent event will not fire when the icon is clicked..
Also every single time you click the icon the event for the parent is bound again which will create multiple click events .. Need to make sure you unbind and bind them again to avoid that..
It is firing right away because the click event is bubbling to the parent and then firing that selector. To fix this you could use a setTimeout() around the 2nd bind.
$(function () {
$(".ui-dropdown-action").bind("click", function () {
var parent = $(this).parent();
parent.addClass("Open");
setTimeout(function() {
parent.bind("click", function () {
$(this).removeClass("Open");
});
}, 0);
});
});
Another option would be to to a stopPropagation() on the event on your first bind, though that would prevent any other handlers from triggering on that event.
In my case, when I use something like this
$("#modal .button")[0].click(() => console.log('test'))
its doesnt work and seems like click firing immediately
Solution for me was:
const button = $("#modal .button")[0];
$(button).click(() => console.log('test'));
Maybe I'm, just tired but I have a right click menu that I want to close when the user clicks anywhere else than the menu. But I cant figure out how to make it disappear when the user clicks on something else.
Here is the code for showing the menu:
// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
// if right click
if(event.which == 3) {
showRightClickMenu(event);
}
event.preventDefault();
event.stopPropagation();
});
And this is what I got for hiding the menu
// If mouse click outside document
$(document).bind('blur', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
The first bind checks if the user clicks outside the document and the second bind checks if the user clicks on everything except the menu.
But the second one doesn't really work. If I click on the menu the menu is hidden.
Shouldn't be so hard imo... Anyone got any ideas?
Try it this way
$(document.body).bind('click', function() {
hideRightClickMenu();
});
$(window).bind('blur', function() {
hideRightClickMenu();
});
Try with focusout() event and using on() instead of old bind(). This will work even with multiple submenus.
http://jsfiddle.net/elclanrs/jhaF3/1/
// Something like this...
$('#menu li').on('click', function() {
$(this).find('ul').show();
}).find('ul').on('focusout', function(){
$(this).hide();
});