How to inspect if javascript/jquery is loaded in the DOM? - javascript

no examples this time. I am a bit new to javascript. What is the best option to inspect if a certain javascript is loaded in the DOM? Let's say now I applied colourbox to my site, but still its not working, so what I want to see if it is a problem with javascript or somewhere else.
Also, what is the best tool to inspect on a certain javascript online. Let's say I want to do something similar to: http://muthemes.com/yield/ - a javascript slider with borders from left and right, that starts with text "Advertising projects, graphic design jobs, architecture assignments". I really do not understand which script is loaded for this. Can you please share some wisdom with me in order not to create such post's in the future. Thanks! I will appreciate very much.

for Firefox: Firebug. Chrome, Opera and IE have similar build-in functions (just press F12 / search for "developer console" on google).
This tools provide a console, detailed error-messages, debugging tools, dom- and css-inspectors and a lot of other useful stuff to make inspectinig and debugging a website very easy.
just install/open and play around to get used to this tools. they're almost self-explaining. For more information, there are a lot of wikis and good tutorials out there in the www - just ask google for help.

Related

internal implementation of DataTransfer.effectAllowed in firefox and chrome browser

I'm currently studying the HTML5 drag and drop API on MDN and I'm interested in learning a bit more about how DataTransfer.effectAllowed
is implemented in firefox and chrome browser.
Because the source code for both browsers are huge and it is a difficult task for someone unfamiliar with the source code to find exact what they are looking for, so I was just wondering whether anyone can share their experience/strategy in searching through their source code?
I'm not sure about Chrome, but I'll try with Mozilla Firefox. Even though it's huge, the Firefox codebase is searchable using two different engines: Searchfox and DXR. Both are great and have different pros/cons.
Searchfox:
it's fast;
it's easy to follow the code by looking up symbols/implementations and keep digging through the code from there.
DXR:
is much more flexible;
doesn't render RST files automatically (that's a pro to me :D).
Now, to your question, let's look up DataTranfer.effectAllowed using searchfox.
In the searchbox on the left, write `effectAllowed".
This gives a bunch of stuff, JS and C++. The second result comes from dom/events/DataTransfer.h, which might be what you're looking for.
Let's restrict the search to .cpp files by writing *.cpp in the box on the top right.
The second result will be from dom/events/DataTransfer.cpp which is exactly where the implementation lives. See here.
From there, depending on what you're looking for, you can keep investigating. I hope this helps :)
Update: steps for searching Chromium's source
Turns out Chromium has a similar service for searching through the code base. The steps are quite similar as well!
Go to https://cs.chromium.org/ .
Write EffectAllowed in the searchbox at the center of the page.
You'll be presented with a drop down with some results. Pick setEffectAllowed (in blink::DataTransfer), the one with the .cc implementation file.
Browse to here and have fun!

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!

How do I post a jsfiddle example of some trouble I'm seeing in Rails?

This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).

Storytelling Scrolling

Can someone please identify how this site has the effect of sliding through pages? Mainly how it pulls down one page up and onto another. Is it Javascript? I think it is very well done.
http://hire.visualidiot.com/typestacks
Thanks!
Joe
helixed's answer explains how they did it. However if you want to recreate the effect yourself have a look at using Parallaxjs rather than taking potentially copy-written code.
See the demo site: http://stolksdorf.github.com/Parallaxjs/
And source: https://github.com/stolksdorf/parallaxjs/
Edit: There is a bug with that website, try holding down the arrow key for a few seconds before letting go.
I opened it in Safari and disabled JavaScript. The sliding effect went away (although it degrades nicely). Clearly JavaScript must be involved somehow. Okay, so I popped open Chrome Developer Tools and looked at the resources. There's a script called handler.js. I opened it up and sure enough there's some nicely documented code. It looks like it's using jQuery animations. Take a look at the script. You should be able to figure it out from there.

Javascript optimization - Is there an easier way to speed up Javascript?

I wrote a hefty script in JS and I want to optimize it to run faster, but going through function by function and performing a "speed test" is taking too long. Anyone know of a better way? I've heard you can use firebug, but I haven't found any helpful links of how to go about that..
The page I'm optimizing is here:
http://flanvas.com/development/flanvas/examples/custom-class.html
I'm specifically trying to optimize the flanvas.js which is here:
http://flanvas.com/development/flanvas/flanvas.js
Any direction of where to go from is very helpful. Thanks!
Use FireBug, or the Developer Tools in Safari or Chrome. In Safari/Chrome, go to the "Profiles" tab, click the "Enable Profiling" button, and hit the 'record' button. After you've done enough testing, hit it again to capture the profile.
You'll get a wonderful list breaking down your functions by the time they took, the time other functions that they called took, and multiple ways to sort it.
Rather than walk you through this, I'll give you some of the Google searches you should have done before asking this question:
http://www.google.com/search?q=profiling+javascript+firebug
http://www.google.com/search?q=profiling+javascript+chrome
You want to do profiling first for your javascript code to find which part of the code is the slowest. Of course, the main tool for that is firebug. Firebug is a very great tool for profiling.
You may also want to see this question for some more help:
What is the best way to profile javascript execution?
If you are using Firefox, firebug is a good tool, it can also give you some basic ideas on how to speed up javascript.
More at http://getfirebug.com/whatisfirebug
You can download it as JS code, and add it to your file if you are using other browser.
Still, there are other tools around, if that doesn't help... but it is a good start

Categories