We Keep Coding

Why does javascript create padding in Google Chrome?

I have written some javascript code that creates a preview in a table. In google chrome, however, the table gets extra padding on the bottom.
Google Chrome:
Internet Explore
I have tried the html tags .
Prints preview text:
var textcontent = document.getElementById('kilo');
textcontent.onkeyup = textcontent.onkeypress = function(){
document.getElementById('showtext').innerHTML = this.value;
}
Prints image:
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
I expect a result without padding on the bottom.

padding is CSS related, or using default value. If you need to have clear(0) paddings/margins you've to set it/them using CSS. JavaScript is not about padding but can write HTML or CSS and create element who obviously will have theirs default values. Browsers have sometimes differents settings like default or padding/margin size slightly differents, so set the needed value(s) will fix most of the problems like differences in each browser, some will require more browser specifics settings in order to set unify and erase those differences who 're oten difference of 1 or 2 px.
See also polyfil for more specifics comportements differences in browsers and lack of some modernest stuffs who exist in others and/or laters updates.
note: it's well known that IE is the worst for developpers, better use Edge who's better (stick more to W3C reccomandations) and forget about IE and version of browser who're not uptodate. Not updateing application browser is a wrong this for the user so do web sites for good and updated browsers is more likely to have a good website(i mean anyone will see the same). Testing is still needed for me but i do Firefox then Chrome and later Edge because the 2 first one more at the avant-garde of tech. and following what W3C reccomand. Teting on one or 2 not up to date could be a plus but i don't think so it's really needed, better is to display(and test) site on mobile device with mobile version browsers who 're far more in use to see and browse websites.(+ a website has to be 'mobile first' in order to get a good indexation at serach engine like Google).

MS Edge - window.open gives error "The operation was canceled by the user."

I have two different window.open function calls that are both failing in Microsoft Edge:
var canvas = document.getElementById("diagramCanvas");
var imgUrl = canvas.toDataURL("image/png");
window.open(imgUrl);
and
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#results').html()));
They both generate the error:
The operation was canceled by the user.
This looked like a popup blocker, so I disabled Edge popup blocking and both still fail, while obnoxious popups with real urls do pop up: http://www.popuptest.com/
Is there a way to make Edge open javascript-generated files in a new window?

