I want to execute a function after the user hilites some text.
I was hoping to listen for the 'selectionChange' event for that purpose, but the documentation states that it doesn't fire for every case, plus I've noticed that it actually also fires just by clicking into the editable area. Is there another event the my plugin can listen for?
This worked for me.
CKEDITOR.instances.editor1.document.$.addEventListener('selectionchange', function (e) { //selection change logic goes here });
Related
Does anyone know how to catch the 'scroll' event in CKEDITOR? there is easy to identify change and other events, but I am unable to cathc Scroll event..
CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
but when want to use same for scroll it does not working
CKEDITOR.instances[i].on('scroll', function() {alert('I am scrolling!');});
does anyone know some workaround?
Thx a lot
M
First thing you need to know is that CKEditor's instance (which you get from CKEDITOR.instances object) is not a DOM element. It indeed fires some events like change, focus, blur, or save, but they are just short cuts or facades to more complex things.
Therefore, if you want to add a DOM event listener, then you need to retrieve the "editable" element (an element in which editing happens). It can be accessed by the editor.editable() method. However, the tricky thing about editable element is that it's not always available, it's not ready right after starting editor initialization and that editor may replace this element with a new one (usually after switching between modes). Therefore, editor fires a contentDom to notify that the new editable is available and the editable has an attachListener method which, unlike the on cleans the listener when editable is destroyed.
The way to use all those methods is explained in the documentation and there are code samples, but just to save you one click:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
console.log( 'Editable has been scrolled' );
});
});
Update: I forgot that for 'scroll' event you have to listen on document. I updated the code above.
This will do it:
$('input').on('change', function(event){
...
}).change();
...but what if there is another plugin installed that hooks some function on the change event? I'll trigger that function too, and it may not be desirable. How can I avoid such conflicts?
Use namespaced events
$('input').on('change.myevent', function(event){
...
}).trigger('change.myevent');
This will get triggered on normal change events (along with other change handlers on it) but will also be triggered by change.myevent (only it)
This will also allow you to unbind only your own event in case you need to ..
This code:
function attachDateNavEventHandler() {
$('.ui-datepicker-title option').each(function () {
$(this).mouseup(setFlag);
});
attaches the event fine in FF but not in IE 8 or Chrome. I'm working with the jQuery datepicker and want to set a flag if the user navigates with the month or year drop-downs. I can't seem to attach to the onchange event of the selects. I think there must be an internal block on those events. I also had trouble using a simple click
Any suggestions mooooooost welcome :).
Try:
$(this).on('mouseup', setFlag);
Though this is basically the same thing you have.
I have a feeling that the options themselves may have the funny business. Options can't do everything that a typical HTML element can, but I'm not certain of the limitations on what browsers.
What about setting an on change on the whole select itself instead of trying to listen for mouseup events of each individual option.
$('.ui-datepicker-title').change(
I have some input fields on which I trigger a ajax function on their change() event.
The problem is that I manually trigger this event in certain situations, so it gets executed quite a lot.
SO how can I run my ajax ONLY when the user has typed something in the input and moved his cursor away from it?
$('input').blur(function(){
alert('input has lost focus'); // do ajax call here...
});
Demo: http://jsfiddle.net/Yyygr/
i'm facing a small issue with the fireevent. in one js file i'm firing the event like this: Ti.App.fireEvent('foo', {name:col});
in an other file i'm listening to the event.
tableimg.addEventListener('click',function(e){
if(e.source.backgroundColor==''){CreateTableWindow(1,e.source.id);}
else{
changeTheDinerStatus();
Ti.App.addEventListener('foo', function(data)
{
var ke=data.name;
alert(e.source.id+'###'+ke);
e.source.backgroundColor = ke;
});
}
});
so here is the problem, wen ever i'm firing the event the function in the listener is repeating itself.....
like this
wen clicked for the first time it runs once..1####FFF
wen the second table is clicked it goes
1####AAA
2####AAA
for the third time
1####BBB
2####BBB
3####BBB
this goes on like this for all the time....
I can't see your DOM structure in front of me, but I think, the main problem is, that you add an event listener on every click.
You should not do this.
If you need to solve the problem this way, you should remove the existing listener
element.removeEventListener('foo',spyOnUser,false)