Develop Reference

Check if a preference exist from Firefox extension

How to check if preference exist?
I need to create a new preference in the Firefox configuration, but I can't know whether it exists already.
var firstRun = prefs.getBoolPref('extensions.addon.firstRun');
Error: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPrefBranch.getBoolPref]

As already stated by #try-catch-finally, MDN already has some code snippets.
I personally would however use #try-catch-finally's user name :p, e.g.
var somePref = false;
try {
firstRun = prefs.getBoolPref('extensions.addon.somePref');
}
catch (ex) {
prefs.setBoolPref('extensions.addon.somePref', somePref = true);
}
Well, even better would be if you added some default preferences (more) to your extension! Especially "first run" preferences are almost predestinated for this.
In defaults/preferences/somefilename.js add e.g.
pref("extensions.addon.firstRun", true);
Make sure to read through the Preferences article. In particular preference observers often are quite useful. ;)

why ie thrown error while using local storage

Hey i can't figure out why my code is not working. I've pulled out my hair please take a look and tell me what's wrong with this code
Note : it's working fine in chrome and mozilla only not working in IE10 and all below versions of IE
please note that am trying by two different ways so please don't confuse in that
here is fiddle link http://jsfiddle.net/rEmn6/
here is my html code
<div id="wrapper">
<div id="editable" contenteditable="true" onkeyup="SaveValue(this)"></div>
<button onclick="clearData()" id="reset">Reset</button>
<br>
<textarea id="message" onKeyUp="setVal(this)"></textarea>
</div>
here is javascript code
var editable = document.getElementById('editable');
var store = window["localStorage"], storage = window.localStorage;
if (navigator.appVersion.indexOf("MSIE 7.") != 1){
console.log(navigator);
var msg = document.getElementById('message');
function setVal(ths) {
console.log(ths.value);
storage.setItem('sms', ths.value);
};
if(storage.getItem('sms')){
msg.value = storage.getItem('sms');
}
}
function SaveValue(ths){
var val = ths.innerHTML;
if (val != ''){
store.setItem('contenteditable', val)
console.log(val);
}
}
function clearData(){
console.log('clear hoga');
store.clear();
}
if (store.getItem('contenteditable')) {
editable.innerHTML = store.getItem('contenteditable');
}

If you are trying localStorage on a local machine and without use of a web server like WAMP, XAMPP or similar programs. IE browser will definitely throws an error. So make sure that you are trying it in a web server for development purposes.
When you run your page from local filesystem, the browser will not act like he does for web server.

