We Keep Coding

Advice on how to accomplish background scrolling in all directions

I'm trying to figure out what is the best way to begin creating an effect like (https://howifight.53.com) where the background is scrollable/draggable in all directions.
I know the technology behind this is pixi.js however, I can't seem to dig out how this effect is achieved. Any pointers in a good direction would be awesome.

First, you need to set up the page and styles.
You need a containing element to contain the HTML you're moving around (using overflow:hidden). Then you need an element within that to actually move around with JavaScript.
Then you need to implement some drag/drop functionality. Capture mousedown, then capture mousemove and update on each requestAnimationFrame, then stop dragging with mouseup is triggered.
That's a very basic overview, but I've mocked up an example for you to look at: jsFiddle. Feel free to ask any questions.

Creating Drag Drop div layout

I want to create a iGoogle kind of layout in which you can drag and drop different widgets in different places. I have to use javascript or jquery only. I wanted to know how to go about it. Basically how to start and implement this kind of structure.
P.S.: I cant use any specific framework which does this job. I have to create it myself.

You can also use draggable and droppable jquery plugins. See example here
http://jqueryui.com/droppable/#revert
update
You have to write your own dragable function. The trick is you listen to onmousedown event and then redraw the element at current x, y postion.
Look at this example
Note : if you want to learn, then do not copy paste the example. Try to understand and then implement on your own !

Check out jQuery UI's Sortable interaction functionality, should give you a good starting point.
http://jqueryui.com/sortable/#display-grid

Undo button Html5 JavaScript

I want to create an undo button for my web application using javascript. Can someone please help. Basically i got an web app which has got features such as Drawing, Image effect, and Drag and Drop. These functionality are performed on one canvas. All i need is an #Undo button so that if i do a mistake i can go one step backwards. I cant use Jquery. I am looking for a pure javascript to implement that function.

You haven't given much info, so I'll make assumptions.
Assumption 1: all you user drawing interactions are recorded in an array.
If this is true then simply clear the canvas and redraw the interactions from the array to interactionArray.length -1;
Assumption 2: You're using multiple canvas.
If this is true, hide/remove the last (most top) canvas element.
If you're not using either of these methods, maybe look into these methods. Or give us more information on the the method you're currently using.
Note: There are certainly not the only methods to including an "undo" feature!)

Depends on your web application, but shouldn't this do?
<button type="reset">Click Me!</button>
or in js:
Reset Form

Use jQuery to select, then use YUI to animate? Good idea?

jQuery's animation engine isn't working well for me. It doesn't have easing and color animation built-in, and the plugins I am using for them don't work properly together consistently.
I've had good experience with YUI's animation engine in the past. Is it possible to use jQuery to select items, and then use YUI to animate them? Here's my current jQuery-animated code to animate a div when you click it:
$("div.article").mousedown(function() {
$(this).children(".box").animate({height:'+=100px', paddingTop: '24px'},300);
$(this).children(".box").children(".subBoxA").show().animate({opacity: "1"}, 500);
});
How would I go about converting the animations in this function to YUI3?
(Is this even a good idea? Should I just convert everything to YUI3, selectors and all? Also, if this comes across as a dumb question, forgive me, i'm a noob)

Part of the benefit of these javascript libraries is that you get a ton of functionality in a smaller amount of code. By including both JQuery and YUI, you are quickly increasing the size of your pages.
If the only thing you are using jquery for is to select elements in the DOM, then definitely convert to YUI as it has many of the same selection methods. If you are using several pieces of both jquery and YUI, then mixing them may be something you have to live with for now.

If you are animating a single element, you can do something like this:
YUI.use("anim", function (Y) {
$("div.article").mousedown(function () {
var el = $(this).children(".box")[0],
anim;
anim = new Y.Anim({
node: el,
/* animation configuration */
});
anim.run();
});
});
AFAIK, YUI does not support animating multiple elements out of the box, though you could implement it using the tween events.
I suspect you are better off using jQuery UI, however. It provides color animation and advanced easing.

Dynamically moving div, like Yelp's moving map

I am trying to implement something very similar to Yelp's moving map. See:
http://www.yelp.com/search?find_desc=restaurants&ns=1&find_loc=mountain+view%2C+ca
Basically it starts off somewhere in the middle of the page, but if you scroll down far enough that you wouldn't be able to see it, it moves down as well. What is the best way to do this in javascript? My app is in GWT, but I think I will have to use native js to achieve this effect.
Thanks,
Jean

you need some sort of a scroll event handler. either register body.onscroll yourself or use a pre-existing component in any of a number of javascript frameworks. Google 'javascript scroll event' and you'll find plenty