We Keep Coding

change the margin on each slideToggle() call by x%

I want to reduce my containers magin step by step when using slideToggle()
$(document).ready(function() {
$("#btn").click(function() {
doIt();
});
});
function doIt() {
var container = $("#c2");
var maxMarginTop = container.css("marginTop").replace('px', '');
var maxMarginBottom = container.css("marginBottom").replace('px', '');
container.slideToggle({
duration: 2000,
progress: function(animation, progress, remainingMilliseconds) {
var newMarginTop = maxMarginTop - (maxMarginTop * progress);
var newMarginBottom = maxMarginBottom - (maxMarginBottom * progress);
container.css("margin-top", newMarginTop);
container.css("margin-bottom", newMarginBottom);
},
complete: function() {
container.remove();
}
});
}
.container {
margin-top: 20px;
margin-bottom: 20px;
height: 20px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Do it</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
I have to execute code on each step within the slide function. I calculate the new margin based on the current progress.
So the margin should go from 100% to 0% represented by the progress.
Within the progress function I calculate the new margin and when logging the new values this works fine.
But as you can see nothing happens. When logging the margin value in the complete function nothing changed.
Is it a wrong scope? What is happening there?

The problem with your code is that you have added both top and bottom margin which causes a collapsing margin - ie you only get 20px of margin. Therefore, you may as well start off with one margin and then it will animate properly
Why not do this with css animation:
$(document).ready(function() {
$("#btn").click(function() {
$("#c2").addClass('closed');
});
});
.container {
margin-top: 20px;
/* do not need the bottom margin due to collapsing margins */
height: 20px;
width: 100px;
background: red;
transition: all 2s ease;
}
.container.closed {
height:0;
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Do it</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
If you want to carry on using js animations, just remove one of your margins:
$(document).ready(function() {
$("#btn").click(function() {
doIt();
});
});
function doIt() {
var container = $("#c2");
var maxMarginTop = container.css("marginTop").replace('px', '');
var maxMarginBottom = container.css("marginBottom").replace('px', '');
container.slideToggle({
duration: 2000,
progress: function(animation, progress, remainingMilliseconds) {
var newMarginTop = maxMarginTop - (maxMarginTop * progress);
var newMarginBottom = maxMarginBottom - (maxMarginBottom * progress);
container.css("margin-top", newMarginTop);
},
complete: function() {
container.remove();
}
});
}
.container {
margin-top: 20px;
height: 20px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Do it</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>

Fixing Smooth Scroll Issue

A simplified version of what I'm working with: http://jimmehrabbitdesigns.com/scroll.html
I got the scrolling to work, however, it doesn't transition from section to section.
Example: if you click NUMBER 3, it will scroll to section THREE. From there, this is what happens.
- Clicking NUMBER 2 takes you back to section ONE.
- Clicking NUMBER 4 takes you to section TWO.
- Clicking NUMBER 3 again also takes you back to section ONE.
This is the same for all the sections.
jQuery code used:
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('#right').animate({ scrollTop: target.offset().top }, 1000);
return false;
}
}
});

I've changed your code a bit. It's more simple and it helps you understanding what is happening. I hope it helps you:
/*
1. I've changed the position fixed to position absolute on the #right element, the scroll won't work with position: fixed set
2. Added the on click event on the anchor tag this way I'm getting the href of the current clicked anchor by using $(this) and attr() method
3. Added the e.preventdefault() to prevent the default action of the anchor element
4. Doing the smooth scroll using the href got at 2 as id selector
*/
The jQuery code looks like this:
$('#left a').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 1000);
});
You can see the full working snippet by clicking the below button:
$('#left a').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 1000);
});
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#left {
width: 100%;
height: 100%;
background-color: #FFFFFF;
position: fixed;
top: 0;
left: 0;
}
#right {
width: 50%;
height: 100%;
background-color: #0000FF;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
#one {
height: 100%;
background-color: #FF0000;
}
#two {
height: 100%;
background-color: #00FF00;
}
#three {
height: 100%;
background-color: #FFFF00;
}
#four {
height: 100%;
background-color: #00FFFF;
}
#five {
height: 100%;
background-color: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div id="left">
NUMBER 1
<br>
NUMBER 2
<br>
NUMBER 3
<br>
NUMBER 4
<br>
NUMBER 5
</div>
<div id="right">
<div id="one" width="100%" height="100%">ONE</div>
<div id="two" width="100%" height="100%">TWO</div>
<div id="three" width="100%" height="100%">THREE</div>
<div id="four" width="100%" height="100%">FOUR</div>
<div id="five" width="100%" height="100%">FIVE</div>
</div>
</div>
Also you can check this JSFIDDLE if you want.

Jquery animation/function help needed

