Develop Reference

how to return animation to it's original size and position on a click

I am relatively new to all this so if you see anything I am doing wrong, or anyways to simplify any code please do not hesitate to say.
I have the following code to enlarge the div element:
var profilePostsClick = function () {
$('.largeBox, .smallBox, .longBox').click(function () {
$(this).animate({
width: '100%',
height: '40%'
}, 200);
$('.closePost', this).removeClass('closePostHide');
});
};
$(document).ready(profilePostsClick);
https://jsfiddle.net/jvkhmpbt/
I am wanting to close each div when the cross is clicked, returning it to it's original size and positioning (with height: auto if feasible).
Aslo is there a way to make it so each div opens above the smaller ones? (like the top left div does, i am aware this is because of it's positioning)
Thanks

You can do like following way by adding and removing class
JQuery:
$('.largeBox, .smallBox, .longBox').click(function (e) {
e.preventDefault();
$(this).addClass('increaseSize');
$('.closePost', this).removeClass('closePostHide');
});
$('.glyphicon-remove').click(function (e) {
e.stopPropagation()
$('.glyphicon-remove').parent().parent().removeClass('increaseSize');
$('.closePost', this).addClass('closePostHide');
});
CSS:
.increaseSize{
width: 100%;
height: 40%;
}
Check Fiddle Here.

You could save the animation properties/values in an cache-object and restore them after your animation.
http://jsfiddle.net/jvkhmpbt/4/
var animationResetCache = [];
var saveValues = function (node) {
animationResetCache.push({
node: node,
width: node.css('width'),
height: node.css('height')
});
};
var restoreValues = function (node) {
for (var i = 0; i < animationResetCache.length; ++i) {
var item = animationResetCache[i];
if (item.node.is(node)) {
return item;
}
}
};
var profilePostsClick = function () {
$('.largeBox, .smallBox, .longBox').click(function (e) {
var $this = $(this);
if ($this.hasClass('open')) return;
saveValues($this);
$this.addClass('open').animate({
width: '100%',
height: '40%'
}, 200);
$this.find('.closePost').removeClass('closePostHide');
});
$('.closePost').click(function () {
var $parent = $(this).parent('.largeBox, .smallBox, .longBox');
if ($parent.hasClass('open')) {
var cachedValues = restoreValues($parent);
$parent.animate({
width: cachedValues.width,
height: cachedValues.height
}, function () {
$parent.removeClass('open');
});
$parent.find('.closePost').addClass('closePostHide');
}
});
};
$(document).ready(profilePostsClick);

I think it's easier to use a toggle and do the animation in CSS3
$("img").click(function(){
$(this).toggleClass('expanded');
});

I would suggest to add one more identical class to each of smallBox,largeBox and longBox which will be called parentd to identify parent div and animate it back and add below js:
DEMO
$('.closePost').on('click',function(e)
{
$(this).closest('.parentd')
.animate({
width: '40%',
height: 'auto'
},200).removeAttr('style');
$(this).addClass('closePostHide');
e.stopPropagation();
});

If we continue on Rover his answer, we can use the switchClass function in jQuery Ui. (source)
This function let's you switch the classes of an object, creating an animation in the difference between those classes.
Example code: jsFiddle
<div class="large"></div>
CSS:
.large{
width: 100%;
height: 200px;
background-color: red;
}
.small {
width: 10%;
height: 50px;
background-color:green;
}
JS:
$("div").switchClass("large","small",500);

Nav bar appearing and disappearing on scroll

So I am trying to make a nav bar which is hidden when you first load the page and displays when you scroll down to the second section, I have got it working but when you scroll up and down within the home section, the nav bar keeps appearing and disappearing again when it should stay out of sight.
Live Demo: http://zimxtrial.ukbigbuy.com/
JS:
<script type="text/javascript">
jQuery(document).ready(function() {
var startY= jQuery('#home').position().top + jQuery('#home').outerHeight();
jQuery('#nav-container').html( jQuery('#nav').html());
jQuery(window).scroll(function () {
if(jQuery(this).scrollTop() > startY ){
jQuery('#nav-container').slideDown();
}else{
$('#nav-container').css({display: 'block'});
jQuery('#nav-container').slideUp();
}
});
});
</script>
CSS:
#nav-container {
position: fixed;
height: 50px;
width: 100%;
min-width: 600px;
display: none;
}
Any help would be greatly appreciated, thanks guys.
Also, this is my first time messing around with JQuery and JS so be kind.
Final version after fix:
<script type="text/javascript">
$(document).ready(function() {
var startY= $('#home').position().top + $('#home').outerHeight();
var navc = $('#nav-container')
navc.html( $('#nav').html());
$(window).scroll(function () {
if($(this).scrollTop() > startY ){
navc.slideDown();
}else{
navc.slideUp();
}
});
});
</script>

