How to trigger RaphaelJS Element.click() with jquery? - javascript

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

Related

How can I find jquery/javascript/modernizer code responsible for a effect

I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.
I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.
I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...
Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat
The problem becomes more dramatic when the website using other java framework than jQuery.
I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing
edit:--
I found a way but I'm sure there should be a better way outside
first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)
after that i play with that element to trigger the function and it break
usually the function that called the method is down in the callstack
also for reading
also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?
It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.
You mention that the code is not in human readable form, beautifying it may help:
https://stackoverflow.com/a/6318092/1061602
Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc
Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.
My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.
The usual documentation sources will be useful:
http://www.w3schools.com/css3/default.asp
http://api.jquery.com/
Happy learning!

Set cursor to end of textarea- setSelectionRange() broken on Firefox?

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.

svg dragging targets whole <object> instead of mouse-handlers?

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 :-)

Handling JS Events from SoundCloud Widgets

I am a javascript novice trying to work with SoundCloud's new HTML5 widgets. I don't entirely understand events yet. The docs page just says
SC.Widget.Events.[something] — fired when [thing happens].
(via http://developers.soundcloud.com/docs/html5-widget).
a code example would be great, and perhaps a basic explanation of how events work. right now i make elements interactive with
element.setAttribute("on[Something]", [function]());
which i understand is not the best way to do this and shows a lack of understanding of javascript events.
anyways, even a link in the right direction would be nice; i've been searching in vain for a clear explanation of event handling in javascript that goes beyond onclick etc.
take a look at the playground: http://w.soundcloud.com/player/api_playground.html
and here is working example with play event.

fancybox-like inline popup implementation problem

i'm busy writing my very first jquery plugin and i ran into some problems. I have modified and customized other people's plugins quite succesfully in the past, but i'm more a designer than a programmer and this is my first javascript/jquery experiment build from scratch. with a lot of research and plenty of try and error i managed to realize most of the features i wanted. and besides the code probably being dirty, inconsistent and a pita for every pro, the plugin is working pretty well. the problem i have is, the way i've written it, i apparently cannot use more than one intance of the plugin on one page. if i do, it breaks appart. i tried to wrap the whole thing into a this.each function, but this as well breaks everything appart. right now, i have no clue at all, how to make this work. I'm grateful for any suggestions or hints, as my brain slowly starts to boil.
here's the little sucker: the .js file
you can see it in action here: demo
when you say more then one instance, I'm imagining a clone of your demo, so two of the same thing on one page.
one problem I see is that you are using ID's in your plugin, and you shouldn't be using ID's when you want multiples of the same thing to be able to live on the same page. try and switch to classes.

Categories