We Keep Coding

FadeIn Div at Mouse Cursor on Keypress [Javascript/JQuery]

I'm trying to make a dynamic javascript menu (contained in a div) appear at a visitor's mouse coordinates when they press ctrl+m on their keyboard (m signifying menu, and ctrl+m not being bound in most browsers as far as I'm aware). This way, wherever they are on my site and wherever their mouse is, they can pull up the menu by just pressing that combination and return to wherever they wish to go. At the same time, having the menu not shown until they press the key allows me to control the design experience completely without having to worry about a nav menu.
I've pulled together two different pieces of code I found on here in an attempt to do this myself, but I'm running into an unexpected issue.
I'm not sure how to denote the ctrl+m key combination in the event handler.
I'm getting a couple of errors on the code checker that I'm not sure how to fix myself.
I'm not sure how to make it so that the menu appears on ctrl+m, and stays there until ctrl+m is pressed again (a toggle switch).
I'm still learning how Javascript works.
Here's the link to the progress I've made so far: http://jsfiddle.net/nrz4Z/

In your example, you're binding the mousemove handler inside the keypress handler. You need to do them separately:
var mouseX;
var mouseY;
$(document).ready(function () {
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(document).keypress(function (event) {
if (event.which == 109) {
$('#examples').css({
'top': mouseY,
'left': mouseX
}).fadeIn('slow');
};
});
});
That should allow you to get the position at which to show the menu.

Firstly the use of keypress is not a good idea - web is something that is on an unknowable amount of browsers and devices and plugins and you don't know what shortcuts are bound to especially ones using modifiers with a single key (in this case cmd+m or ctrl+m is an OS shortcut to minimise the window on many OSes. ctrl exists as cmd in os x and not at all on phones.)
To detect multiple key presses check here: Can jQuery .keypress() detect more than one key at the same time?
Next you can detect mouse movements and store them in a variable for use anywhere: How to get mouse position in jQuery without mouse-events?
Your menu should then be at the bottom of the DOM with only body as it's parent:
<nav>
<p>My Menu</p>
<nav>
</body>
Your nav should have whatever styling it needs in the css, as well as:
nav {
position: absolute;
display: none;
/*z-index: 700; nav is at bottom of dom so it will go above anything without a z-index but you may want it to go over other things */
}
When you have detected your key-presses you should do:
$('nav').css({top: mouseYCoord, left: mouseYCoord}).show();
Obviously give your menu a more useful name and don't select upon all 'nav' tags.

How do I change this script to use a number to show content using JQuery?

This is my code:
$( document ).ready(function() {
var target = $(".passthis").offset().top-$(window).height();
$(document).scroll(function() {
if ($(window).scrollTop() >= target) {
$(".something").fadeIn(2000);
}
});
});
HTML:
<div class="passthis" style="text-align:center;font-size:20px;margin-top:815px;">
Scroll Below here
</div>
Right now this code will show div.something only when the user passes div.passthis. The .passthis div is exactly at the bottom of the screen. Howver, I want to move .passthis the middle of the screen but being new to JS i am unsure how i can modify my script to do that. Can I use a number for x,y or something?
Question:
What can I do to move the .passthis to the middle of the screen and still make .something show after the user passes .passthis.

Here is a jsFiddle demo that you are welcome to play with. As I explained, if the window never scrolls, nothing is going to happen (.something will never appear). Additionally, you can see the numbers for the different values in this demo. It should give you an idea of what you're shooting for as far as the MATH of it all is concerned. As recommended above, you should read up on jQuery's .scrollTop() and other window dimensional methods and values.

jQueryui animation with inital undefined height

See the following fiddle:
[edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ]
http://jsfiddle.net/NYZf8/1/ (view in different screen sizes, so that ideally the image fits inside the %-width layouted div)
The image should start the animation from the position where it correctly appears after the animation is done.
I don't understand why the first call to setMargin() sets a negative margin even though the logged height for container div and img are the very same ones, that after the jqueryui show() call set the image where I would want it (from the start on). My guess is that somehow the image height is 0/undefined after all, even though it logs fine :?
js:
console.log('img: ' + $('img').height());
console.log('div: ' + $('div').height());
$('img').show('blind', 1500, setMargin);
function setMargin() {
var marginTop =
( $('img').closest('div').height() - $('img').height() ) / 2;
console.log('marginTop: ' + marginTop);
$('img').css('marginTop', marginTop + 'px');
}
setMargin();

Interesting problem...after playing around with your code for a while (latest update), I saw that the blind animation was not actually firing in my browser (I'm testing on Chrome, and maybe it was firing but I wasn't seeing it as the image was never hidden in the first place), so I tried moving it inside the binded load function:
$('img').bind('load', function() {
...
$(this).show('blind', 500);
});
Now that it was animating, it seemed to 'snap' or 'jump' after the animation was complete, and also seemed to appear with an incorrect margin. This smacks of jQuery not being able to correctly calculate the dimensions of something that hadn't been displayed on the screen yet. On top of that, blind seems to need more explicit dimensions to operate correctly. So therein lies the problem: how to calculate elements' rendered dimensions before they've actually appeared on the screen?
One way to do this is to fade in the element whose dimensions you're trying to calculate very slightly - not enough to see yet - do some calculations, then hide it again and prep it for the appearance animation. You can achieve this with jQuery using the fadeTo function:
$('img').bind('load', function() {
$(this).fadeTo(0, 0.01, function() {
// do calculations...
}
}
You would need to work out dimensions, apply them with the css() function, blind the image in and then reset the image styles back to their original states, all thanks to a blind animation that needs these dimensions explicitly. I would also recommend using classes in the css to help you manage things a little better. Here's a detailed working example: jsfiddle working example
Not the most elegant way of doing things, but it's a start. There are a lot more easier ways to achieve seemingly better results, and I guess I just want to know why you're looking to do image blinds and explicit alignment this way? It's just a lot more challenging achieving it with the code you used...anyways, hope this helps! :)

JQuery animated banner

So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.
How do I get the width and the moving of the blocks to animate simultaneously like in the banner animation I am trying to replicate?
How do I get the block to slide back to the original position instead of just kind of 'transporting' there?
I am only beginner at jQuery so any help would be amazing.Thanks.

As for the positioning problem: you need to drop the left declaration in your second function.
Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:
function() {
var position = $.data(this, 'position');
var ind = $(this).index();
//moves image back to original position
$('#container div').each(
function() {
$(this).animate({
right: "",
width: 100
});
});
});
Working example here.

I see you have a response.
In case this version is of any help to you:
http://jsfiddle.net/vCbcz/
Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.
$('#slider').animate({
marginLeft: '-' + ind * 105 + 'px'
});
and back
$('#slider').animate({
marginLeft: 0 + 'px'
});

There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.
Live Demo http://jsfiddle.net/Jaybles/WEzny/

Div width expand/shrink on click

For a site I'm making for myself and a friend, I have a div container/wrapper with 2 other divs within it: one occupies the left half and has a black background and the other occupies the right with a white background. Essentially, this lets me get a split colored background. Each div holds half of a logo. Here's the page, temporarily hosted so you guys can see it.
http://djsbydesign.com/tempsite/index.htm
At any rate, I'd like to have links on the left and right hand sides of the page that, on click, cause their respective divs to expand from 50% to 100%. I have a few ideas, but am not sure entirely how to go about doing this (I'm rather new to javascript). The first would be to have the expanding div's z-index set to something higher than the non-expanding one, and then have it expand (somehow), and the other is to have the expanding div expand to 100% while the other shrinks to 0% at an equal rate.
The bottom line is, I have no idea how to go about doing this. I don't mind using mootools or jQuery, for the record.

The following seems to work:
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
});
Albeit I'm not sure how you'd plan to bring back the the 'other' div.
JS Fiddle demo.
Edited to add a button (via jQuery) that allows both divs to be reverted to original dimensions:
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Updated JS Fiddle.
Edited to address the question left by OP in the comments:
is there a way to have a page redirect after the animation completes?
Yep, just add the line window.location.href = "http://path.to.url.com/";
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Updated JS Fiddle.
Edited in response to bug report (in comments):
The one other bug (easy fix) is that any time you click on either of the divs, it creates a new button. So say you clicked on the left half, and it expanded and filled the page, etc., and then you clicked on it again (it being anywhere on the page now). It would attempt to add a second button.
To prevent a second button being added to the div just add an if:
$('#left-bg, #right-bg').click(
function(){
if (!$('.show').length) {
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
}
});
Which, will only append a button, or indeed animate the divs, so long as the $('.show') selector returns no matches.
However if you're also redirecting to another page by clicking the button it shouldn't be an issue anyway, since none of the jQuery on the original page will exectute/be able to access the page to which the user is redirected (unless it's a page on your own domain, and you've explicitly chosen to add the same button).

If you give absolute positions to your div's such that - 1st is positioned at top left corner and other is positioned at top right corner. And then in click event you can change the position of the other top corner of the div to be expanded.
You can use jquery to do this easily. Check jquery documentation for setting css.

Looks like you've got jQuery included, so use that! It's totes the easiest library to do simple animations with.
Here's an example click function that will slide the right background to be 100% like you said:
$('a#link').click(function(e) {
e.preventDefault();
$('#left-bg').animate({ width : '0%' }, 'slow');
$('#right-bg').animate({ width : '100%' }, 'slow');
});
Obviously to go in the other direction you'd switch the width values in the object passed to the animate functions.
If you're not familiar with the animate function, check the docs, but basically you just pass CSS rules in a key : value object to it, and it'll change the CSS values over time - animating it!
Hope this helps!