We Keep Coding

Using GreaseMonkey to change Javascript variable

I've got a question regarding a website that I use quite frequently. The website is essentially a browser-based air traffic control simulator. The page uses a php script to load the JavaScript directly into the browser when the game is initiated.
So, here is my question. In the JavaScript code, there is a function that is called when a new aircraft is generated on the screen.
function fnNewOne() { /* New aircraft generation code }
In the code, there is a command that sets the altitude of the plane to a certain height and then stores this value in a global variable. I wanted to know if it would be possible to alter this variable externally using a GreaseMonkey script in order to generate a different altitude. For example, I want flights to only enter the screen at a minimum altitude of 13,000 ft. How could I use GreaseMonkey to target the altitude variable? And when would be most appropriate to change the altitude that has initially been set by the game? What kind of event listener could I use?
If anyone could assist me in this, I would be very grateful.

The answer is that you just write your code in a GreaseMonkey script... There's nothing special about it.
It will be executed after the page loads, but there is a chance that your code will execute before the game initializes, so maybe you should set an interval to 100ms and watch for window.hasOwnProperty('altitude') to make sure the game is initialized (or whatever variable you want to fiddle with) and when that property is found, call whatever code you need and then clear your interval.
This is the best answer I have for you, given how poor your question is. Maybe if you gave us a few more details we'd be able to provide you with some better answers. What exactly are you trying to do? (what variable do you want to change, how and when?) What did you try? Do you have a JS question or a GM question? Have you checked out the GM documentation for examples? (there are very few, very succinct examples from which you can learn 95% of GM in a couple of hours)

live code examples: cytoscape.js initialization -- incomplete?

Being brand new to cytoscape.js, I may be missing something obvious. Please forgive me if that is so.
I am studying the first example offered here:
reached from this page
Three files are offered -- HTML, CSS, JavaScript -- along with the impression that these three will, when loaded into my browser, create a running example.
But the HTML seems to be incomplete, possibly in two ways:
the JavaScript on the jsbin page needs to be included via a script tag
the variable cy is not defined anywhere that I can see, leading to this error message in the console: Object #cy has no method cytoscape
A stack overflow search on that error message points back to the very fine cy.js documentation, but alas, I am still in the dark: where do I initialize the "cy" object?
And best of all, where can I find a complete working example, useful for such a raw beginner as myself, something I can pore over and study until I begin to grasp the logic of this style of programming, and make use of this very fine library?
Thanks!

Your first example is indeed a fully working example. Just use the menu to the top left. Choose File -> Download. This will download a single HTML-file, that works out of the box.
The file is called jsbin.ravecala.1.html. Open with
firefox jsbin.ravecala.1.html
(I also struggled a while before realizing this.)

I really don't know what's your JavaScript & jQuery knowledge level, but it seems you may need to practice it all a little.
Yes, if you're referring to the following tag:
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
This is indeed necessary, as it is the basis of cytoscape.js, the library itself, wich allows, for instance, add the method cytoscape to the variable #cy, as you mentioned in your second point.
The variable #cy is the div itself. jQuery refers to objects IDs this way, with #. So:
<div id="cy"></div>
Can be referred as $("#cy"). Wich adds the cytoscape function to it is the library itself.
I think that this live example is really good, although the one you linked is more basic and appropriate to get known with the basic structure and initialization of cytoscape.js. I suggest you to get known with jQuery (this course was really clear to me) and read the cytoscape.js documentation, which is full of rich examples.

Restyling fine uploader?

I am attempting to use fine uploader to handle some file uploading in a web application I have. I would like to do some restyling but I am stuck on something. In the documentation on restyling they have the following line:
The default drop area, button, and file list elements are also, by
default, contained in this option.
referring to a parent div with the class qq-uploader.
My question is if I can move certain pieces out of this div (in this case the file list elements). The fact that they say "by default" seems to suggest it can be done, but I haven't seen any documentation on how to do it. Has anyone done this before? Can someone point me in the right direction.

I have done this before..but it was little styling..
i have to do is change little bit qq.FileUploader in these properties:
template which define the template for the whole uploader.
fileTemplate which define the template for one item in file list.
I was using older version(i think 2.1)..
my advice to you is to open the js file and look into it..it's good commented and 'll teach how this uploader is working.

You can define a new container to hold the file list, and place it wherever you want. See the listElement option. Probably no need to modify a template in this case.

What does JpegMini use to animate the image comparison on the homepage?

Hopefully the title is clear. I'm talking about the large image comparison slider on the homepage of JpegMini.
I've managed to identify it as needing three core files (written as they are named on the site):
jquery.min.js
jquery-ui-1.8.14.min.js
scripts-0135.min.js
It's this last one I'm unable to find any information about so it may hold the secrets but I don't know.
Anyone got any ideas?

The .imagePairs elements have a mousemove event bound:
$('.imagePairs').data('events').mousemove[0].handler
is a function.
The code is apparent inside scripts-0135.min.js, but it is minified.
What you can do is parsing it through jsbeautifier and see if you can make something out of it. It will still have variable names which make no sense, so it will not be easy.
Looking at the code, it seems like they initialize it with $('.imagePairs').myBeforeAfter, which is most probably the function that handles the effect.

I never was able to determine the script used, in the end I searched the web and found a suitable alternative which came with good documentation. http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

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.