We Keep Coding

Cannot read property 'getComputedStyle' of undefined ckeditor

I use ckeditor on my website, and from time to time when I load my page I get this error which blocks the ckeditor:
"Cannot read property 'getComputedStyle' of undefined ckeditor"
Here's the code that initializes the ckeditor :
CKEDITOR.replace('TA_comments', {
toolbar: 'MyToolbar_user',
on: {
'instanceReady': function (evt) {
//Set the focus to your editor
CKEDITOR.instances.TA_comments.focus();
}
}
});
Any idea where it can come because it's really a random problem on all browsers?
Thanks !

I was getting a similar error and it was caused by calling $('#id').empty();
Followed the ideas in this post:
How do I clear the contents of a div without innerHTML = "";
and used this code:
var node = document.getElementById('id');
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}

I found the problem. It was a problem with a jquery plugin mscustomscrollbar.
To resolve this I deleted the plugin and used css3 to style scrollbar.

I Had the same problem. My solution was: Client was using adblock pro, and I found out that in adblock our page that is using ckeditor is blocked! Removed our page from adbblock and it works fine now!

I was also facing same issue. I put a delay on the .replace() and it's working fine now. As this is not a good solution I Know but I didn't find the exact cause and also it's generating randomly so finally I put a setTimeout() and the problem has been resolved

As per this issue using divarea plugin will solve this by replacing iframe used in editable area with a div

Problems with option selection in Chrome and Opera

I've Problems with thise Code, it's working fine in Firefox and Internet Explorer but it doesn't work with Opera and Chrome Browsers...
<script>
function planetselect()
{
optionen=document.getElementById('pstart').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
optionen=document.getElementById('pdest').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
}</script>

Change
optionen[i].setAttribute('selected','selected');
to
optionen[i].selected = true;
More generally, avoid the use of setAttribute to change DOM properties. Sometimes it works, sometimes it doesn't.
From the MDN :
Using setAttribute() to modify certain attributes, most notably value
in XUL, works inconsistently, as the attribute specifies the default
value. To access or modify the current values, you should use the
properties. For example, use elt.value instead of
elt.setAttribute('value', val).

Did you make sure you close the <script> tag? I can't really see a problem with your code that you posted, so either you didn't close your tag, or your optionen or options variables aren't there or valid
Also too, you should know that chrome has a javascript console that should show you any errors you have. To open it, it's ctrl-shift-j. That should help you a lot.

jQuery width() function returns wrong value in Internet Explorer 9

I used Easy Slider jQuery plugin before and never had problem until now. And the problem is strange. Check out this home page
http://bit.ly/HKiWY6
The page will pop an alert showing two values:
$("#slider").width()
and
$("#slider3").width()
I already set the value for both in css. One is 710px and one is 700px.
If you run in IE9, it shows the default value of $(window).width() instead for both, whatever the window or document width currently is. FF and Chrome returned correctly. Why is that?

Try the outerWidth, and make sure to wrap it in a windows.ready event listener to make sure all DOM element rendered properly before the width being computed
$("#slider3").outerWidth()

I've had problems with jQuery's width()/height()/offset().top/.left etc in the past when I used them before a certain event fully bubbled. See if setTimeout(function() { alert($('#slider').width()); }, 0); has any effect. It's a cheap nextTick() trick that might be just what you need.

TinyMCE on IE8: text cursor problem

when i type something on ie 8, and press 'bold' on toolbar on top of the text editor, the cursor will go to the beginning of the entire text editor. is this bug in tiny mce?
on the other hand, if i select text i typed, and pressed control+b, no problem ; both are fine in firefox,ie6

Have you tried turning off "View->Caret Browsing" in IE8 ? (it is toggled by F7)
That worked for me