It looks like the problem may be due to the length of the url in the new window declaration.
I found a workaround based on the answer to this question:
Download canvas to Image in IE using Javascript
From the answer:
Example code:
$("#save").click(function(){
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
By opening a new window then writing to the body, url length limits can be avoided.
This format works in IE9+ and Edge, as well as Chrome (and should work in all other modern browsers).

IndexedDB with iOS 8/ Safari

We have a testcase to test indexeddb with different browsers and OS.
It is just simple test:
open database, add some data, retrieve some data
That is it. It is working perfectly in Chrome (39), Firefox (new versions), MacBook Pro with OSX 9.5, Android based Browsers.
When we try with Ipad3 with iOS 8, the page is not doing anything. And we can not see any errors too.
Any ideas, how to fix the problem?
We used indexeddb.shim.js file that suppose to help, but still does not work.
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
var request = indexedDB.open("kitta db1");
request.onupgradeneeded = function() {
//create Store and etc
};
request.onsuccess = function() {
db = request.result;
};
The error in iOS 8:
Type Error: null is not an Object on the line:
var request = indexedDB.open("kitta db1");
Any idea how can I fix it?

It looks like the variable indexedDB is null. The polyfill does this:
e.indexedDB=e.indexedDB||e.webkitIndexedDB||e.mozIndexedDB||e.oIndexedDB||e.msIndexedDB
So it is setting the variable to one of those values. If those values are all undefined/null, then the indexedDB variable remains null.
A simple way to test whether any of these variations have values (less Microsoft, Opera, and Mozilla) would be something like the following:
console.log('indexedDB: ', indexedDB);
console.log('webkitIndexedDB: ', webkitIndexedDB);
If webkitIndexedDB is undefined and indexedDB is undefined, then iOS apparently does not support indexedDB.
A simple search on caniuse.com says that indexedDB on iOS8 and iOS8.1 is supported but buggy.

toDataUrl - saving Images in IE?

I have spent a lot of time building a dress-up game using KineticJS and I seem to have fallen at the final hurdle.
I have created a 'Snapshot' button which I wanted to allow my users to print the canvas to a window or tab. Here is a snippet of my code:
Camera.prototype.takeSnapshot = function()
{
var backgroundLayer = this.controller.view.getBackgroundLayer();
var backgroundContext = backgroundLayer.getContext();
var manikinLayer = this.controller.view.getManikinLayer();
var manikinCanvas = manikinLayer.getCanvas();
//combine background and 'manikin' layers
backgroundContext.drawImage(manikinCanvas,0 ,0);
//open data URL in new window
var manikinImageUrl = backgroundLayer.getCanvas().toDataURL('image/png');
window.open(manikinImageUrl);
};
Now as im sure you will have guessed already, this works in FF, Chrome, Safari for Win, but not IE or IOS Safari. Having done some research I believe all versions if IE flat out dont support this functionality?
I am just looking for an expert to confirm if this is true or not.
Also could someone please tell me how to fuse the the backgroundLayer and ManikinLayer together before they are printed out? I am getting the errpr 'Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement' on the 5th line of code.
Any help much appreciated as I am close to junking the project after having put in so much effort!

In your new window, create an image element with the source set to your dataURL:
var win=window.open();
win.document.write("<img src='"+manikinImageUrl+"'/>");

Identify tab that made request in Firefox Addon SDK

I'm using the Firefox Addon SDK to build something that monitors and displays the HTTP traffic in the browser. Similar to HTTPFox or Live HTTP Headers. I am interested in identifying which tab in the browser (if any) generated the request
Using the observer-service I am monitoring for "http-on-examine-response" events. I have code like the following to identify the nsIDomWindow that generated the request:
const observer = require("observer-service"),
{Ci} = require("chrome");
function getTabFromChannel(channel) {
try {
var noteCB= channel.notificationCallbacks ? channel.notificationCallbacks : channel.loadGroup.notificationCallbacks;
if (!noteCB) { return null; }
var domWin = noteCB.getInterface(Ci.nsIDOMWindow);
return domWin.top;
} catch (e) {
dump(e + "\n");
return null;
}
}
function logHTTPTraffic(sub, data) {
sub.QueryInterface(Ci.nsIHttpChannel);
var ab = getTabFromChannel(sub);
console.log(tab);
}
observer.add("http-on-examine-response", logHTTPTraffic);
Mostly cribbed from the documentation for how to identify the browser that generated the request. Some is also taken from the Google PageSpeed Firefox addon.
Is there a recommended or preferred way to go from the nsIDOMWindow object domWin to a tab element in the SDK tabs module?
I've considered something hacky like scanning the tabs list for one with a URL that matches the URL for domWin, but then I have to worry about multiple tabs having the same URL.

You have to keep using the internal packages. From what I can tell, getTabForWindow() function in api-utils/lib/tabs/tab.js package does exactly what you want. Untested code:
var tabsLib = require("sdk/tabs/tab.js");
return tabsLib.getTabForWindow(domWin.top);

The API has changed since this was originally asked/answered...
It should now (as of 1.15) be:
return require("sdk/tabs/utils").getTabForWindow(domWin.top);

As of Addon SDK version 1.13 change:
var tabsLib = require("tabs/tab.js");
to
var tabsLib = require("sdk/tabs/helpers.js");

If anyone still cares about this:
Although the Addon SDK is being deprecated in support of the newer WebExtensions API, I want to point out that
var a_tab = require("sdk/tabs/utils").getTabForContentWindow(window)
returns a different 'tab' object than the one you would typically get by using
worker.tab in a PageMod.
For example, a_tab will not have the 'id' attribute, but would have linkedPanel property that's similar to the 'id' attribute.