I have CKE initializing textareas that have been loaded via AJAX, in a colorbox modal window containing jQuery UI tabs panels.
Multiple textareas are dynamically loaded into a single scrollable container div, and then the initializing function runs to convert those into CK editors.
However, it seems that when I initialize CKE on these new textareas, it scrolls the container div down to one of the other textareas on the list, and though it initializes them correctly, you can no longer scroll the container div in Chrome. You can still scroll the container div in Firefox and IE, but not in Chrome. The scroll bar lights up when you mouseover, but neither the scrollwheel nor clicking and dragging the scrollbar will cause it to scroll.
It seems that if I initialize the text areas individually using a specific ID, the scrollbar does not freeze. However, when I initialize the textareas based on the class selector, as shown in the example below, it does.
Another weird behavior: If I click back and forth to select one of the editors and then select another, and if I do this a few times, it magically unlocks the scroll bar. Somehow, the act of switching the active editor a few times frees it up.
My AJAX call:
and the initialize function:
Any help would be MAJORLY appreciated, if you need more information please let me know. Thanks in advance!
Multiple textareas are dynamically loaded into a single scrollable container div, and then the initializing function runs to convert those into CK editors.
However, it seems that when I initialize CKE on these new textareas, it scrolls the container div down to one of the other textareas on the list, and though it initializes them correctly, you can no longer scroll the container div in Chrome. You can still scroll the container div in Firefox and IE, but not in Chrome. The scroll bar lights up when you mouseover, but neither the scrollwheel nor clicking and dragging the scrollbar will cause it to scroll.
It seems that if I initialize the text areas individually using a specific ID, the scrollbar does not freeze. However, when I initialize the textareas based on the class selector, as shown in the example below, it does.
Another weird behavior: If I click back and forth to select one of the editors and then select another, and if I do this a few times, it magically unlocks the scroll bar. Somehow, the act of switching the active editor a few times frees it up.
My AJAX call:
function getStuff(id){ $.ajax({ type: 'POST', url: '/ajax/get_stuff', data: {id: id}, beforeSend:function(){ $('#panel').html('Loading...'); }, success:function(resp){ $('#panel').html(resp); ckInit(); }, error:function(){} }); }
and the initialize function:
function ckInit(){ var config = { extraPlugins : 'autogrow', autoGrow_onStartup : true , removePlugins : 'resize' }; $("textarea.ck").each(function() { if (typeof(CKEDITOR.instances[this.id]) == 'undefined') { CKEDITOR.replace(this.id, config); } else { CKEDITOR.instances[this.id].destroy(true); CKEDITOR.replace(this.id, config); } }); }
Any help would be MAJORLY appreciated, if you need more information please let me know. Thanks in advance!
Re: Initializing AJAX textareas freezes wrapper div's scroll
Have you tried using other dialogs besides colorbox?
Re: Initializing AJAX textareas freezes wrapper div's scroll
Re: Initializing AJAX textareas freezes wrapper div's scroll
Re: Initializing AJAX textareas freezes wrapper div's scroll
I added 'return false' to any links that were appending a # to keep the url clean, and now the arbitrary scrolling and scroll bar freezing is not occurring anymore when the textareas are initialized.
Now that we know that's what was causing it, I'm still not sure of why this would happen. What about the initialization of CKE when there's a # in the URL would cause the div's scrollbar to freeze?
Re: Initializing AJAX textareas freezes wrapper div's scroll
Can you share now the simple testpage without colorbox and ajax?
Re: Initializing AJAX textareas freezes wrapper div's scroll
Example with everything superfluous stripped...
Not working in Chrome/Safari, scrollbar freezes with the #:
http://test.treeofmedicine.com/test.php#
Working in Chrome/Safari:
http://test.treeofmedicine.com/test.php
The fact that it doesn't work with the # in Chrome or Safari, and that it does work in non-webkit browsers, leads me to think that it's some sort of bug related to CKE in webkit browsers.
Re: Initializing AJAX textareas freezes wrapper div's scroll
I've further simplified your test case to this
Re: Initializing AJAX textareas freezes wrapper div's scroll
Is there something I can modify in the CK source so that the iframes are written with jQuery instead of doc.open() and doc.close()?
Re: Initializing AJAX textareas freezes wrapper div's scroll
I don't know much about jquery and this is untested, but something like this pseudocode should work: