Raphael JS - paper.remove - javascript

Just getting started with Raphael.
Now I'm finding that paper.remove() is generating a script error:
"SCRIPT5009: 'removed' is undefined
Is this a script bug?
My variable paper is initialized thus:
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
My HTML body has:
<div id="canvas_container"></div>
This is more info --
I am using Raphael 2.0 which I just downloaded again. Running IE9. Following is the Raphael JS function that is highlighted as the problem:
R.prototype.remove = function () {
eve("remove", this);
this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
for (var i in this) {
this[i] = removed(i);
}
};
the line ... removed(i) is highlighted --> SCRIPT5009: 'removed' is undefined
BTW I am new to this forum. Is there a way to respond to a thread other than "Answer Your Question"?

I've run across this a couple of times. The line 4443 method as suggested by sudoko-san does work in browsers but not backwards compatible with IE-7 & 8 (the whole point of using raphael).
Another work around is to implement the following code in your javascript:
try{
paper.remove();
}
catch (error) {
// this catches the error and allows you to proceed along nicely
}
That's it!

I don't know if you've supplied enough information to answer this question.
What version of Raphael are you using?
On what browser?
Is it being loaded up correctly - can you create any Raphael objects?
If all you're doing is deleting the paper, see the fiddle below.
JSFiddle
It seems to work fine for me with Raphael 1.5.2
Hope that helps (even slightly).

Related

Rappid.js - getScreenCTM returns null in Firefox

I have encountered a problem that is causing me some headaches over the past few days.
I have a web page where users can create sort of a sequence diagram (using joint.js and rappid.js v1.7.1). The idea is - an user has some nodes available that can be dragged onto a canvas (paper in joint.js) and then these nodes can be linked with each other.
The functionality on itself works great in chrome and internet explorer, but I can't seem to get it to work in Firefox (Version 47.0.1).
As soon as I drop a node on the canvas I get the following error:
As said this error only occurs in Firefox and using the Firefox and Chrome debugger functions I was able to tell that the "same" object does receive a SVG Matrix in Chrome while its null in Firefox.
The Node contains a SVG Image Content:
defaults: joint.util.deepSupplement({
type: 'stations.StartPoint',
attrs: {
'.stations-point-title-text': { 'text': 'Start' },
'.stations-point-content-image': { "xlink:href": "data:image/svg+xml;base64,..." }
}
}, stations.Point.prototype.defaults)
The line of code in rappid.js where the error occurs
getTransformToElement: function (a) {
return a.getScreenCTM().inverse().multiply(this.node.getScreenCTM())
},
Has anyone had similar experience with joint.js? Any help or tips would be appreciated.
Thanks
EDIT: I found a solution to the issue, although I must confess I don't quite understand it. After analysis of a demo program that worked in Firefox I figured out that the difference was I wasn't calling the Navigator.render() functionality in my code (since I wasn't using a navigator). Adding that call resolved my problem. (http://jointjs.com/rappid/docs/ui/navigator)
Once moved to 0.9.5 the problem disappears.
But make sure to include in your index.html
< script > SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};< / script >

CreateJS - Type not recognized error thrown during sound registration

I am trying to load sounds through the SoundJS sound registration, and getting the following error:
createjs.js:15 Uncaught Error: Type not recognized.
I figure that the soundjs library is having issues either locating my files or having trouble with the file extensions, but I am using .ogg, which is inline with all the examples I've seen.
Here is my code:
createjs.Sound.alternateExtensions = ["mp3", "ogg"];
createjs.Sound.on("fileload", function(event) {
console.log(event);
}, this);
for (var i = 0; i < soundManifest.length; i++) {
soundManifest[i].loaded = false;
console.log("loading " + soundManifest[i].src);
createjs.Sound.registerSound(soundManifest[i].src, soundManifest[i].id)
}
soundManifest is an array of objects with a source item giving the path to the .ogg files, and an id. I've double and triple checked the path names, so pretty sure that's not it. Any ideas? I am developing on Chrome.
Thanks for posting a github link. It was helpful. Fortunately, I have a super simple answer for you.
Rename the "Object" class you made in Main.js, and you should be good to go.
-- The long answer --
I tossed a breakpoint the error that is thrown, and it showed that when SoundJS tries to create a LoadItem, it fails. This is because it should be treating the LoadItem it receives as an Object, but the line below is failing:
} else if (value instanceof Object && value.src) {
// This code should be executed
}
At first I thought there was a bug in SoundJS that we had somehow missed in the last 2 years, but closer inspection showed that object prototypes in your application are messed up. If you open any browser window, and hit the console, this will return true:
({}) instanceof Object
// true
However while running your app, it returns false.
The issue became clear when I removed all your other classes other than CreateJS and main, and then tried this:
new Object();
// Throws an error that includes info about "Victor"
In main.js, you are defining an "Object" class, which extends a CreateJS Shape. It is global because there is no method closure around the code, so it overwrites the global Object class/prototype.
The reason I included this explanation, is because I couldn't figure out what was going on until I had my steps to show that prototypes were broken in the app mostly written out before the reason dawned on me. I thought it might be of some interest :)

