Develop Reference

Handsontable not scrolling properly on Chrome

I am currently having an issue with handsontable on Chrome. What appears is that the table is scrollable, but the values and row headings are not updating. The situation can be seen from the below pictures.
Not Scrolled
Scrolled to Right and Down
As you can see, the scrolling takes place, but the values do not update. I should note, that this behavior only happens on Chrome. On Firefox and Safari, the table works as expected.
So more information about my environment.
Using Handsontable 0.28.0
Also using AngularJS and Angular Material
The code that I used to create this example is as follows
var Handsontable = require('handsontable');
// This function finds a div I am using, removes its contents, and then creates the table.
$scope.setSheet = function() {
var elementID = "shreadsheet-" + $scope.tabData.id;
var element = document.getElementById(elementID);
element.innerHTML = '';
var readonlyArr = $scope.tabData.sheetHeaders.map(function() {
return {readOnly : true};
});
var hot = new Handsontable(element, {
data: Handsontable.helper.createSpreadsheetData(1000, 1000),
colWidths: 47,
rowHeaders: true,
colHeaders: true
});
};
I compiled this code using the following command I found in the docs at the Handsontable github page.
SheetController_work.js -o SheetController.js -r moment -r pikaday -r zeroclipboard -r numbro
Has anyone else experienced this problem on Google Chrome, or does anybody have any suggestions?
Thanks.

