Cannot read property 'getComputedStyle' of undefined ckeditor - javascript

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

Related

$.alert is not a function in Jquery in console error

I'm executing an alert with Jquery as like $.alert(param); The console is providing as $.alert is not a function.
How to overcome it ?
function AlertModelPoupMast(param) {
$.alert(param); //It's custom alert. dont suggest normal alert() here please.
return false;
}
If I place $.noConflicts() it is working for first time , but after that again not working.
function AlertModelPoupMast(param) {
$.noConflict(); //working for 1 time. not working from 2nd time.
$.alert(param);
return false;
}
Replace
$.alert();
to
alert();
This can happen when you not included jquery file or $ is conflicted with some other plugin, changing $ with Jquery may solve that problem,
I think you are using craftpip custom alert like here
here you look with the issue
https://github.com/craftpip/jquery-confirm/issues/32
me also faced similar issue. And the issue was jquery.min.js loaded twice which caused conflict. Make sure jquery and all other js files loaded once. It may fix the problem. Also put jquery.min.js at the top of other js files if possible, because jquery plugin may be needed by other plugins.
Hope it'll help someone.
Use
alert("Your message");
Please ask for clarification if needed.

Dojotoolkit watch() not working on switch

I have a very annoying problem with watch() method from Dojo toolkit. I have a loop, that connects every input/widget in settings view (TweetView) with corresponding object. Connecting in my case is setting input to value from object and watch it for changes.
My problem is, that it works great for slider, but doesn't trigger handler for switch at all. Any ideas what could be wrong? I tried to debug it, but still no results. Here is a fiddle and the code:
var widget = registry.byId(namespace + "." + el);
widget.watch("value", handlers[root[el].type]);
widget.set("value", root[el].value);
http://jsfiddle.net/Em8GE/1/
Thanks in advice,
Dracco
this is unfortunately a known issue in dojo 1.9.0 and 1.9.1: https://bugs.dojotoolkit.org/ticket/17295
This is already fixed on dojox main branch and will be released in 1.9.2. The fix is detailed here: https://github.com/dojo/dojox/commit/43af4ba56f7b589f2afffb9161e21cc2cad40ad8

Fixed Floating Elements jQuery Wordpress

I have added this code to my site (without all the stuff to set up the comments and headers): http://jsfiddle.net/WzLG2/3/ Below is the javascript.
jQuery.noConflict();
jQuery(document).ready(function() {
var top = jQuery('#smi').offset().top - parseFloat(jQuery('#smi').css('margin-top').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// what the y position of the scroll is
var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
jQuery('#smi').addClass('fixed');
} else {
// otherwise remove it
jQuery('#smi').removeClass('fixed');
}
});
});
My site: http://hollyshelpings.com
I'm trying to get the brown box underneath my header to scroll to the top and then stop there like in the jsfiddle. I'm using thesis and I have jquery enabled. I have wordpress and I already looked up how to use jquery in wordpress with replacing $ with jQuery.
I got the basis for the code from this site: Jquery for designers (it won't let me post the link)
I tested and jquery appears to be loading, I used firebug and I'm not seeing errors that pertain to this code (it looks like some plugins may have errors, however). I'm pretty new at coding so I'm not sure what else to test or how to troubleshoot much past this. My end goal is to use this for my social media icons instead of the tabs on the side. Any guidance or suggestions are greatly appreciated.
First step is to check your javascript console and remove any errors you see coming up there, as they can cause problems elsewhere. Not saying it's related, but your call to jQuery('#commentluv') is broken. I also notice you're using jQuery 1.4.2 which is really old, and should consider upgrading (maybe not to version 2 as that changed a lot, but at least to 1.9, maybe 1.10).

button in jquery and jscript

I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.

Strange Issue in Internet Explorer using Flex

Im using a flex plugin with a methode:
ExternalInterface.call("initialize_width");
This calls a jQuery Function witch initializes the width of the window:
function initialize_width(){
$("#nav_content").css("width",900);
}
It works perfectly on all the browsers expect Internet Explorer...
It says: "'null' is null or not an object", and points to:
try { document.getElementById("").SetReturnValue(__flash__toXML(initialize_width()) ); }
catch (e) { document.getElementById("").SetReturnValue("<undefined/>"); }
I've no idea what the problem should be as the place where the debugger points to is pointing to automatically created code..
Any help?
Thanks Markus
Why are you using document.getElementById("")?
This will return null every time, and you're trying to then call a method on null.
If that's just a code error, then make sure the ID you're getting the element of is the only element on the page with that ID, as there may be a conflict there.
Additionally, you can use
$("#nav_content").width(900);
instead of your css call (though I can't see that fixing your problem).

Categories