I am using CKEditor Version 3.3.1, Also tried latest version 4.3 but facing same problem.
Now the problem is, Whenever I try to load the CKEDITOR to the Textarea Which is located inside the jQuery Dialog box, CKEditor loads properly, but When I try to create a hyper link, It open up the Link Popup box, but Link options (Input field, dropdown etc) is not working.
For reference see the attached screen shot.
Please guide me, how to resolve this issue.
I had the same problem, but in my case Textarea belonged to a modal window.
Removing "tabindex="-1"" was fixed.
Here is the solution for the above problem, thats worked for me.
Solution for CKEditor Popup in a jQuery Dialog Box
I have solved it by setting z-index to a bigger value than my bootstrap modal:
.ck.ck-balloon-panel {
z-index: 1050 !important;
}
I had the same issue. Fixed using the following thread. It saved me lots of time:
Twitter bootstrap problem with ckeditor dialogue in modal
In my case, the problem is related to modal structure which text area is located inside the this jQuery Dialog box that has tabindex attribute like below:
<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" id="modal">
// text area is here in this modal body
</div>
By removing tabindex="1" you can change link textbox in Link Popup box in ckeditor.
Same issue here, but using other frameworks.
In short I was using modal divs.
Then I found out that one of them had a tabindex attribute defined. Once I removed it CKEDITOR started working as expected.
No modal should have tabindex attribute defined.
Related
I am using the modal plugin from Bootstrap and for some reason the backdrop is not showing.
When I check same code on W3Schools I notice a div is generated every time a modal opens:
<div class="modal-backdrop fade in"></div>
I got the exact same code as on W3Schools but this div is not generated on my site.
How can I fix that?
This happened to me when I used the wrong method to open the modal. I had
$('#myModal').show()
when of course it should be
$('#myModal').modal('show')
Another symptom of using the wrong method, in addition to the semi-opaque backdrop not showing, was the close button in the modal also did not work.
Please check whether CSS properties are overridden or not by inspecting <div class="modal-backdrop fade in"></div> element. Mostly this could be a CSS issue caused by an override.
Cannot reproduce this, as the w3 school examples work fine.
Verify the following. This might cause the issue:
It's good practice to put the <div class="modal">.. at the end of
the file or before </body>
If any other css class is overriding the modal-backdrop class
if jquery and bootstrap JS are added properly
Get the modal from
http://getbootstrap.com/javascript/#modals-examples
I am using bootstrap modal for my website. Recently, I used a jQuery plugin to build nav bar and some problems showed up. First, after I use jQuery.noConflict(), the program not recognize $ anymore and I have to replace all $ which jQuery. Second, when execute the command .modal("show"), the modal not showing completely, the whole screen is fade and I can type anything to modal's inputs. Here the screen capture:
Can anybody explain to me what happened here? Thanks very much.
It seems their is a problem with the css. Make sure that you are loading bootstrap css only once.
I am trying to use this text expander/collapse jQuery plugin to only display first snippets of text, but if I load this in the page the whole text would show up first and then when the plugin is fully loaded in to the browser it would collapse down(I could visually see this process). Is there any technique that you can teach me so that only collapsed text would display first?
Here is the plugin I am trying to use:
http://plugins.learningjquery.com/expander/demo/index.html
You could put some css into the paragraph type you're collapsing, and hide it when it hasn't been collapsed
<p id="textblock" style="display:none">
then use jQuery to show it right after your plugin collapses it
$("textblock").show()
I've got the following... http://jsfiddle.net/yUVF4/3/ Basically it's just a form which when the button is pressed a loading screen should appear using the javascript there and the resource I've added jquery.loader.js. However, It's not working and I can't seem to grasp why. Anyone got any ideas?
Just add div wrapper in the content parameter of the plugin, it works
content:'<div>Loading...</div>'
See jsfiddle
I previously posted this question JWYSIWYG or jHtmlArea within a Jquery Ui Tab about getting jHtmlArea to work inside jQuery Ui tabs.
I am now trying to get this same html editor to work inside the jQuery formtowizard plugin.
I am not sure if this is exactly the same problem or not. No errors are being thrown and the editor appears to load all buttons and its height and width correctly but the user is unable to type any text in the textarea.
I am generating the jHtmlArea like this...
$(function(){
$(".text-detail").htmlarea({ css: "/css/jHtmlAreaCustom.css",});
});
and then
$(document).ready(function() {
$("#addFaci").formToWizard({ submitButton: 'AddFaciSubmit' });
}):
Do I need to load the jHTMLArea from within a callback from the formToWizard script? I've tried for several hours and definetely need some guidance.
Thanks for your help.
Tim
The problem turned out to be jHtmlArea needed to be loaded in $(document).ready(function() { after the formtoWizard call.
Then jHtmlArea collapses onitself because it can't dynamically set it's height and width properties within a hidden container. Set these with jQuery CSS calls and your good to go!
Hope this helps someone else.