Develop Reference

Uglify.js messing things up within if statement

I have this code
if (!win._hb_bids) {
win._hb_bids = {};
}
win._hb_bids.hb_auction_id = helpers.generateCacheBuster();
if (config.isAmazon) {
translated with Uglify.js to this code
if ((p._hb_bids = p._hb_bids || {}) && (p._hb_bids.hb_auction_id = e.default.generateCacheBuster()), s.isAmazon)
I would assume that this code should be executed from left to right, setting _hb_bids property to an empty object. Instead, what I see in the Chrome debugger, generateCacheBuster() is executed first, and then it tries to make an assignment to p._hb_bids.hb_auction_id, and p._hb_bids is undefined at this moment.
What is the reason for such a strange execution order? And how the code can be rewritten to work correcly after uglify?
UPDATE:
I found the cause of the issue. I had another part of the code doing iframe content refresh, and the win variable was pointing to an iframe window which was destroyed already. That probably caused this weird behaviour. So it wasn't uglify.js problem as I initially thought and stated in the title.

TypeError: Variable is Null

I keep getting an error with roughly the following code.
38. var element_to_precede = document.getElementById("element");
39. var parent_element = element_to_precede.parentNode;
It equates roughly to
line 39: TypeError: element_to_precede is null"
I have been reading around but what I have tried just doesn't work. I have in my main.js,
'contentScriptWhen: "ready"'
in theory this is supposed to load the script only when everything else has finished loading. The only logical explanation is that this is failing somehow.
I have tried wrapping the code with
window.onload = function() {
//Summon function that calls for element_to_precede here
}
Where I ask it to load the elements. Unfortunately it doesn't seem to change anything.
I'm primarily messing with trying to create an extension so I'm using mozilla's tutorials.
Please don't suggest jQuery I'm sure there's a solution in standard JavaScript that I'm missing or not implementing correctly. I'm likely missing something fundamental but for the life of me can't figure out what it is.
Edit.
For example, the code I've tried.
window.onload=function(){
var container = document.createElement("div");
var element_to_precede = document.getElementById("element")
var parent_element = element_to_precede.parentNode;
parent_element.insertBefore(container, element_to_precede);
}
Returns
JavaScript error: line 39: TypeError: element_to_precede is null
Edit
After going through the code again I have found that contrary to what I'm being told the system does...something isn't happening
After asking it the following commands
if(document.readyState === "complete") {
console.log("In theory everything is already loaded");
console.log("Detected: " + document.getElementById("element") + " element");
}
I discovered that it would cycle round four times. Each time it would tell me that everything has already been loaded but that null element was detected. Implying that in fact the page is not "complete".
I'm tempted to just put in a wait order for 200 milliseconds or so every time it finds out that it wasn't detected.
So back to the original question. How the heck do I stop this?

HTML5 Drag&Drop - Event handling with jQuery

So I've stumbled upon this a several times and now I'm finally fed up with this topic. Searching and googleing about it confuses me every time and now I'll need to ask by myself here.
I'm up to implement native HTML5 drag&drop in a web app. It works fine in Chrome and in IE too (at least when I tried last time).
The problem now is, that event binding via jQuery wont work out properly in Firefox, whereas it does so in Chrome! This is my Code:
$(document).on('dragstart','.leistung', function(){
cedamed.handlers.dragElement(event);
});
And this is my handler:
this.dragElement = function(event){
var dataObj = {};
dataObj.category = event.target.getAttribute('class');
dataObj.description = event.target.getAttribute('description');
dataObj.code0 = event.target.getAttribute('code0');
dataObj.code1 = event.target.getAttribute('code1');
dataObj.code2 = event.target.getAttribute('code2');
event.dataTransfer.setData('Text',JSON.stringify(dataObj));
console.log("dragging");
};
Works in Chrome, Firefox gives me the following error:
ReferenceError: event is not defined
It points to the line with:
cedamed.handlers.dragElement(event);
I have come across 'solutions' that involved the originalEvent-property of the event api, which is often supposed to make everything work fine in FF, but it does not at all in my case. I made it work by setting the 'ondragstart'-attribute directly in the HTML, but shouldnt it work with 'jQuery.on'?
I'm sorry, there are several questions to this topic out there, but I just dont get whats going wrong in this field. Can you please give me an insight, whats wrong in here?

I found out I have to pass 'event' as an argument to the jQuery callback function in 'on' such as:
$(document).on('dragstart','.leistung', function(event){
cedamed.handlers.dragElement(event);
});
With usage of originalEvent in 'drageElement' I made it work finally. Sorry...

Console is undefined error in IE9

I have a graphics page which shows SVG graphics. I am using Raphael graphics framework. The page displays properly in Firefox, Also if the F12 developer tools is set 'on' in IE9 it works fine.
The map show partial data (its a node link diagram and it shows only one child node out of 12 nodes) in IE9 if the F12 developer mode is set off and application is started with browser cache cleared (simulating a general user).
Update: I kept the Debugger on and Shows me the error "Console is undefined". So I think its not a graphics rendering issue, and also I am not using the console explicitly, maybe the mindmap js is using it internally, but how to again get rid of this issue?
Update:
I found the issue and commented out the console.log entries from the js files.
Thanks.

Probably your code or the code you are calling is using console.log or something like it.
You could add this code in the global scope to create a dummy wrapper for IE (or any browser that doesn't support it). Just put the following code somewhere before you call any other libraries:
if(!(window.console && console.log)) {
console = {
log: function(){},
debug: function(){},
info: function(){},
warn: function(){},
error: function(){}
};
}

The problem is that your js code calls sometime a console method, for example 'console.log', but your browser does not have console (or has it closed);
To fix this, add this (once) before including any of your scripts:
//Ensures there will be no 'console is undefined' errors
window.console = window.console || (function(){
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
This will create a 'pseudo' console only if it doesn't exist, so that 'console is undefined' error will go away.
Hope this helps.
Cheers

Do you have a console.log() or console.error() call in your code?

Javascript: Error 'Object Required'. I can't decipher it. Can you?

I am using a javascript called 'Facelift 1.2' in one of my websites and while the script works in Safari 3, 4b and Opera, OmniWeb and Firefox it does not in any IE version.
But even in the working browser i get the following error I cannot decipher.
Maybe in due time—with more experience in things Javascript—I will be able to but for now I thought I would ask some of you, here at SO.
The following is the error popup i get in IETester testing the page for Interet Explorer 6,7 and 8:
The following is from the Firebug console in Firefox 3.0.6:
The website is: http://www.457cc.co.nz/index.php In case it helps you see the problem mentioned in action.
I have also looked up what line 620 corresponds to which is:
"line 76" is:
this.isCraptastic = (typeof document.body.style.maxHeight=='undefined');
which is part of this block of code (taken from the flir.js):
// either (options Object, fstyle FLIRStyle Object) or (fstyle FLIRStyle Object)
,init: function(options, fstyle) { // or options for flir style
if(this.isFStyle(options)) { // (fstyle FLIRStyle Object)
this.defaultStyle = options;
}else { // [options Object, fstyle FLIRStyle Object]
if(typeof options != 'undefined')
this.loadOptions(options);
if(typeof fstyle == 'undefined') {
this.defaultStyle = new FLIRStyle();
}else {
if(this.isFStyle(fstyle))
this.defaultStyle = fstyle;
else
this.defaultStyle = new FLIRStyle(fstyle);
}
}
this.calcDPI();
if(this.options.findEmbededFonts)
this.discoverEmbededFonts();
this.isIE = (navigator.userAgent.toLowerCase().indexOf('msie')>-1 && navigator.userAgent.toLowerCase().indexOf('opera')<0);
this.isCraptastic = (typeof document.body.style.maxHeight=='undefined');
if(this.isIE) {
this.flirIERepObj = [];
this.flirIEHovEls = [];
this.flirIEHovStyles = [];
}
}
The whole script is also available on my server: http://www.457cc.co.nz/facelift-1.2/flir.js
I just don't know where to start looking for the error, especially since it only affects IE but works in the rest. Maybe you guys have an idea. I would love to hear them.
Thanks for reading.
Jannis
PS: This is what Opera's error console reports:
JavaScript - http://www.457cc.co.nz/index.php
Inline script thread
Error:
name: TypeError
message: Statement on line 620: Cannot convert undefined or null to Object
Backtrace:
Line 620 of linked script http://www.457cc.co.nz/facelift-1.2/flir.js
document.body.appendChild(test);
Line 70 of linked script http://www.457cc.co.nz/facelift-1.2/flir.js
this.calcDPI();
Line 2 of inline#1 script in http://www.457cc.co.nz/index.php
FLIR.init();
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

I agree with tvanfosson - the reason you're getting that error is quite likely because you're calling init() before the page is done loading, so document.body is not yet defined.
In the page you linked, you should move the following code to the bottom of the page (just before the closing html tag:
<script type="text/javascript">
FLIR.init({ path: 'http://www.457cc.co.nz/facelift-1.2/' });
FLIR.auto();
</script>
Even better, you should attach the initialization to the document's ready event. If you do it this way, there is no need to even move your javascript to the bottom of the file. Using jquery:
$(document).ready( function(){
FLIR.init({ path: 'http://www.457cc.co.nz/facelift-1.2/' });
FLIR.auto();
});
More on jquery's document.ready event »

Edit Answer left for context. See #Triptych's (accepted) answer for the correct resolution.
My suggestion is to move the inclusion of the javascript to the end of your mark up. I think what is happening is that the code is executing before the DOM is completely loaded and thus the document.body is null when you try to reference it in determining the maxHeight style property. Moving the inclusion of the javascript to the end of your markup should be enough to guarantee that the body of the document is loaded at least and avoid this particular error.
... rest of html....
<script type='text/javascript'
src='http://www.457cc.co.nz/facelift/flir.js'>
</script>
</body>
</html>

Install .net Framework v2 and solve the problem.