For me this problem magically went away. The things that happened in the time that I noticed that this problem exists and the time that it magically fixed itself are as follows. You may want to try some of these if you experience this problem.
Restarted Computer (didn't work by itself)
Turned off localhost server from terminal and navigated to different directory.
Quit terminal.
Quit Google Chrome
EDIT with proper solution
I removed the paramater variableRowHeights: false and everything works now.

Getting CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED when opening video file with VIDEO.js -

The error only happens when i try to view the website(video) over the internet.
Everything works perfectly when i am running locally in visual studio and it also works perfectly when i remote desktop into the production webserver where i published the site to and browse to the site locally there.
If i had to guess it seems like something is timing out when it goes over the internet or maybe there is something on our firewall preventing the movie from streaming to me from the production webserver. I doubt the firewall is the issue because i can view other videos streamed with video.js from other sources.
My developertools console window shows this (I tried to post a screenshot but i didnt have enough rep points):
GET http://166.62.34.149/Videos/Walgreens_8700SKedzieAve.m4v net::ERR_CONNECTION_ABORTEDvideo.js:118 s.loadvideo.js:65 Tvideo.js:75 s.loadVideo.aspx?VideoName=Walgreens_8700SKedzieAve.m4v:59 (anonymous function)video.js:36 s.Hvideo.js:28 t.a.t.ua.extend.ivideo.js:6 dvideo.js:57 t.Player.t.a.extend.ivideo.js:6 dvideo.js:2 tVideo.aspx?VideoName=Walgreens_8700SKedzieAve.m4v:57 (anonymous function)
here is my code:
<script type="text/javascript">
var videoName;
//videojs.autoSetup();
videoName = document.getElementById('lblVideoName').innerHTML;
videojs('my_video_1', {}, function(){
this.src({ type: "video/mp4", src: "/Videos/" + videoName });
this.load();
this.play();
});
videojs('my_video_1').ready(function () {
// Store the video object
var myPlayer = this, id = myPlayer.id();
var aspectRatio = 478 / 850;
function resizeVideoJS() {
var width = document.getElementById(id).parentElement.offsetWidth;
myPlayer.width(width).height(width * aspectRatio);
}
resizeVideoJS();
window.onresize = resizeVideoJS;
});
function PausePlayer() {
var myPlayer = videojs('my_video_1');
myPlayer.pause();
};
</script>
I have set my IIS mime type, so that isnt the issue. Any help you have provide would be greatly appreciated.
Thanks everyone!

I know this is an old oner but just to let you know that I came across this with our website and after digging deep into mime types, changing sources, removing cache and so on, a simple options --> advanced --> "Reset" made everything work fine.
This will obviously only be the case if you can test it working on other PC's somewhere else to confirm all the mime types and video work in the first place.
Hope this is of help to someone in the future as it was the top Google result for me.
Regards
Liam

PreloadJS cannot find audio

I'm working on hobby project. I'm using createjs. But, of course, I have a problem. Since I update the code to use Preloadjs, the browser can no longer find the audio files. Here is my loading code:
function load (canvasToShowProgress) {
canvas = canvasToShowProgress;
loadingStage = new createjs.Stage();
loadQueue = new createjs.LoadQueue(true);
progessText = new createjs.Text("Loading... 0%");
loadingStage.addChild(loadingStage);
loadingStage.update();
//start loading
loadQueue.installPlugin(createjs.Sound);
loadQueue.setMaxConnections(4); // Allow 4 concurrent loads
loadQueue.loadManifest("configuration/GameAssets.json");
loadQueue.on("progress", handleProgress);
loadQueue.on("complete",handleComplete);
}
My manifest GameAssets.json looks like this:
{"manifest":
[ {"src":"images/game/street.png", "id":"street"},
{"id":"Default", "src":"sounds/game/background.ogg"},
{"id":"Psychic", "src":"sounds/game/ps.ogg"},
{"id":"Nitro", "src":"sounds/game/ntr.ogg"}
]
}
By the way, the image is loaded perfectly. In the music player class, I call the audio by simply doing soundInstance = createjs.Sound.play(soundIds[currentPlayIndex]);. (The soundIds is temporary a hardcoded array with the ids. Where is my mistake?

First, I just want to confirm you are using the latest 0.6.0 releases of both SoundJS and PreloadJS (they need to be used together).
Currently only Firefox and Chrome support Ogg, so if you are using another browser you would need to provide and alternate format (mp3 is currently the most broadly supported) and set it up using SoundJS.alternateExtensions.
If you are still having loading errors, you'd likely need to dig into the errors a little more to determine the cause.
Hope that helps.

Your soundIds array declare like this
var soundIds=["Default","Psychic","Nitro"]
then call it like that
createjs.Sound.play(soundIds[0]);

Checking if user has a certain extension installed

I just found out that the Screen Capture by Google extension makes my website's window.onresize event not fire.
I want to perform a javascript check to see if the user has ScreenCapture installed and if so, warn the user of the problem.
A year ago I think I heard of some javascript code that could do this, maybe using some google API, but I don't remember.
Any insight on this? I haven't developed any extensions so I don't really know how they work.
[EDIT]
So I have been asked to show some code. As seen in my previous question ( window.onresize not firing in Chrome but firing in Chrome Incognito ), the problem occurs on any window.onresize event function, so I don't think my code really matters.
Also, there is quite a lot of my code, I don't know how much of it to paste or if it would be helpful.
var debounce = function (func, threshold, execAsap)
{
var timeout;
return function debounced () {//alert("1.1 Y U NO WORK?");
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
}
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
};
window.onresize = debounce(function (e) { //alert("1.2 Y U NO WORK?");
flag = true;
var point = window.center({width:1,height:1});
doCenter(point);
// does something here, but only once after mouse cursor stops
}, 100, false);
I would like to stress that the problem is not due to the debounce. window.onresize = t; function t (e) { alert("wtf?");} won't work either.
[EDIT2]
Here's the result:
var screenCapture = null;
var screenCaptureImg = document.createElement("img");
screenCaptureImg.setAttribute("src", "chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png");
/*
* Add event listeners for both "load"- and "error"-event
* Set the variable showing the existence of the extension by
* setting it to "true" or "false" according to the fired event
*/
screenCaptureImg.addEventListener("load", doLoad, false);
function doLoad(e){
screenCapture = true; //removeImgTag(e);
alert("I've so cleverly detected that your Chrome has the ScreenCapture extension enabled. \n\nThis extension interferes with my website's DOM and long story short, it won't be able to scale properly.\n\nSo please disable it. \nConsider this extension: \"Disable All Extensions Plus\", it's a handy selective disabler.");
}
screenCaptureImg.addEventListener("error", function(e){
screenCapture = false; //removeImgTag(e);
}, false);
/*
function removeImgTag(e) {
e.currentTarget.parentNode.removeChild(e.currentTarget);
}
*/
Note that I couldn't get removeImgTag to work, because (at least in chrome), I don't seem to have access to the document object in order to create or remove elements from my page, from within these event functions. This is also why I'm displaying an alert instead of elegantly writing up a document.getElementById("something").innerHTML=...

To detect if an extension is installed in Chrome, you can check for a known resource included in the extension such as an image. Resources for the extension are referenced using the following URL pattern:
chrome-extension://<extensionID>/<pathToFile>
The basic detection technique involves creating a hidden image tag and attaching load and error events to it to see if the image loads (as described here for Firefox):
extensionImg.setAttribute("src", "chrome-extension://<INSERT EXTENSION ID HERE>/images/someImage.png"); // See below for discussion of how to find this
/*
* Add event listeners for both "load"- and "error"-event
* Set the variable showing the existence of the extension by
* setting it to "true" or "false" according to the fired event
*/
extensionImg.addEventListener("load", function(e) {
extensionExists = true;
removeImgTag(e);
}, false);
extensionImg.addEventListener("error", function(e) {
extensionExists = false;
removeImgTag(e);
}, false);
function removeImgTag(e) {
e.currentTarget.parentNode.removeChild(e.currentTarget);
}
Check the installation directory of the extension in the Chrome configuration to find a likely target for detection. On my Linux workstation extensions are located in:
~/.config/chromium/Default/Extensions
You can see that I have 3 extensions installed right now:
~/.config/chromium/Default/Extensions$ ls
cpecbmjeidppdiampimghndkikcmoadk nmpeeekfhbmikbdhlpjbfmnpgcbeggic
cpngackimfmofbokmjmljamhdncknpmg
The odd looking names are the unique IDs given to the extension when it is uploaded to the Chrome webstore. You can obtain the ID either from the webstore or by going to the Extensions tab (wrench -> Extensions) and hovering over the link to the extension in question, or "Screen Capture (by Google)" in this case (note the asterisked extension ID):
https://chrome.google.com/webstore/detail/**cpngackimfmofbokmjmljamhdncknpmg**
In the extension directory there will be one or more versions; you can ignore this. Within the version directory is the actual content of the extension:
~/.config/chromium/Default/Extensions/cpngackimfmofbokmjmljamhdncknpmg/5.0.3_0$ ls
account.js images page.js sina_microblog.js
ajax.js isLoad.js picasa.js site.js
background.html _locales plugin style.css
editor.js manifest.json popup.html ui.js
facebook.js notification.html sha1.js upload_ui.js
hotkey_storage.js oauth.js shortcut.js
hub.html options.html showimage.css
i18n_styles page_context.js showimage.html
In the case of the Screen Capture extension there are a number of images to use:
~/.config/chromium/Default/Extensions/cpngackimfmofbokmjmljamhdncknpmg/5.0.3_0/images$ ls
arrow.png icon_128.png icon_save.png print.png
copy.png icon_16.png line.png region.png
cross.png icon_19.png loading.gif screen.png
custom.png icon_32.png loading_icon.gif sina_icon.png
delete_account_icon.png icon_48.png mark.png toolbar_bg.png
down_arrow.png icon_close.png picasa_icon.png upload.png
facebook_icon.png icon_copy.png popup_bg.jpg whole.png
These can be referenced under this URL:
chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png
This technique obviously depends on the stability of the content of the extension. I recommend using an image that looks likely to remain through all versions.
As mentioned above, the same technique can be used to detect Firefox extensions. In this case the content URL looks like this:
chrome://<EXTENSION NAME>/content/<PATH TO RESOURCE>
On my Linux workstation Firefox extensions are located in:
~/.mozilla/firefox/<USER PROFILE ID>/extensions
Where <USER PROFILE ID> looks something like this: "h4aqaewq.default"
You can see that I have 2 extensions installed right now, one of which is a directory installation and the other of which is a XPI (pronounced "zippy") file:
~/.mozilla/firefox/h4aqaewq.default/extensions$ ls
{3e9a3920-1b27-11da-8cd6-0800200c9a66} staged
firebug#software.joehewitt.com.xpi
The "staged" directory is where Firefox keeps extensions that will be updated (I think). The GUID directory with the brackets is a directory-based extension installation, and the .xpi file is Firebug.
Note: XPI is going away (see the link above). It's basically a zip file that can be opened and inspected by anything that understands zip. I used Emacs.
Finding the extension ID in Firefox is a bit more involved. Go to "Tools -> Add-ons", click the Extensions tab, click the "More" link next to the extension description, then click the "reviews" link to go to the Firefox extension site and get the ID from the URL (note the asterisked extension ID):
https://addons.mozilla.org/en-US/firefox/addon/**firebug**/reviews/?src=api
There's probably an easier way to do this; suggestions welcome.
TODO: how to find a likely image in a Firefox extension.
As an extra note, in Chrome you can only communicate with an extension via the shared DOM of the page: Host page communication

Jquery - how to load everything except the images?

I'm currently working on a WordPress addition which loads full post content (normally it shows exceprts) when asked to. I did my code like this:
$(".readMore").click(function() {
var url = $(this).attr("href");
$(this).parent("p").parent("div").children("div.text").slideUp("slow", function () {
$(this).load(url + " .text", function(){
$(this).slideDown("slow");
});
});
$(this).parent("p").fadeOut();
return false; });
And it works. But I don't want images to be loaded. I tried .text:not(img), but it didn't worked. How can I do this?

The trick, of course, is preventing the images from being downloaded unnecessarily by the user's browser; not displaying them is easy.
I only have two browsers were it's easy and convenient to tell what's downloading: Chrome and Firefox+Firebug. In my tests, Martin's solution using *:not(img) results in the images being downloaded (although not displayed) in both Chrome and Firefox+Firebug. (I emphasize "Firefox+Firebug" because Firebug can change the behavior of Firefox on occasion, and so it may well be changing its behavior here, although I don't think it is; more on that below.)
It took some tweaking, but this seems to do the trick (more on testing below):
$.ajax({
url: url,
success: function(data) {
var div = $("<div>").html(data);
if (stripImages) {
// Find the images, remove them, and explicitly
// clear the `src` property from each of them
div.find("img").remove().each(function() {
this.src = "";
});
}
$(targetSelector).append(div.children());
},
error: function(jxhr, status, err) {
display("ajax error, status = " + status + ", err = " + err);
}
});
Live example The "Include big image" checkbox includes a large file from NASA's Astronomy Picture of the Day (APOD).
The key there was setting the src of the img elements to "". On Chrome, just removing the elements was enough to prevent Chrome starting the download of the images, but on Firefox+Firebug it not only started downloading them, but continued even when the download took considerable time. Clearing the src causes Firefox to abort the download (I can see this in the Firebug Net console).
So what about IE? Or Firefox without Firebug? I only did unscientific testing of those, but it's promising: If I run my live example of Martin's solution on either IE or Firefox without Firebug in a VM, I see the VM's network interface working hard, suggesting that it's downloading that big APOD picture. In contrast, if I run my solution above in that same environment (with caches cleared, etc., etc.), I don't see the VM network interface doing that work, suggesting that the download is either not being started or is being aborted early on.

.text *:not(img) will select every descendant from .text that is not an image, so in theory it should work.