Develop Reference

Login slider with jQuery issues

I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!

Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.

slideUp/slideDown is not consistent

I want to slideDown() a div when the appropriate radio is selected, and slideUp the active one.
However, as it is now, in some cases it's being pushed down, in other cases pushed up.
(Private -> Shop = Up, Shop -> Private = Down)
I want it to always be pushed down. What am I doing wrong?
Here's the current state on JSFiddle: http://jsfiddle.net/mfmU7/
And the raw Javascript code:
$(document).ready(function() {
$("#private").click(function() {
$('#registration-brand, #registration-shop').slideUp();
$('#registration-private').slideDown();
});
$("#shop").click(function() {
$('#registration-brand, #registration-private').slideUp();
$('#registration-shop').slideDown();
});
$("#brand").click(function() {
$('#registration-shop, #registration-private').slideUp();
$('#registration-brand').slideDown();
});
});

It's all about position in the DOM (or z-index):
$(document).ready(function() {
$('.btn').on('click', function() {
var that = $('#registration-'+this.id);
$('.registration-type:visible').not(that).slideUp().before(that.slideDown());
});
});
FIDDLE

I had same problem and I resolve it by adding:
position:absolute;
bottom:85%;
to CSS and it solves your isue here
but then u have to again place those divs
Here: http://jsfiddle.net/isair/mfmU7/4/

The problem (that some slide up visually and some slide down visually) is caused because, in your original code, all the animations are occurring at once and the divs are vertically placed one above the other. So the top one looks like it is sliding down but the other two, while sliding down, look like they are popping up from the bottom because of the one that is in the process of hiding.
I like doing it this way so one action doesn't start until the others are over:
$("#private").click(function() {
$('#registration-brand, #registration-shop').slideUp(function() {
$('#registration-private').slideDown();
});
});
FIDDLE HERE
The problem with doing that (like I usually do) is that the function gets called twice, once when the already hidden div finishes hiding, which is almost immediately, and once after the other div finishes hiding (4/10 sec later). The second one does nothing because the appearing div is already fully visible (or almost so).
So ... another solution is needed.
This one has a whole different look because it waits until both slide up actions are done (even though one div is already hidden) before starting the slide down. The 'promise()' creates something that will be finished when all the 'slideUp()' calls complete their animation and the 'always()' calls the function when that is done.
$("#private").click(function() {
$('#registration-brand, #registration-shop').slideUp().promise().always(function() {
$('#registration-private').slideDown();
});
});
ALTERNATE FIDDLE

Troubleshooting Jquery Show/Hide With Nested Divs

I've managed to get this working with:
<!--
function resettoggle() {
document.getElementById('imagecarousel').style.display = 'none';
}
function displayImages() {
document.getElementById$('#imagecarousel').style.display="block";
}
$('#imagecarousel').fadeIn("slow", function() {
// Animation complete
$('#portfolio').click(function () {
$("#imagecarousel").toggle();
});
});
-->
and adding onLoad="resettoggle()" to the body tag
I now only need help with 2 things:
I have the div set to fadeIn, but it seems to be flying in at the speed of light.
When the page loads, you see a flicker of the slideshow before it disappears. Not sure how to implement the resettoggle function in a way that keeps the hidden div completely out of view?

you can use fadeToggle():
Display or hide the matched elements by animating their opacity.
$("#portfolio").click(function () {
$("#imagecarousel").fadeToggle("slow");
});

fadeIn as callback function after fadeOut doenst work as expected