Because you are inside the .scroll() function which gets fired everytime the page is scrolled, it will be going to your else condition and displaying the navbar each time because of this line:
$('#nav-container').css({display: 'block'});
Remove this line and it should work as expected.

You would need to check if the navBar is show or not and depending on that run the scroll() function only if the state is the correct one. Something like this:
if(jQuery(this).scrollTop() > startY && $("#nav-container").css('display') == "none" ){
jQuery('#nav-container').slideDown();
}else if( && $("#nav-container").css('display') == "block"){
$('#nav-container').css({display: 'block'});
jQuery('#nav-container').slideUp();
}

Toggle css property in jquery?

I have a menu that slides out on clicking the nav-toggle class.
Now I also want the nav-toggle class (the menu icon) to move along 226px from the right, so it moves at the same time as the #navigation menu. Then if clicked again it will collapse the menu (as it currently does) and go back to right:0 position.
See my commenting out in the third last line
jQuery('.nav-toggle').click(function () {
var $marginLefty = jQuery('#navigation');
$marginLefty.animate({
right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
});
jQuery('.nav-toggle').animate({
right: "226px"
// How do I make it so if it is at 226px when clicked
// it should then go to "right: 0", that toggle effect as above
});
});

Probably just like you did the #navigation one:
jQuery('.nav-toggle').animate({
right: parseInt(jQuery('.nav_toggle').css('right'), 10) == 0 ? "226px" : 0;
});

Just add a class to check if the nav is expanded/moved or not.
var navbar = $('.nav-toggle');
if (navbar.hasClass('expanded'))
{
$(navbar).animate({'right':'226px'}).removeClass('expanded');
} else {
$(navbar).animate({'right':'0px'}).addClass('expanded');
}
Note these numbers may need flipping.

I think you need to do something like this:
jQuery('.nav-toggle').click(function () {
var $marginLefty = jQuery('#navigation');
$marginLefty.animate({
right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
});
if ($('.nav-toggle').css('right') == '0px') {
$(".nav-toggle").stop().animate({right: '226px'}, 1000);
} else {
$(".nav-toggle").stop().animate({right: '0px'}, 1000);
};
});

Draggable drop-down menu in a website (display menu elements by touchslide)

I want to make a menu like the one in this image:
On the left side there's the complete menu (where each button is a div), but the buttons are not displayed when I open the page. I want to display the buttons by holding and sliding (possibly with a touchslide?), but this must work on mobile devices. Also, it doesn't matter if it doesn't work on a PC.
I don't know if this is possible by using jQuery mobile, Hammer, or another library. I already did a menu which displays all the buttons with a single click on the first button, but the designer is not happy with just that. My code is something like this:
<div id="main_button">Button</div>
<nav id="main_menu">
<div id="b1">Yellow</div>
<div id="b2">Red</div>
<div id="b3">Blue</div>
<div id="b4">Green</div>
<div id="b5">Orange</div>
<div id="b6">Purple</div>
</nav>
Do you know if this is possible? If so, what can I use to accomplish this task?

EDIT 1
More possible partial solutions:
JQuery Mobile : Pull to refresh list view
https://github.com/watusi/jquery-mobile-iscrollview
EDIT 0
Similar question: Does anyone know of a pulldown menu plugin in javascript?
And the solution: http://jsfiddle.net/JXeWA/46/
I think it's possible but you might have to customize the code to your specifications. Here's one example I found: http://jsfiddle.net/vxvgH/3/light/
This example uses a similar effect to refresh the page. That might helpful in customizing your code.
Below you'll find the JavaScript from the first example. It's messy but it's somewhere to start.
var startPosition = 0;
var pagePosition = 0;
var scrollY = 0;
var scrollPrevented = false;
$(document).on('vmousedown', '.dragme', function(event) {
var startPosition = pagePosition;
$(document).on('vmousemove', function(event2) {
scrollY = event2.pageY;
pagePosition = startPosition + scrollY - event.pageY;
if (pagePosition > $("#menu").height()) {
pagePosition = $("#menu").height();
} else if (pagePosition < 0) {
pagePosition = 0;
}
if (scrollPrevented == false) {
scrollPrevented = true;
$(document).on('touchmove', function(ev) {
ev.preventDefault();
});
}
$("#menu").css({
'z-index': '-1'
});
menuSlide();
$("#menu").show();
});
});
$(document).on('vmouseup', function() {
if (scrollPrevented == true) {
$('body').unbind('touchmove');
scrollPrevented = false;
}
$(document).off('vmousemove', stopScroll());
});
function menuSlide() {
var newHeight = $(window).height() - pagePosition;
$("#page1").css({
top: pagePosition,
height: newHeight
}).page();
$("#page2").css({
top: pagePosition,
height: newHeight
}).page();
}
function stopScroll() {
if (pagePosition > $("#menu").height() / 2) {
pagePosition = $("#menu").height();
$("#menu").show();
$("#menu").css({
'z-index': '1500'
});
} else {
pagePosition = 0;
$("#menu").hide();
$("#menu").css({
'z-index': '-1'
});
}
menuSlide();
}
$("#menu").css({
position: "absolute",
width: $(window).width(),
height: $(window).height * .3,
left: 0,
'z-index': '-1',
'min-height': 'initial'
}).page();
$(document).on("click", ".page1", function(){
$("#menu").css({
'z-index': '-1'
});
pagePosition = 0;
menuSlide();
$("#menu").hide();
$.mobile.changePage("#page1", {transition:"slide",
reverse: true});
});
$(document).on("click", ".page2", function(){
pagePosition = 0;
menuSlide();
$("#menu").hide();
$.mobile.changePage("#page2", {transition:"slide"});
});
​