I suspect this is what you wanted to achieve :
<div id="wrapper">
<div id="editable" contenteditable="true"></div>
<button onclick="localStorage.clear()">Reset</button>
<br>
<textarea id="message"></textarea>
</div>
<script>
function init()
{
function setup (name, prop)
{
function save (prop)
{
localStorage.setItem (this.id, this[prop]);
}
var elem = document.getElementById(name);
// retrieve value
elem[prop] = localStorage.getItem (name) || '';
// setup save handler
//elem.onkeyup = save.bind (elem, prop);
elem.onkeyup = function (e,p) { // IE8+ compat.
return function () {
save.call (e, p);
};
}(elem, prop);
}
setup ('editable', 'innerHTML');
setup ('message' , 'value');
}
window.onload = init;
</script>
Your code was flawed in so many ways I reckoned it was easier to rewrite it from scratch:
complete duplication of code for the saving/restoring of your 2 elements, with the code located in two different places while the problem is basically the same
confusing names ('ths' is an eyesore. The first time I checked your code I automatically identified it as a typo for 'this')
wrong way of defining event handlers and passing them parameters (defining event handlers inside HTML code is causing all sorts of problems, since you can't access anything but this and global variables)
mumble-jumble of global and local variables (due to the definition of the event handlers inside HTML)
your code did not work in the fiddle since all your global functions were moved into the init procedure
It was much less work (at least for me) to rewrite it than to try to rebuild a functional version and then try to understand what went wrong with it.
I dumped the attempt at detecting whatever IE7 version. It was getting in the way, since your problem was targeting IE10 anyway. As a side note, a site using this kind of features should simply drop IE7- compatibility altogether, IMHO.
I tested this code on IE8/XP, FF, Opera, Chrome, IE11 and safari/XP.
All tests were run from a web server except IE11. It is well possible IE10- have problems with local storage when run localy.

In Internet Explorer 11 I get the error message SaveValue is undefined appearing here:
<div id="editable" contenteditable="true" onkeyup="SaveValue(this)"></div>
You should be using unobtrusive Javascript techniques and place the onKeyUp event handling in your script instead of in the div.
var editable = document.getElementById('editable');
editable.onkeyup = SaveValue;
In your SaveValue function you can now use this.innerHTML to get the text
This should save you some tears

Enable/Disable debug code dynamically

I'm writing a decent sized JavaScript animation library, that I would like to include debugging code in. I could easily do a check :
if(myLib.debugger){
console.warn('warning message');
}
However if this runs a couple thousand times a second, it would eventually cause performance issues. Add in a few more checks throughout the code and the effect will be even more noticeable.
What I'm wondering is if it would be possible to check onload if the debugger should be enabled, and if so... turn something like this:
//debugger if(!this.name) console.warn('No name provided');
into:
if(!this.name) console.warn('No name provided');
Leaving the code commented if its not enabled, and uncommenting it if it is, thus removing any possible performance issues. Could this be done somehow with a regular expression on the entire script if loaded in through ajax? I'm trying to avoid the need for 2 versions of the same code, lib.dbug.js and a lib.js.
Cross browser compatibility is not of great importance for this (I'm really only worried about new browsers), I see it as nice to have item. If its possible however, it would be a great thing to have.
Any insight would be greatly appreciated.

The simplest way to do this would be to check if the debugger should be disabled and if so, replace it with a mock object that does nothing at the very start of your script:
if (!myLib.debugger) {
window.console = (function () {
var newConsole = {};
var key;
for (key in window.console) {
if (typeof window.console[key] === 'function') {
newConsole[key] = function () {};
}
}
return newConsole;
}());
}
The overhead of this approach should be negligible.

If this is a JavaScript library... then I'd expect as a 3rd party developer that I could download/use 2 versions. The production version (no debug, AND minimized). If I wanted to debug, I would point to the debug version of the library instead.
e.g.
<script src="foo-lib-min.js"></script>
<!-- swap to this for debugging <script src="foo-lib-full.js"></script>-->

How to only wait for document.readyState in IE and fire instantly for all other browsers?

I have written a CSS and Javascript lazyloader to dynamically load resources for seperate pagelets (in the way that Facebook renders a page with it's BigPipe technology).
In short an HTML frame is rendered first, then separate parts of the page are all generated asynchronously by the server. When each pagelet arrives the pagelets css is loaded first, then its innerHTML is set, then finally we load any required javascript for this pagelet and initialise it.
Everything works perfectly and perceived load time is pretty much instantaneous for any given page.
However in IE, I occasional I get Method does not support method or property when initialising the scripts.
I have solved this by checking for document.readyState before loading the scripts.
Now this isn't a huge issue but it adds on average 170ms to a pageload in chrome or firefox. Which is not needed.
function loadScripts(init){
// ensure document readystate is complete before loading scripts
if( doc.readyState !== 'complete'){
setTimeout(function(){
loadScripts(init);
}, 1 );
}
else{
complete++;
if(complete == instance.length){
var scripts = checkJS(javascript);
if(scripts.length) {
LazyLoad.js(scripts, function(){
runPageletScript();
for (var i = 0; i < scripts.length; ++i) {
TC.loadedJS.push(scripts[i]);
}
});
}
else{
runPageletScript();
}
}
}
}
What I am looking for is a modification to this script which will only implement the 'wait' in IE, if it is any other browser it will just fire straight away. I cannot use a jQuery utility like $.Browser and need it to be the tiniest possible method. I hate to use any form of browser detection but it appears as though its my only solution. That said if anyone can come up with another way, that would be fantastic.
Any suggestions would be gratefully received.

You could use JScript conditional compilation, which is only available in IE browsers (up to IE10).
Because it's a comment, it's best to place it inside new Function as minifiers might remove it, changing your code. Though in general you should avoid using new Function, in this case there's not really any other way to prevent minifiers from removing it.
Example:
var isIE = !(new Function('return 1//#cc_on &0')());
However, it seems that your main issue is that the DOM hasn't loaded yet -- make sure that it has loaded before running any loader using the DOMContentLoaded event (IE9+):
document.addEventListener('DOMContentLoaded', function () {
// perform logic here
});

Here is just another solution as the solution from Qantas might not always work. For instance on UMTS connections it could happen that providers remove comments to save bandwith (maybe they preserve conditional comments):
if(navigator.appName == 'Microsoft Internet Explorer'
&& doc.readyState !== 'complete'){
...
}

How do I check if GEARS is installed, using javascript?

Is it windows.gears != undefined or something???
I just want to use javascript to return true or false if the person has google Gears.

Detecting and Installing Gears although this requires gears_init.js. Maybe the source might give you a hint. It starts out like this, followed by some browser specific
checks.
(function() {
// We are already defined. Hooray!
if (window.google && google.gears) {
return;
}