Handling JS Events from SoundCloud Widgets - javascript

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.

Related

How would you find a JS function that prevents link clicks without using the filesystem?

I have what seems like a basic question, but may be more complex. I've been writing JavaScript for many years now, but never actually ran into a situation like this before so I'm curious...
Let's say there is a website that has many different developers working on many different JavaScript files. As you're using the website, you notice that a clickable link (that should be clickable) no longer works- as if it was purposefully prevented via JavaScript. Without manually going through the filesystem, how would you find what/where it is being prevented?
I've thought about this myself and the only thing I could come up with is the Chrome DevTools step feature and step through everything that happens on click of the link until you find what blocks it, but that could still be time consuming if there is a lot of functionality tied to the link.
Let's look at two actual code snippets to visualize the problem.
Here is an example link in the HTML:
<a id="the-link" href="https://example.com">Do Something</a>
Here's one way of stopping the link click in vanilla JS:
document.getElementById('the-link').addEventListener('click', function(e){
e.preventDefault();
});
That JS code could be anywhere... so how would you find it?
What if that code was using jQuery? That makes the DevTools step feature even more convoluted because it needs to step through both jQuery() and on()- not to mention any other functionality that also listens for the click event.
jQuery('#the-link').on('click', function(){
return false;
});
I'm curious how others would approach this...

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

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

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!

JQuery/Javascript process question

I've inherited someone else's project and am building a work flow diagram for it. Without getting into too many details the person who left was the only person in the web department with advanced programming skills (most people there do production work and some HTML/CSS stuff). The project I inherited was developed in CodeIgniter and leans heavily on JQuery, AJAX and JSON. The flow is a bit confusing hence my outlining it. (I'm getting to the question, bear with me)
Anyway, the manager of this department, let's refer to him as The Tool, won't allow his people to learn any of this stuff. He asked me the other day how it was coming and I said fine except I can't find where one variable is being set, the original developer is using jquery to call some form value to set a path to files (he using #id.val()) but I can't find #id anywhere in the code. The manager replies, eh, I thought you were the PHP guru. As I said, we shall refer to him as The Tool.
Anyway, to stick it to him somewhat I've decided to share these flow pages with people in his group, make them very descriptive and hopefully educational. I'm explaining how when a change is made from a select menu jquery/javascript recognizes that change and fires off related code in JS.
Then it dawned on me that I really didn't know how JS/JQ knew the change had been made. I know the code ($("#id").change()...I have an AppleScript background and in that language there's an idle command, you basically can have a script sit in the background observing and waiting for X to happen (say the user launches Photoshop) and when that event happens the rest of the code is run. Does JS do something similar?
This code:
$("#id").change()
tells jQuery (the "$") to find the element whose "id" value is (in this case) "id", and then to trigger a "change" event on the element. That will cause event handlers registered to look for such events on that element to be run. That's the basis of just about everything you do with JavaScript in a browser: responses to events.
Somewhere, there's probably one of these:
$("#id").change(function() { ... })
$("#id").live('change', function() { ... })
$("#id").bind('change', function() { ... })
There are many ways for the element to have been identified for setting up the event handlers, however, so it may be tricky to find.
In newer versions of chrome you can inspect a html element, and this will also show 'classic' events that are bound to it.
Increasingly good developers are moving to event delegates such as:
http://developer.yahoo.com/yui/3/event/#delegate
Which will likely not show up in Chrome, but should be readable from the code.

Catch all DOM events on a page (without Firebug et. al.)

How would I go about creating a cross-browser script, that would intercept all events firing on
a page/browser window/DOM-tree (regardless of browser)?
What I'm hoping to accomplish is basically to get a better understanding of the different handling
of events in different browsers; I know the basic theory, but need to see to believe...
ADDED
I'm pretty well versed in both using frameworks, and working with "pure" Javascript.
What I want is sort of :
document.addEventListener('*', function(e){
alert(e.type + ' is happening on ' + e.target), false);
};
The only thing that you can do to play around with is find out all events that exist and create a list of controls each with a different event and then label them accordingly and some alert boxes.
Then you can start firing the events and see how they are executing based on the alert boxes.
In future coding you could also use a JavaScript library that basically changes almost every existing JS code and functions so they they are all cross-browser.
Examples are(order of preference):
MooTools
JQuery
Not required but make life much simpler when it comes to cross-browser and creating fancy controls.

Categories