I had a similar problem where the image that I wanted to insert was always going to the top of the editor. I solved it by setting the 'onchange_callback' field in the editor's init:
tinyMCE.init({..., onchange_callback: 'updateSelectionBookmark', ...});
This will call my 'updateSelectionBookmark' function when anything is changed on the screen, including the editor being blurred (Read more: http://tinymce.moxiecode.com/wiki.php/Configuration:onchange_callback). My updateSelectionBookmark looked something like:
function updateSelectionBookmark (ed) {
ed.updatedSelectionBookmark = ed.selection.getBookmark(1);
}
This will add a custom property to the editor object which will always contain the latest bookmark.
I then make use of the stored bookmark whenever I need to add the content:
ed.selection.moveToBookmark(ed.updatedSelectionBookmark);
I wanted to insert HTML so I put this before my call to the instance command (In my case, mceInsertRawHTML).
I hope this helps someone, even if my answer is a few months late.
Edit (A few months later): So I originally found this solution while working with TinyMCE 3.2.2.3 but we recently updated to 3.4.4 for compatibility with IE9. Looks like the above solution doesn't work as well as I thought it did. I've since found a (as far as I can tell) perfect solution to this. It's similar to the above except when and where to trigger the callback. Instead of using onchange_callback in the settings, you should use the editor's onEvent event:
tinyMCE.init({
...,
setup: function (ed) {
ed.onEvent.add(function (ed, e) {
ed.updatedSelectionBookmark = ed.selection.getBookmark(1);
});
},
...
});
This replaces the need for the updateSelectionBookmark function or the onchange_callback setting. The reason onEvent works better than onChange is because it gets called after any possible event, including mouse or key presses so the cursor's position is guaranteed to be saved even if moved but the content isn't changed.
After setting up the editor with the above event callback, just use moveToBookmark as stated above to restore the selection. I've tested this on IE9, Chrome, FF6, it works when inserting images/text inside text/tables.

I would'nt say that it's a bug in IE8.
A cursor does'nt move by magic, someone(tinymce) put's him somewhere.
So if the cursor does'nt appear at the expected position, it has to be a misbehaviour in tinymce.
But I can't provide a "bugfix", because this not occurs with my IE8(Win7).
What's your environment?

Javascript callback not firing when AJAX operation complete

Given the following code on an ASP.NET MVC View:
<% using (Ajax.BeginForm("AddCommunity",
new AjaxOptions { UpdateTargetId = "community-list",
OnSuccess = "BindCommunityHover" }))
{ %>
Add Community: <input type="text" id="communityName" name="communityName" />
<input type="submit" value="Add" />
<% } %>
And the following JavaScript method in the file:
function BindCommunityHover() {
$(".community-item-li").hover(
function () { $(this).addClass("communityHover"); },
function () { $(this).removeClass("communityHover"); }
);
};
Is there any reason why BindCommunityHover is not being called when the AJAX result comes back?
The community-list div is properly updated (the action returns a partial view). I have also tried setting OnComplete (instead of OnSuccess) to no avail.
The BindCommunityHover method is called in a $(function(){...}); block when the page first loads, and for all existing .community-item-li elements, it works.
The partial result from my controller replaces all items in that div with more of the same class. The OnSuccess method is supposed to fire after the document is updated.
Update: k...this gets weird. I added the following to the BindCommunityHover method:
alert($(".community-item-li").size());
I'm getting 240 in the alert when the page loads and when the callback fires. So, the callback IS firing, jQuery is matching the elements but not applying the styles...

That's because your function is basically saying add a hover event for all of these items as they exist at the point in time when the function is called.
If you then add new elements they aren't automatically bound. There is a new feature in JQuery called Live Events. I've not dug into them but I think they might help here. Otherwise as you add new elements be sure to bind the hover functions.

Okay, there were two parts to this solution.
First culprit was some nasty caching thing that I can't figure out in Cassini/IE. I tried rebooting, stopping Cassini, restarting VS2010...nothing worked.
The code still won't work on IE on my account on this computer. The deployed-to-IIS version works on all browsers. It also works in IE if I change the filename. Something is borked there, though. If I run the project with Cassini/IE, then open FireFox and go to the site, it works.I tried to repro the error to file a bug, but I can't get it to go. I digress. To get around this I changed the name of the .js file and moved the reference to a different spot in the master page.
The other thing was that I did have to use OnSuccess. I switched to using OnComplete when I was trying to figure out what was wrong. After I figured out the file/browser/server problem, I realized that OnComplete (per the docs) fires before the document is updated; the elements were being updated but then thrown away.
The OnSuccess/OnComplete might help sort something out for someone, not sure about the file/browser/server issue...that might be environmental.