I am using this code to preload image and reference them later by id.
It's working in most browsers and on ipad, but IE8 generates this error:
'Unable to get property 'target' of undefined null reference'
This is my code:
var images = [{id:"kids", url:"assets/driekids.png"}, {id:"title",url:"assets/gametitle.png"}];
var assets = [];
var fnCallback = fn;
var loaded = 0;
this.startLoading = function() {
var t = this;
for(var i = 0;i<images.length;i++){
var r = new Image();
r.src = images[i].url;
r.name = images[i].id;
r.onload = function(){t.checkLoaded();};
}
}
this.checkLoaded = function(e) {
this.assets[e.target.name] = e.target;
loaded++;
if(loaded == images.length) fnCallback();
}
My question: is this way of image preloading, by using new Image(), possible on IE8?
In IE you get the event object like this:
window.event
so you will have to make modifications to your code:
this.startLoading = function() {
var t = this;
for(var i = 0;i<images.length;i++){
var r = new Image();
r.src = images[i].url;
r.name = images[i].id;
r.onload = t.checkLoaded; // you dont want an anonymous function here
}
}
this.checkLoaded = function(e) {
// get the event object for both IE and other browsers
var event = e || window.event;
var target = e.target || event.srcElement ;
this.assets[target.name] = target;
loaded++;
if(loaded == images.length) fnCallback();
}
Related
I have an Android sender that casts a M3U8 file like this:
metaData = new MediaMetadata(MediaMetadata.MEDIA_TYPE_MOVIE);
metaData.putString(MediaMetadata.KEY_TITLE, "Test");
MediaInfo mediaInfo = new MediaInfo.Builder(m3u8URL)
.setContentType("application/x-mpegURL")
.setStreamType(MediaInfo.STREAM_TYPE_BUFFERED)
.setMetadata(metaData)
.build();
try {
player.load(client, mediaInfo, true)
}
Here is my onLoad function (for MediaManager) in my Custom Receiver:
var self = this;
var title = sampleplayer.getValue_(event.data, ['media', 'metadata', 'title']
);
var titleElement = self.element_.querySelector('.media-title');
sampleplayer.setInnerText_(titleElement, title);
var subtitle = sampleplayer.getValue_(event.data, ['media', 'metadata',
'subtitle']);
var subtitleElement = self.element_.querySelector('.media-subtitle');
sampleplayer.setInnerText_(subtitleElement, subtitle);
var artwork = sampleplayer.getValue_(event.data, ['media', 'metadata',
'images', 0, 'url']);
var artworkElement = self.element_.querySelector('.media-artwork');
sampleplayer.setBackgroundImage_(artworkElement, artwork);
var autoplay = sampleplayer.getValue_(event.data, ['autoplay']);
var contentId = sampleplayer.getValue_(event.data, ['media', 'contentId']);
var contentType = sampleplayer.getValue_(event.data, ['media', 'contentType']
);
self.setContentType_(contentType);
self.setState_(sampleplayer.State.LOADING, false);
if (self.mediaPlayer != null)
{
self.mediaPlayer.unload();
}
if (event.data['media'] && event.data['media']['contentId'])
{
self.mediaHost = new cast.player.api.Host(
{
'mediaElement': self.mediaElement_,
'url': contentId
}
);
self.mediaHost.onError = function (errCode)
{
if(self.mediaPlayer != null)
{
self.mediaPlayer.unload();
}
}
var initialTimeIndexSeconds = event.data['media']['currentTime'] || 0;
self.protocol = null;
self.parser = document.createElement('a');
self.parser.href = contentId;
self.ext = self.parser.pathname.split('.').pop();
if (self.ext === 'm3u8') {
self.protocol = cast.player.api.CreateHlsStreamingProtocol(self.mediaHost);
} else if (self.ext === 'mpd') {
self.protocol = cast.player.api.CreateDashStreamingProtocol(self.mediaHost);
} else if (self.ext === 'ism/') {
self.protocol = cast.player.api.CreateSmoothStreamingProtocol(self.mediaHost);
}
console.log('### Media Protocol Identified as ' + self.ext);
if (self.protocol === null) {
self.mediaManager_['onLoadOrig'](event); // Call on the original callback
} else {
self.mediaPlayer = new cast.player.api.Player(self.mediaHost);
self.mediaPlayer.load(self.protocol, initialTimeIndexSeconds);
}
}
self.mediaElement_.autoplay = autoplay || true;
I am not sure what is causing this. This is only happening to M3U8 files. I tested in mp4 and it seems to work. When I debug on Chrome, I tracked that it goes to playing state then the buffering state and gives this error in media_player.js 81. So I am not sure where this is coming from.
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
Any ideas as to whats causing this?
I am taking print screen of browser and pasting it into div which is contenteditable.
I get the image in that but i want to find out image size in kb but i can not find that in firefox.
if (!window.Clipboard) {
var pasteCatcher = document.createElement("div");
pasteCatcher.setAttribute("contenteditable", "");
pasteCatcher.style.opacity = 0;document.body.appendChild(pasteCatcher);
pasteCatcher.focus();
document.addEventListener("click", function(){ pasteCatcher.focus(); });
}
window.addEventListener("paste", pasteHandler);
function pasteHandler(e) {
if (e.clipboardData) {
var items = e.clipboardData.items;
if (items) {
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
var blob = items[i].getAsFile();
var size_blob = (blob.size * 3) / 4;
var blob_size=bytesToSize(size_blob,2);
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
var reader = new FileReader();
reader.onload = function(event){
createImage(event.target.result);
};
reader.readAsDataURL(blob);
}
}
}
} else {
setTimeout(checkInput, 1);
}
}
function checkInput() {
var child = pasteCatcher.childNodes[0];
pasteCatcher.innerHTML = "";
if (child) {
if (child.tagName === "IMG") {
createImage(child.src);
}
}
}
function createImage(source) {
var pastedImage = new Image("300","300");
pastedImage.onload = function() {
}
pastedImage.src = source;
var arrayBuffer = source.split(",");
var size_blob = (source.length * 3)/ 4;
var blob_size=bytesToSize(size_blob,2);
document.getElementById('image2').appendChild(pastedImage);
}
Please can you help here
I am trying to write a OBJMesh model reader and I've got the OBJMesh class setted up, but when I try to retrieve the stored data in the array by creating the OBJMesh object and call the get function, it doesn't do it.
Here's the code
OBJMesh.js
function OBJMesh(file)
{
this.modelVertex = [];
this.modelColor = [];
this.init = false;
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, true);
var objmesh = this;
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState == 4)
{
if(rawFile.status === 200 || rawFile.status === 0)
{
var allText = rawFile.responseText;
var lines = allText.split("\n");
for(var i = 0; i < lines.length; i ++)
{
var lineData = lines[i];
var lineString = lineData.split(" ");
if(lineString[0] === "v")
{
var x = parseFloat(lineString[1]);
var y = parseFloat(lineString[2]);
var z = parseFloat(lineString[3]);
objmesh.modelVertex.push(x);
objmesh.modelVertex.push(y);
objmesh.modelVertex.push(z);
objmesh.modelColor.push(0.0);
objmesh.modelColor.push(0.0);
objmesh.modelColor.push(0.0);
objmesh.modelColor.push(1.0);
//document.getElementById("textSection").innerHTML = objmesh.modelVertex[0];
}
}
}
}
objmesh.init = true;
}
rawFile.send();
}
OBJMesh.prototype.getModelVertex = function ()
{
return this.modelVertex;
};
OBJMesh.prototype.getModelColor = function ()
{
return this.modelColor;
};
OBJMesh.prototype.getInit = function ()
{
return this.init;
};
main.js
var cubeModel;
function main()
{
cubeModel = new OBJMesh("file:///Users/DannyChen/Desktop/3DHTMLGame/cube.obj");
while(cubeModel.getInit() === false)
{
//wait for it
}
var cubeVertex = cubeModel.getModelVertex();
document.getElementById("textSection").innerHTML = cubeVertex[0];
}
it just keeps printing out "undefined". Why's that? and how can I fix it??
but it seems that onreadystatechange is an async-Call so,
this.init = true;
will be set before the function onreadystatechange is called.
May be you could set at the end of the onreadystatechange function
objmesh.init = true;
i hope this helps
I have this code, where data is DWR object that contains rows from response servlet.
img.onclick works using IE9 but I need that it works on IE8 too. Some idea?
Thanks!
function functionA(data){
var getPrintCred = function(data) {
var img = document.createElement("img");
img.src = "images/image1.jpg";
img.style.width="20px";
img.style.height="18px";
img.alt = data.field1;
img.title = getRegimen;
img.onclick = function(target) { functionB(target) };
return img;
};
}
function functionB(data){
var var1= data.target.title;
var var2= data.target.alt;
if ( var1 != null && var1 == "IM")
var1 = "valueA";
else
var1 = "valueB";
functionC(var2,var1);
}
function functionC(param1, param2){
alert ('Using IE 9 works, but IE8 no works...help me!'+param1+'-'param2);
}
Ie 8 does not support the target property in the event object, you have to use srcElement property.
function functionB(data){
var var1= (data.target || data.srcElement).title;
var var2= data.target.alt;
if ( var1 != null && var1 == "IM")
var1 = "valueA";
else
var1 = "valueB";
functionC(var2,var1);
}
Also it looks like no event object is passed to the onclick event handler, so you can pass window.event as a fallback.
img.onclick = function(target) { functionB(target || event) };
http://jsfiddle.net/mowglisanu/wkB6K/
Try the below one
function functionA(data){
var getPrintCred = function(data) {
var img = document.createElement("img");
img.src = "images/image1.jpg";
img.style.width="20px";
img.style.height="18px";
img.alt = data.field1;
img.title = getRegimen;
img.onclick = function(target) {
target = target || window.event;
functionB(target);
};
return img;
};
}
function functionB(data){
var var1= data.target.title;
var var2= data.target.alt;
if ( var1 != null && var1 == "IM")
var1 = "valueA";
else
var1 = "valueB";
functionC(var2,var1);
}
function functionC(param1, param2){
alert ('Using IE 9 works, but IE8 no works...help me!'+param1+'-'param2);
}
In IE the event object is not passed as an argument to the event handler method, but it is available in the global property window.event object.
I'm trying to configure CKEditor so that it could embed YouTube videos directly... I saw there's a proposed patch but I want to keep the original CKEditor distribution as it is, so I was wondering if it's possible to "monkey patch" CKEditor at runtime so that if the user types a YouTube URL inside the Flash dialog, the URL gets transformed to allow embedding.
I've tried this:
CKEDITOR.on('dialogDefinition', function(ev){
if (dialogName == 'flash'){
var infotab = dialogDefinition.getContents('info');
var f = dialogDefinition.onOk;
dialogDefinition.onOk = function(ev) {
var cur = this.getContentElement('info', 'src').getValue();
var newurl = cur.replace('youtube.com/watch?v=', 'youtube.com/v/');
if (cur != newurl) {
this.getContentElement('info', 'src').setValue(newurl);
};
f(ev);
}
}
}
but it won't work, since inside f the code uses this, and my "patch" changes it...
If you attach the onOK to another property of dialogDefinition, this will be correct within it (I think).
CKEDITOR.on('dialogDefinition', function(ev){
if (dialogName == 'flash'){
var infotab = dialogDefinition.getContents('info');
dialogDefinition.oldOnOk = dialogDefinition.onOk; //change here
dialogDefinition.onOk = function(ev) {
var cur = this.getContentElement('info', 'src').getValue();
var newurl = cur.replace('youtube.com/watch?v=', 'youtube.com/v/');
if (cur != newurl) {
this.getContentElement('info', 'src').setValue(newurl);
};
dialogDefinition.oldOnOk(ev); //and change here
}
}
}
Or use Function.apply:
CKEDITOR.on('dialogDefinition', function(ev){
if (dialogName == 'flash'){
var infotab = dialogDefinition.getContents('info');
var f = dialogDefinition.onOk;
dialogDefinition.onOk = function(ev) {
var cur = this.getContentElement('info', 'src').getValue();
var newurl = cur.replace('youtube.com/watch?v=', 'youtube.com/v/');
if (cur != newurl) {
this.getContentElement('info', 'src').setValue(newurl);
};
f.apply(this, ev); //change here
}
}
}