How do I make the jquery slide down effect like the one stackoverflow uses? [duplicate]

This is the first time I visited stack overflow and I saw a beautiful header message which displays a text and a close button.
The header bar is fixed one and is great to get the attention of the visitor. I was wondering if anyone of you guys know the code to get the same kind of header bar.

Quick pure JavaScript implementation:
function MessageBar() {
// CSS styling:
var css = function(el,s) {
for (var i in s) {
el.style[i] = s[i];
}
return el;
},
// Create the element:
bar = css(document.createElement('div'), {
top: 0,
left: 0,
position: 'fixed',
background: 'orange',
width: '100%',
padding: '10px',
textAlign: 'center'
});
// Inject it:
document.body.appendChild(bar);
// Provide a way to set the message:
this.setMessage = function(message) {
// Clear contents:
while(bar.firstChild) {
bar.removeChild(bar.firstChild);
}
// Append new message:
bar.appendChild(document.createTextNode(message));
};
// Provide a way to toggle visibility:
this.toggleVisibility = function() {
bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
};
}
How to use it:
var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();

Update:
Check out the DEMO
Code Used:
$(function(){
$('#smsg_link').click(function(){
showMessage('#9BED87', 'black', 'This is sample success message');
return false;
});
$('#imsg_link').click(function(){
showMessage('#FFE16B', 'black', 'This is sample info message');
return false;
});
$('#emsg_link').click(function(){
showMessage('#ED869B', 'black', 'This is sample error message');
return false;
});
});
/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window
params:
- bgcolor: The background color for the message box
- color: The text color of the message box
- msg: The message text
*/
var interval = null;
function showMessage(bgcolor, color, msg)
{
$('#smsg').remove();
clearInterval(interval);
if (!$('#smsg').is(':visible'))
{
if (!$('#smsg').length)
{
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
position:'fixed',
top:0,
left:0,
width:'98%',
height:'30px',
lineHeight:'30px',
background:bgcolor,
color:color,
zIndex:1000,
padding:'10px',
fontWeight:'bold',
fontSize:'18px',
textAlign:'center',
opacity:0.8,
margin:'auto',
display:'none'
}).slideDown('show');
interval = setTimeout(function(){
$('#smsg').animate({'width':'hide'}, function(){
$('#smsg').remove();
});
}, 3000);
}
}
}
If you want to create your own, check out the slideToggle function of jQuery.

The relevant css would include:
position: fixed;
top: 0;
width: 100%;
More information about position:fixed:
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
If IE6 support is important to you, you may wish to research workarounds.

Here is an alternative method using jQuery which would also slide up/down on show/hide.
Add the following HTML right after the <body> tag in your page:
<div id="msgBox">
<span id="msgText">My Message</span>
<a id="msgCloseButton" href='#'>close</a>
</div>
Add this CSS to your stylesheet
#msgBox {
padding:10px;
background-color:Orange;
text-align:center;
display:none;
font:bold 1.4em Verdana;
}
#msgCloseButton{
float:right;
}
And finally here is the javascript to setup the close button and functions to show and hide the message bar:
/* Document Ready */
$(function () {
SetupNotifications();
});
SetupNotifications = function () {
//setup close button in msgBox
$("#msgCloseButton").click(function (e) {
e.preventDefault();
CloseMsg();
});
}
DisplayMsg = function (sMsg) {
//set the message text
$("#msgText").text(sMsg);
//show the message
$('#msgBox').slideDown();
}
CloseMsg = function () {
//hide the message
$('#msgBox').slideUp();
//clear msg text
$("#msgtText").val("");
}
To perform a simple test you could try this:
Show Message!

Something like this?
$("#bar").slideUp();
However, here I think they fade out first the bar then they bring the main container up, so that'd be something like that:
$("#bar").fadeOut(function(){
$("#container").animate({"top":"0px"});
});