In my HTML a#navInnerMapR and a#navInnerMapL are contained within div#navTwo.
The following code is within a function. When called, I need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR.
$('div#navTwo a').fadeOut(200, function() {
$('a#navInnerMapR').delay(100).fadeIn(200);
});
The code fades out the links but doesn't fade anything in. I thought that they delay would only start once the fadeOut finishes, however changing the delay value to 1000 makes it sometimes work but its very buggy. Thanks
UPDATE Here is a fiddle showing that the hidden link starts to be shown before the visible is hidden: http://jsfiddle.net/jamesbrighton/d9QKr/5/
UPDATE Apologies, my question doesnt include the full details of what I need to achieve. I simplified it as I thought I just had some sort of sytax issus that could be easily fixed.
div#navTwo actually contains 3 links. At any point (other than the delay before animations run) only 1 link is visible. I need to be able to call a function that will hide either of the other 2 links that are being shown, and then show a#navInnerMapR.
Different events will call this function, so either of the 2 links that arn't a#navInnerMapR may be visible. Thanks
UPDATE I think this fiddle illustrates the issue. Ive created 2 div.nav's to illustrate different states. Ive hidden different links with inline CSS in each one. JavaScript will be showing and hiding the links in my div repeatedly, so the same div will look like each example at different times.
Ive created 2 triggers to illustrate that different events will need to call the function. When you click on a trigger you can see the issue with both examples. The visible divs are not hidden before the a.one is shown. Thanks for your patience!
http://jsfiddle.net/jamesbrighton/dYvMS/24/
Interesting point, if I change $('.nav a.one').fadeIn(1000); to an alert, the alert fires multiple times! No idea why this would be the case!

Edit: Updated answer based on your below comment,
Yes this works as I need, but im not sure it will work for my actual
page. Sorry for my question not being detailed enough. The code
example I gave is simplified. In the actual page their are 3 links
within div#navTwo, at any time only one of them will be visible. I
need to be able to call a function that hides any links and shows a
specific one, but either one of the other 2 links in div#navTwo may be
visible. Thanks
DEMO
HTML: Added class to all links inside navTwo
<div id="navTwo">
Right
Left
Middle
Upper
Lower
</div>
JS:
$('.links').click(function() {
showHide($(this));
});
function showHide($this) {
$this.fadeOut(1000, function() {
$('#navTwo a').not($this).delay(1000).fadeIn(1000);
});
}
I think I understood what you need. Try below DEMO and let me know if that is what you want,
DEMO
$('#navInnerMapR').click(function() {
runMeR($(this));
});
$('#navInnerMapL').click(function() {
runMeL($(this));
});
function runMeR($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapL').delay(1000).fadeIn(1000);
});
}
function runMeL($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
}

As you said, You need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR (not other links, only a#navInnerMapR).
$('#navTwo a').click(function(e) {
$(this).parent().children().each(function(i){
$(this).fadeOut('slow', function(){
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
});
});​
A fiddle is here.

.fadein with javascript

Does anyone know how I can make this bit of code have a .fadein property? Preferably .fadein medium speed would be the best. Thanks!
<script>
function LinkOnClick4(box) {
$('#friendresults').load('conversation.php?id=' + box);
}
</script>

First hide the element, load it's contents, and then use the callback function of the load function to fade it back in:
function LinkOnClick4(box) {
//select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
$('#friendresults').hide().load('conversation.php?id=' + box, function () {
$(this).fadeIn(750);
});
}
If you want the element to keep its space in the page (not totally disappear) then you can just set it's opacity rather than using the .hide() and .fadeIn() functions:
function LinkOnClick4(box) {
//select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
$('#friendresults').css({ opacity : 0 }).load('conversation.php?id=' + box, function () {
$(this).fadeTo(1, 750);
});
}
The difference between the two code-blocks is that the first one will allow elements relatively positioned around the #friendresults element to shift when it's hidden, and the second code-block keeps the page from shifting around when the #friendresults element is hidden/shown.
Some docs if you need more help:
.hide(): http://api.jquery.com/hide
.fadeIn(): http://api.jquery.com/fadein
.fadTo(): http://api.jquery.com/fadeto
.css(): http://api.jquery.com/css

Style #friendresults to be hidden then call
$('#friendresults').load('conversation.php?id=' + box, function() {
$('#friendresults').fadeIn()
});