I have a tinyMCE instance and I would like to know when the user scrolls inside the editor.
I know how to access the active editor and its iframe but so far have been unsuccessful in finding what fires the scroll event.
Seems simply enough...
You can achieve this using
$(editor.getWin()).scroll(function(){
console.log('fire scroll')
});
Related
I am making a chrome extension to edit properties of images that are clicked on. I am using a package called element picker to select the images (this is triggered through an html button in a popup). The code works and I can change the properties of the image. However the package does not stop whatever action is linked to the image, which can often lead to the user being taken to a new page. How can I stop any of the actions of the users click between the time they press the button in the popup and they have selected an image?
Thank you in advance.
var elementPicker = require('element-picker')
function onClick(elt) {
[.....]
}
elementPicker.init({ onClick })
I don't usually recommend using this but CSS pointer-events can solve this problem. The idea is that any element with pointer-events:none will ignore any interactions. This works to block default HTML interactions like <a> or <button> as well as any javascript actions attached to the element.
This is the technique frequently used with a modal window to prevent clicks from going "through" the area around a modal. It should also work for what you described.
You could either set that style on the image element or on All Elements by using the * {styles...} selector. If you go the "all" route, you'll need to explicitly re-enable pointer-events on any elements in your extension interface that you still need actionable by using the 'auto' property.
Remember to reset pointer events when your extension is finished * {pointer-events: initial;} or you'll leave the page completely in-actionable.
If there is an Event object being passes through to the function then you could use the Event.preventDefault() function.
This function stops any default behavior and allows you to handle the event in your own manner.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
I am trying bind a click listener to something which will open the woocommerce product gallery lightbox view.
Basically I want to re-create the functionality of the click on that little magnifying glass icon: (top right)
I am able to use jQuery to trigger the click event for that element...
$('body').on('click', '.myElems', function(){
$(".woocommerce-product-gallery__trigger").click();
});
... and this works well enough. But there's something unsettling about relying on the existence of this other element and then virtually clicking on it.
Is there a way to open the lightbox up with a function call?
--
My example uses jQuery for convenience since this is wordpress, but vanilla JS answers are fine.
After being stuck for a while with this issue.
I have found out that there is a click trigger with href = #tab-description , I think to open the product description.
So if you
jQuery("a:not('a[href$=\"tab-description\"]')").click(function (e) {
// Any Click event that is not tab-description
}
You can edit the selector inside the jQuery() to suit your use case. but this will need some more handling as it will be triggered on menu clicks, in this case you will have to handle more conditions you can use unload idn if you want your js to execute before leaving the page
I have jquery, bootstrap included in a page I'm writing. It's a complex page. The problem I'm having is with Internet Explorer not seeing mousedown event. Chrome and FF both see the event just fine but not IE.
I wrote a test page with the event and it worked just fine in IE. So my question is...
Is there a way through the developer tools to determine what is cancelling an event?
I have a suspicion that one of the many .js files I've included is cancelling the mousedown event and IE isn't seeing it anymore. Chrome and FF does though. So I'm not 100% that it's being cancelled but it's my only guess I can come up with.
Code is really irrelevant since it's all of jquery and bootstrap. However, I am playing with divs that are draggable and resizeable. That's why I need to use jquery. The bootstrap is used because I also have a wysiwyg editor on the page.
Please don't recommend click. I need mousedown. When the mouse is down the border around the draggable and resizeable div turns red and I have some code that selects that div to capture top, left, width, and height as it's being moved and resized.
If click was selected as the event, the user would have to click the div box first then click and hold to move it. That's not a user friendly interface.
Any help is greatly appreciated.
What do you exactly mean as cancel, .preventDefault() or .stopPropagation? If we are talking about preventDefault - you should still be able to add event listener to parent container and then see your event object - it might have some data to traceback. Alternative would to override jQuery .on method and see who actually subscribes to the event.
After little more thinking - add another listener BEFORE the malicious one, to do that insert document-ready handler with event binding right after jquery loading code. In your new mousedown handler try to override problematic method of the event.
UPDATE:
you should try to check all events attached to your element one by one. To do that - check this post jQuery find events handlers registered with an object
In short - try using jQuery._data( elem, "events" ); to see attached event listeners and inspect their code in your code base. After you find the reason it will be much easier to reach the desired functionality. Before that it is just a guesswork.
I have RichFaces notify message element like
<rich:notifyMessages sticky="true" showCloseButton="false"/>
I want to implement ability to close notification popup by mouse click. Of course I can use showCloseButton="true", but I think little cross in top right corner of popup is not so comfortable to use. Is there any way to catch mouse click event above notifyMessage element?
RichFaces version is 4.2.1.Final
Thanks.
Probably the easiest is this:
<rich:notifyMessages … onclick="$(this).find('.rf-ntf-cls').triggerHandler('click');"/>
RichFaces use the Pines notify plugin but the messages don't seem to support this "remote" closing directly.
User Makhiel was on the right way. Actually you should add click handler for div with class rf-ntf-cls, description of all used classes could be found here.
The main problem is that such popup elements could be added after page was ready, so you should add click handlers after popup was added.
In my case I called function
jQuery('.rf-ntf-cnt').click(function(){jQuery(this).css({visibility:'hidden'})})
in the end of the call which produced popup. I'm not a guru of js and I'm not sure that this is the best way for close popup, but I think that idea is clear.
i'm trying to make a resizable/draggable CKEditor but it doesn't seem to work for me.
I made a wrapper div containing the CKEditor "editable" inline div.
Applied jQUery UI draggable() to the wrapper div, it works, but in order to edit with CKEditor, i need to make like 3 clicks on the entire div, why is that?
Also, is there a possibility to get the "is Editor Active" event?
Thanks in advance.
The solution that I found to this problem was to force focus in the inner div when the wrapper receive a click event:
wrapper.on "click", ->
new_div.focus()