I'm working on my first serious website and i'm stuck on this problem.
First of all I think my JQuery is extremly clumsy and could probably have been done in a more efficient way, would love some help on how to code this better (Feks i probably use to many functions).
Secoundly I need some help with the animation. I want the divs to animate over to the leftside off the container before they open. The way it is now looks so unnatural.
I would appreciate any help.
http://jsfiddle.net/Skaadel/nt8a29gm/1/
HTML
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div id="boks4">TEST</div>
</div>
</div>
</div>
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
#boks1 {
height: 400px;
width: 100px;
background-color: red;
position: relative;
z-index: 15;
}
#boks2 {
height: 400px;
width: 100px;
background-color: blue;
}
#boks3 {
height: 400px;
width: 100px;
background-color: white;
}
#boks4 {
height: 400px;
width: 100px;
background-color: pink;
}
JQUERY
$(document).ready(function () {
$("#boks1").click(function () {
if ($("#boks1").width() == 100) {
$("#boks1").animate({
width: "720px"
});
$("#boks2").css("display", "none");
$("#boks3").css("display", "none");
$("#boks4").css("display", "none");
} else {
$("#boks1").animate({
width: "100px"
});
$("#boks2").css("display", "");
$("#boks3").css("display", "");
$("#boks4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks2").click(function () {
if ($("#boks2").width() == 100) {
$("#boks2").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test4").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks2").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test4").css("display", "");
$(".test3").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks3").click(function () {
if ($("#boks3").width() == 100) {
$("#boks3").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test4").css("display", "none");
} else {
$("#boks3").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks4").click(function () {
if ($("#boks4").width() == 100) {
$("#boks4").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks4").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test3").css("display", "");
}
});
});

I have changed your code somewhat. Changes are as follows:
1) In your HTML added class name boks class="boks" along your inner Div.
2) In your CSS added properties for .boks, #boks1-2-3-4 and .col-sm-3. Also Added class .zindex
3) In your JQuery i changed everything. Have a look and ask if you stuck anywhere.
Working : Demo
JQuery
$(document).ready(function() {
$(".boks").click(function() {
var curId = this.id; //Gives you id of clicked element.
var curWidth = $("#" + curId).width(); // Taking width to check if it's 100px.
var offset = $("#" + curId).offset(); // Taking Position for animating to left.
var leftPos = offset.left;
var firstElementLeftPos = $("#boks1").offset().left;
leftPos = leftPos - firstElementLeftPos;
if (curWidth == 100) {
$(this).parent(".col-sm-3").css('left', '-' + leftPos + 'px');
$("#" + curId).css("width", "720px").addClass('zindex');
} else {
$(this).parent(".col-sm-3").css('left', '0px');
$("#" + curId).css("width", "100px").delay(500).queue(function() {
$("#" + curId).removeClass('zindex');
});
}
});
});
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
/* Edits are to Below CSS */
.boks {
height: 400px;
width: 100px;
position: relative;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
#boks1 {
background-color: red;
}
#boks2 {
background-color: blue;
}
#boks3 {
position: relative;
background-color: white;
}
#boks4 {
background-color: pink;
}
.col-sm-3 {
left: 0px;
transition: 0.5s ease-in-out;
position: relative;
}
.zindex {
z-index: 999;
}
HTML
<div class="row">
<div class="test1 col-sm-3">
<div class="boks" id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="boks" id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="boks" id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="boks" id="boks4">TEST</div>
</div>
</div>
</div>

just to show you how you could reduce your code with using $(this) and class names in jQuery ...
http://jsfiddle.net/nt8a29gm/3/
$(document).ready(function () {
$(".box").click(function () { // check for click on .box
if($(this).width() == 100) { // if this one width is 100
$('.box').not(this).hide(); // hide all but this
$(this).animate({ // animate the one we clicked on
width: "720px"
});
} else {
$(this).animate({ // make this one small again
width: "100px"
}, 900, function() { // 900 is animation speed
// Animation complete. // wait this animation is finished
$('.box').not(this).show(); // show all boxes again
});
}
});
});
HTML see class="box"
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div class="box">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="box">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="box">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="box">TEST</div>
</div>
</div>
</div>

how to scroll to bottom of a div

I would like to scroll to the bottom of the div content-main, so that the button Button is displayed at the bottom of the window. I tried the following:
<div class="container">
<div class="content-main">
dynamic content dynamic content.....
<button>Button </button>
</div>
<div class ="footer"></div>
</div>
<script>
var mainContentHeight = $(".content-main").height();
var footerHeight = $(".content-footer").height();
window.scrollTo(0, mainContentHeight - footerHeight);
</script>
This works differently, when I test it in two monitors with different size. How to display the button at the bottom of the window?

Instead binding scrollTo to the window object, bind it to the element you want to scroll:
var container = $('.container')[0];
var contentMain = $('.content-main')[0];
var mainContentHeight = $(".content-main").height();
var footerHeight = $(".content-footer").height();
container.scrollTo(0, mainContentHeight - footerHeight);
.container {
overflow: auto;
height: 100px;
}
.content-main {
height: 100%;
position: relative;
border: 1px solid #000;
height: 1000px;
}
.content-footer {
height: 50px;
}
button {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content-main">
dynamic content dynamic content.....
<button>Button </button>
</div>
<div class="content-footer"></div>
</div>

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/

jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.