Develop Reference

How to make this pop up layer in the middle of the page?

I am trying to make the Joe Pilot Chapter 1, link at the bottom right, pop up into a new layer in the middle of the page as wide as the tall as the main body container, but i cant seem to figure out it,
the link is http://alanmcteer.com/v2/
and the jsfiddle.net/vmsfyqz2/
Can someone please help me out? it seems to be popping in the the bottom part only?

You could change the position to fixed on .black_overlay and .white_content so that the body is the parent element.
I updated your fiddle:
http://jsfiddle.net/vmsfyqz2/1/

easies way would be to take the "light"-container and set it directly under the body-node. this should do it.
you are using jquery, why not implementing the "onclick" handler with jQuery ?

What do you call a div that slides out from beneath another div when moused over?

I'm trying to create a Javascript effect I'm sure I've seen done many times before. However, I can't seem to find the right terminology for it. It's not a "slider", or a "slide out menu" or a "slide out tab" or a "tab". So far those terms have caused Google to take me to all sorts of examples and tutorials for things that are not what I'm after.
The effect I'm after is like this:
Div 2 sits behind Div 1 until the user mouses over the visible portion of Div 2, which causes it to slide out to reveal more of itself. When the user mouses away, Div 2 slides back underneath Div 1.
What do you call this effect, so that I can find turorials or Javascript code for it? Or if anyone can direct me to an example or explain how to do it, that would be great.

I'm sorry for a terrible code, but do you need something like this?
http://jsfiddle.net/D7Z8v/
$("#smalldiv").hover(function() {
$("#smalldiv").animate({marginLeft: 200});
}, function() {
$("#smalldiv").animate({marginLeft: 0});
});
You probably need to change "marginLeft" inside hover function on something more appropriate, but it's looks like what you needed.

You can use z-index to have div1 above div2 and then you can either use a CSS animation, jQuery animation to change the position of div2 or you can adjust the width of div2.

Jquery plugin available to display blocks when each one are expanded on event of clicks?

please provide help to choose a plugin which
1) should display 3 blocks of div(width=32%) in a line at first
2)when we click on view more of a particular div, that div should expand(width-64%) still, the other div blocks(width=32%) should find space which will fit them and automatically go and sit in the space available(not random spacing, div movement should be horizontal).
3)This should work when we click on the div which is expanded to 64% to expand it further to 96% and other div should fit in properly without any unwanted gap.
Did try doing it using CSS and simple JQuery(click event), but it didn't work.
Please refer to JSFiddle

Javascript expandme image click

I am using https://github.com/nigma/jquery-expandme plugin in for my page, here is the example
Everytime when you click the bottom grey area, the background image expands to full, and click the grey area again, it collapses to the top part of the image.
This is what I'd like to achieve:
I'd like to keep the up and down arrow function as it is, and to make the click happen on the image itself as well so it is easy for people to use.
1) The down arrow should still show on the bottom when it is the top part of image, so you can either click on the image itself or the down arrow to expand.
2) After it expands to full image, the up arrow should show down the bottom. So you can either click on the image or the up arrow to collapse it to the top image.
I have been trying for a while, but no success. Can some please point me to the right direction?
Thank you,
S:)

EDIT : i think i got it wrong the first time ..
Edit : please follow the link below .
https://github.com/codeiz/jquery-expandme
i have updated the plugin and now it allows more than one controller
but now you have to pass an array as an argument please look at the documentation

I think you can change this expandToggleClass to "exmandme" :
// Class added to expanded element
expandToggleClass: 'expand-toggle', // Class for anchor element that triggers

How to position a hover div based on the position of the element

Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks

If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.