Asynchronous Mathjax SVG

I am using mpld3 to convert Matplotlib plots into D3 web embedable graphics. I am then using a JS library written on top of MathJax called svg_mathjax2.js (https://github.com/ichuang/svg_mathjax2) to apply Tex conversions.
The error I get is at this line of svg_mathjax2.js:
var svgmath = mathjaxdiv.getElementsByClassName('MathJax_SVG')
[0].getElementsByTagName('svg')[0];
It gives the error:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
Everything works fine the first time I load Mathjax, it converts the text appropriately. However, any additional calls (via AJAX) don't work.
I've posted an issue on the github page, but have not heard back. I'm not sure if this is an issue with svg_mathjax2 or mpld3. Perhaps someone familiar with MathJax can help out?
Never mind, I figured this out. It was specific to the svg_mathjax2.js.
I solved it by activating this block of code:
if (1) {
MathJax.Hub.Register.StartupHook("End Typeset", function () {
forEach(items, function (x) {
});
// remove the temporary items
var mathbucket = document.getElementById('mathjax_svg_bucket');
mathbucket.parentNode.removeChild(mathbucket);
});
}
}

IE8 and SmoothGallery: Just getting script errors

I am using Jon Designs SmoothGallery on a website for one of my clients. The only problem is that I get a script error in IE8 when trying to go to the next image. I have checked this gallery in all major browser, and yet again, IE is the one where it doesn't work.
What a surprise.
I have been trying to find out what the problem was, but I only get an error in the eval-function of the mootools library which the gallery is based on, so no luck there.
Is there any way to set a "All-Exceptions Breakpoint", simular to setting one in Xcode, so that I could find the code that it actually hangs up on? Or does anyone know what is actually going on here?
The site is http://internetvolk.de/tische and the JS file responsible for the gallery is http://internetvolk.de/typo3conf/ext/rgsmoothgallery/res/scripts/jd.gallery1010.js
Thank you in advance,
Tobias Timpe
you are using a really old version of mootools - 0.89 or 1.0, if I am not mistaken. it's eval packed via dean edwards' PACKER, which makes it particularly hard to debug.
the instantiation code itself is somewhat awful and monkey patched:
function startGallery17() {
if (window.gallery17) {
try {
var myGallery17 = new gallery($('myGallery17'), {
timed: false,
showArrows: true,
showCarousel: false,
textShowCarousel: 'Thumbnails',
embedLinks: false,
lightbox: true
});
var mylightbox = new LightboxSmoothgallery();
} catch (error) {
window.setTimeout("startGallery17();", 2500);
}
} else {
window.gallery17 = true;
if (this.ie) {
window.setTimeout("startGallery17();", 3000);
} else {
window.setTimeout("startGallery17();", 100);
}
}
}
window.onDomReady(startGallery17);
the use of strings in setTimeouts causes evals here also, the try blocks will prevent you from getting any useful error feedback either.
if you want to get to the bottom of this, get rid of these hacks, load up say, this version of mootools - https://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js - still very old but newer than yours, or if possible, try 1.12 and see if debugging becomes easier.
then get rid of the try/catch blocks, use window.addEvent('domready', fn) to start your code - or if reliant on images being loaded, consider window.addEvent('load', fn) instead.
if all you do on the page is stack up some images with a next/previous, why not use latest mootools with a new plugin - there is NOTHING good about what you have picked.
eg, read this tutorial I wrote on how to do it: http://fragged.org/tutorial-write-a-small-content-slider-class-in-mootools-and-extend-it_1321.html or look on the forge: http://mootools.net/forge/ for something packaged
should be fine with 1.4.5 (latest).
keep in mind the version you are currently using will likely break ie9 and latest gecko

Javascript problems in IE - object expected?

I'm using a jQuery fork of Wysihat as a Wysiwig editor in a project of mine. It works perfectly in all browsers apart from (surprise, surprise) IE (specifically IE8). I've got the example files uploaded here:
http://pezholio.co.uk/wysihat/examples/custom_buttons.html
When running the file in IE, I get the error Object expected, and it seems to be occurring within this function:
window.getSelection = (function() {
var selection = new Selection(document);
return function() { return selection; };
})();
Any ideas what may be causing the problem, and what I can do to fix it?
Cheers
Ah, OK. I think I've nailed this now. I've removed the existing IE fallback code and am using selection.js instead. You can see the code in the gist below:
https://gist.github.com/2556956

Categories