I have an external svg that I embed via an tag. I then use javascript to insert mouse handlers to -s in order to "rotate" them with the mouse. (Just like knobs on a stereo.)
Now, every once in a while, this doesn't work. Firefox then doesn't show the drag-cursor which I told it to show but instead the crossed-out-circle cursor. Also, it doesn't rotate meaning that the javascript is not run. This happens roughly every third time - other times it works great.
To me, it looks like firefox tries to drag the whole svg-object instead of handing the mouse-events over to the javascript and let that do it's magic.
Does that sound familiar to anybody? What could I do?
Cheers!
Okay, short time after, although I had searched the web, I found the answer myself.
This works just like Dragging/selecting inside SVG in Firefox.
Let me quote from there:
This behaviour is described in the following bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=525591
You can fix this by calling preventDefault() on the event.
This really needs to go in an FAQ somewhere.
I have nothing to add :-)
Related
I am having problems with triggering RaphaelJS's Element.click() with jquery. What I am trying to do is simulating with jquery that the Element.node was clicked and what I am expecting is that Raphael will delegate the click treatment to the previously defined Element.click() method.
In some circumstances I will need to trigger Raphael's Elements event handlers with code somehow using my Element instance.
In order to simplify my problem, I created a plnkr with just the code that does not work for me. So here is the example:
http://plnkr.co/edit/AuSuq1RG6cWpqH2GEzcN?p=preview
What I expect of the code is that after $(r.getById("square").node).trigger("click"); (I have also tried using $(r.getById("square").node).click()) is executed, myRectangle.click(function() {...} will be called and the heading on the result page will be changed to "The rectangle was clicked!". As you can see this does not happen. However clicking on the shape is working fine.
Does anyone know what do I miss in this small piece of code? How to make such manipulation work?
Thanks!
After I worked around my initial problem so I can finish what I did start, now I found a helpful kinda-solution to the problem that might help others that come across my topic. What is written in the topic works and worth considering to be adopted as solution. It do look a bit hacky, but to be honest many things in JS do so. So here is the link, hope it can be helpful to someone someday :) - Triggering Raphael events externally
I've used some complex javascript (jQuery) to create an editor of sorts where users can drag, drop and resize different divs. The problem is that sometimes, for seemingly no reason, divs that contain text suddenly get "frozen" or "stuck" on the containing div and cannot be dragged around, despite still maintaining a class list that includes ui-draggable, right after I mention:
$this.draggable( "option", "disabled", false );
So technically there's no reason why the dragging should stop. I used Ctrl+Shift+K to use the web console of firebug but when I drag things around that doesn't trigger anything on the console, and the fact that I can't drag one particular around also doesn't show anything up. I've tried profiling but these things just tell how much time is spent in a certain script. How can I possibly figure out why an element's drag just gets turned off and cannot be turned on again? I can't put breakpoints because I don't know where in the code something's going wrong. It almost seems arbitrary. Is there any way to to simply see what's happening on the stack in realtime?
Edit
In Firebug we can see an entire list of properties for an object, much more than what fits in this little screenshot below. Does anyone have any idea which object properties I should concerned with, that pertain to an issue like mine? I'm really lost on how to diagnose the problem.
#Allendar - too many bindings was indeed the issue. I followed up with this question: Am I binding events over and over again in this jQuery code? and with the help of Visual Event, I got rid of bindings that I was doing over and over again, and then it worked fine.
My initial question is a direct dupe of this question, trying to put the cursor at the end of a textarea.
one
two
three|<-- ideal position
It worked fine on all browsers except Firefox (I'm currently using version 18.0). Even the jsfiddle that Tim provided in the link above (for convenience: http://jsfiddle.net/DqtVK/40/) is not working.
It seems it's not highlighting or placing the cursor at all anymore.
I understand jquery is an alternative option (as found here) but did something happen on firefox's side that makes this method no longer reliable? Anyone have any insight? Is there a way to avoid the jquery route?
Thanks!
Looks like there was an uncaught exception that was preventing my piece of code from finishing. It seems firefox really doesn't like focusing on a hidden piece of HTML. Lesson learned, make sure your target is visible!
Though why the jsfiddle is not working properly is still a mystery to me...
but my base issue has been solved.
If anyone can explain the jsfiddle mystery, please keep respondin' I'll be on the lookout.
EDIT by Phrogz: This appears to be a problem with the framerate of jQuery animation when this particular complex CSS is applied. See the video at the bottom for an example of the problem.
I think is hard to copy and paste the whole code here. So I've create a fiddle for this.
To be honest, CSS is not so important on this (I putted it for have a decent grid). I also removed many functions from my original version, in fact they aren't so important.
The only one that works is by clicking on the buttons + Tracks (which call addTrack()) that adds a new track/line in the grid. Tested on Chrome, IE, and Firefox < 4 version. There isn't much problem. It's really rapid and fluid.
The problem is on Firefox 4 or 5. It's really slow to add the new track/line. It's fast like a turtle.
What the function done is to clone (copy with handler) an element trackOn, which is already written in a hidden field (tracklistOff) and add it (insertAfter) applying a fade effect. (thats means a new line in the grid).
Why this behaviour on Firefox? Too many elements to browse on the DOM I suppose. I need to get rid about this slow attitude... so what can I do?
EDIT
You can hear the difference about Chrome and Firefox (5, last version) on this video. Try to hear/see the difference between clicking on mouse and add new line (with the effect). It's too frozen (also when I try to add more tracks quicly).
Still a problem for me, any suggestion will be appreciate :)
This is not very slow for me. On my computer running Firefox 5 I can add many tracks in less than a second. What performance are you seeing? ("Fast like a turtle" is not a very quantitative measurement. :)
When you have trouble with JavaScript speed, profile it, using the Developer tools for Chrome/Safari/IE or Firebug for Firefox. Here's what I see when I run the profiler on your JSFiddle and click on the +Track button twice:
From this we can see that most of the time is spent in some set function from a mootools library. Since I don't see this library included in your code, I'm assuming the profile is tainted by JSFiddle.
So, we create a standalone test case without the unnecessary CSS and profile that. Now we see this (for several presses of the +Track button):
Almost all of your time is spent in the clone() function.
So what can you do about it? You could try pre-creating the HTML string (in JS) for a template row, and instead of using 'clone' try creating that with:
$(templateString).hide().insertAfter(...).fadeIn(600);
would it be ok if you get just the last element?
something like:
$('.tracklistOff div:last-of-type')
.clone()
.hide()
.insertAfter(($(param).parents('.trackOn')))
.fadeIn(600);
or you could addClass(last) to the last element to get only one
I just tested your fiddle on the following browsers and they all worked well: FireFox 5, Opera, Google Chrome, Safari & IE9.
There were no speed issues but each browser handled the fade slightly differently however everything else seemed to work fine. Not sure what the problem is here. It could be your computer speed but as you're on this site I presume it's decent.
I have been using Eclipse for some weeks now and I start getting used to it.
However, one thing really annoys me:
When editing JavaScript (I didn't try any other language yet), the editor window keeps jumping to the start of the document I am editing.
This mostly happens when the code currently contains syntax errors and mostly while / after deleting lines.
Especially constructs like { = and sometimes unterminated strings / comments seem to cause this problem.
When it happens, only the view scrolls to the top of the document - the cursor stays where it was before the "jump" occurred.
Anyone having an idea on how to fix this?
I believe the problem described above is related to this bug:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=318095
The work around is to disable the "Link with Editor" option from the Project Explorer. Which is to say make sure the icon with two arrows facing in opposite directions at the top of the file tree is not enabled. Disabling this option resolved the issue for me.
Looks like a problem with the implementation of the JavaScript editor. Most probably the jump occurs when the JavaScript-Parser is not able to parse your document and throws an exception. You might consider to report a bug to the eclipse project (maybe there is already such a report?).
As a workaround you might consider to adapt your way of typing the code a bit. Try to write the code in a way that does not confuse the parser (for example it might help to immediately close a newly created comment and THEN write the content instead of open the comment, write the content and finally close the commend). Same for strings, blocks ...
I am having the same problem. I had this line of code in my file and I could consistently reproduce the issue:
$.preload(preloadImages
, {
base:assetsUrl+'b/images/',
ext:'.png'
});
I changed it to the following and I no longer have the problem.
$.preload(preloadImages, {
base:assetsUrl+'b/images/',
ext:'.png'
});
I get this Phenomenon, when i'm editing in a Java-Class while still residing in a Debug-Process. The Debugger recognises the Change and reevaluates the Code and jumps back in order to be able to reexecute only the changed Code.
Hii i got solution goto
Window->Preferences->search autosave
and disble it and hit apply and close button.
this worked for me !