Develop Reference

Row of blocks - click on one and the rest slide off the screen

I have a row of blocks. When one is clicked, I want the rest to slide off the screen and have the clicked box in the first position.
for example
I tried to mess with jQueryUI slide but it didn't seem to help. Here is a JS Fiddle showing the original blocks. Maybe I need to position them differently than floating? I thought about trying to move the distance left and off the screen but the animation looked awful.
$('.block').on('click', function() {
$('.block').not($(this)).hide("slide", { direction: "left" }, 500, function() {
});

$(document).ready(function(e) {
$('.block').each(function(item) {
$(this).click(function() {
$('.block').not($(this)).hide('slide', {direction: 'left'}, 500);
})
});
})
You still need to include jQueryUi, bellow jQuery, in order to achieve the slide effect.

Menu toggle different animation on every second click?

I've created a fiddle
http://jsfiddle.net/d9wf1s44/
When I click the hamburger menu, the breadcrumbs toggles away to right, and after that the function executes which shows the menu.
$menu_toggle.on('click', function(e){
e.preventDefault();
$(this).toggleClass('open');
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeToggle(600);
});
});
Now the issue is that when I click again, naturally, the same thing will happen, the breadcrumb will toggle and menu will fade out. It's just that I'd like first the menu to fade out, and then the menu to toggle in. How can I do that? animate is used for css manipulation and I tried doing everything with css transitions and delay, but couldn't achieve the nice result like here, I like the toggle animation that the breadcrumbs has, so that's why I'm using toggle (also the breadcrumbs get display none, so the menu is right next to the icon).
How can I control what happens on second click? How to separate this?

You have to make alternate animation for close the menu
after you toggle class "open", you have to do as below :
if($(this).hasClass('open')){ //open function
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeIn(600);
});
}else{
$navigation.fadeOut(600, function(){
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800)
});
}
you can check my jsfiddle demo http://jsfiddle.net/euds0n6x/

Javascript Scroll by one pixel on load of a div

I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?

Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});

Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);

Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}

trying to make a div slide down and up from top of page using - top positioning and jquery animate upon click

basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.
$(document).ready(function(){
var orig = $(".dropDown").outerHeight(); // 104
var top = $(".dropDown").css("top");
if(top == "0px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "-100px"}, 400,
function(){
var top = $(".dropDown").css("top");
alert(top);
})
})
}
// else{
// $(".selector").on("click", function(e){
// $(".dropDown").animate({top : "0px"}, 400);
// $("body").css({"background-color" : "green"})
// })
// }
if($(".dropDown").css("top") == "-100px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "0px"}, 400);
$("body").css({"background-color" : "green"})
})
}
});
logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.
Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.
while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.

You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300 value just specifies how fast you want it to slide.
Example:
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
});
updated jsFiddle
Edit
Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.

Animate showing and hiding login box

I am trying to create a jquery animated loginbox.
I am a total javascript/jquery noob.
I have a div that contains the loginbox. That div is about 150px in height, and it is placed at the top of the page, so that only the bottom 15px of the div are visible when the page is loaded.
I am trying to slide down the div so that the rest of the login box is revealed on click, and make it slide back up when the bottom part of the div is clicked again.
Now, I am doing:
$('#showLogin').click(function(e){
$('#formContainer').animate({top: "+=135px"} , 1500)
e.preventDefault()
})
What this does is animate the slide down of the div. But how can I check if it has already been slided down so I can slide it back up?
Should I check for the position of the div and decide if it should move up or down, or is there a better way to do it?
The website is here

I think you are looking for .slideToggle(). An example: http://jsfiddle.net/FL4zZ/

Try this jsFiddle example. It animates a div with a form within it on click, and retracts it once it's fully extended.
The basic jQuery is:
$('div').click(function() {
var pos = $(this).css('top')
if (!$(this).is(':animated')) {
if (parseInt(pos, 10) == 0) {
$(this).animate({'top': '-35px'}); // anim up
}
else {
$(this).animate({'top': '0px'}); //anim down
}
}
});