We Keep Coding

Jquery Resize Div with Toggle Button

I am building small private projects to learn jquery and currently I am stuck.
The Goal is to click a button and then my menu and my main content area should resize; when I click again it should resize itself back to normal.
The first part does work but the second part "jumps" down - I do not know why.
Here is my JSFiddle: https://jsfiddle.net/ne1mb706/1/
HTML:
<div><button id="show_hide_button">click me</button></div>
<div id="some_box"></div>
<div id="some_other_box"></div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#some_box {
background: #fc0;
width: 25%;
height: 100px;
float:left;
}
#some_other_box {
background: #0cf;
width: 75%;
height: 100px;
float:left;
}
JQuery 3.4.1:
var collapsed = false;
$('#show_hide_button').click(function() {
if(!collapsed){
$('#some_box').animate({width: '0%'});
$('#some_other_box').animate({width: '100%'});
} else {
$('#some_box').animate({width: '25%'});
$('#some_other_box').animate({width: '75%'});
}
collapsed = !collapsed;
});
Thanks for any help :)

You must start with the visible one to animate work properly:
var collapsed = false;
$('#show_hide_button').click(function() {
if(!collapsed){
$('#some_box').animate({width: '0%'});
$('#some_other_box').animate({width: '100%'});
} else {
$('#some_other_box').animate({width: '75%'});
$('#some_box').animate({width: '25%'});
}
collapsed = !collapsed;
});

How to make jquery scrolling effect work on multiple element/classes?

I'm trying to make a very light script for multiple classes class"demo" that can work on my onScrollDown responsive animation.
I don't really understand about writing arrays. but, I believe that if I use document.getElementsByClassName("demo")[i] , i < 0 and some function(i) I can implement it for individual classes. Because I use getBoundingClientRect() instead of fixed value.
So, how can I write it correctly using i as arrays?
Thank you..
Here is my working script :
<script>
var e = document.getElementById("demo");
var rect = e.getBoundingClientRect();
var x = rect.top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > x-300) {
$('#demo').addClass('animate');
} else {
$('#demo').removeClass('animate');
}
});
</script>
*work only for a single element.
Here is what I'm trying to do, that not working yet
<script>
var e = document.getElementsClassName("test")[i];
var rect = e.getBoundingClientRect();
var x = rect.top;
var i;
for (i = 0; i < e.length; i++) {
$(window).bind('scroll', function (i) {
if ($(window).scrollTop() > x-300) {
$e.addClass('animate');
} else {
$e.removeClass('animate');
}
});
}
</script>
CSS :
<style>
.test {
background:#345;
color:#FFF;
height:2em;
padding:.5em;
top:50px;
margin-top: 100px;
width:100%;
}
.animate {
width: 60px;
}
</style>
HTML
<div style="color: red; margin-bottom: 400px;">(Top!)</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div style="color: red; margin-top: 400px;">(Bottom!)</div>

Okay so I've achieved what you're trying to do. Here are the changes I made:
Used the JQuery each function. This will loop all of the demo elements every time a scroll is detected. There are other ways of looping the elements but because you've already imported JQuery we may as well use it's functions.
Changed #demo to .demo. In other words, I've changed id to class. id should only be used when working with elements that are completely unique. In this case, there are multiple demos so we use class instead.
Final code (as you scroll each element will turn red showing that the animate class has been added:
$(window).on('scroll', function() {
$('.demo').each(function(i, obj) {
var rect = obj.getBoundingClientRect();
var x = rect.top;
if ($(window).scrollTop() > x - 300) {
$(obj).addClass('animate');
} else {
$(obj).removeClass('animate');
}
});
});
.body {
height: 200vh;
background-color: #f1f1f1;
}
.demo {
height: 200px;
width: 100%;
background-color: #f9f9f9;
}
.demo.animate {
background-color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
</div>

There are few notes in regards to your code:
In jQuery you can get elements offset by using .offset() function.
you should not use the same id more than once per page.
.bind() has been deprecated since jQuery 3.0. Use .on() instead.
To toggle class you can use .toggleClass(className, state). State is used to determine if you want to remove or add the class.
See this example:
$(window).on('scroll', function() {
jQuery(".test").each(function() {
let isTop = $(window).scrollTop() > jQuery(this).offset().top - 300;
jQuery(this).toggleClass('animate', isTop);
});
});
.test {
background: #345;
color: #FFF;
height: 2em;
padding: .5em;
top: 50px;
margin-top: 100px;
width: 100%;
}
.animate {
width: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="color: red; margin-bottom: 400px;">(Top!)</div>
<div class="test">Menu</div>
<div class="test">Menu</div>
<div class="test">Menu</div>
<div style="color: red; margin-top: 400px;">(Bottom!)</div>

Toggle method without show/hide option

How to use .toggle() method but not for show and hide purposes?
For example, when I click on a certain div I would like to animate it's position
$(div).animate({"left":"+=50px"}); and then on the second click to return the div on the same position $(div).animate({"left":"-=50px"}).
I know there is other solution but I would like to achieve this with .toggle() without hiding an showing the div. Any ideas?

$("#myDiv").toggle(function() {
$(this).stop().animate({
left:"+=50"
}, 500);
}, function() {
$(this).stop().animate({
left:"-=50"
}, 500);
});
#myDiv{
background-color:black;
width:100px;
height:100px;
position:absolute;
left:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="myDiv"></div>
hope this answer your question. However, jQuery 1.9 and newer do not allow this feature.

there is no toggle function using click since 1.9 . But you can still doing this using two ways:
for more explaination
$(function(){
//basic method
var clicked = false;
$('#mydiv1').click(function(){
if(clicked){
clicked = false;
$(this).animate({"left":"+=50px"});
}else{
clicked=true;
$(this).animate({"left":"-=50px"});
}
});
//create new function like old built-in function
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
$('#mydiv2').clickToggle(function(){
$(this).animate({"left":"+=50px"});
}, function(){
$(this).animate({"left":"-=50px"});
});
});
#mydiv1{
background-color: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 100px;
}
#mydiv2{
background-color: blue;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="mydiv1"></div>
<div id="mydiv2"></div>
</div>

how to create a sliding menu which will fill the window width except by puller button width?

I am trying to create a sliding menu which will fill the window width minus the puller button width. I want the menu out of the window when web page load and there is a button which will go left when the page loads. When user clicks on the button the menu should come to window and button goes right.
I have created an animation video here which will show you what I want.
In the jsfiddle the menu just fades out, But I want the menu to slide from left to right when clicked on button with .puller class.
See the code at jsfiddle
Demo on jsfiddle
$(document).ready(function() {
var stickyNavTop = ($('.container')).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.container').addClass('fixed');
} else {
$('.container').removeClass('fixed');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
}).resize(function() {
stickyNav();
}).load(function() {
stickyNav();
});
$(".dropdown").click(function() {
$(".dpitem").slideToggle(300);
});
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('#cpcc,.dpitem').width($(window).width() - pullerDimensions);
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
var cPcc = document.getElementById ("cpcc");
var cpHeight = function() {
var cpBtnHolder = $(cPcc).height();
$('.content').css("padding-top",cpBtnHolder);
}
setInterval(function() {
cpHeight();
calcPHeight();
pp();
}, 0)
var calcPHeight = function() {
var toolsDimensions = $('#cpcc').height();
$('.puller').height(toolsDimensions);
$('.puller').css("line-height",toolsDimensions +"px");
}
$(document).ready(function() {
calcPHeight();
});
$(window).resize(function() {
calcPHeight();
}).load(function() {
calcPHeight();
});
var Pwidth = $('#cpcc').width();
var PSpce = $(window).width()-Pwidth;
$(".puller").click(function() {
$(".container").toggle( function() {
$(".container").css({
transform: "translate3d("+"-"+Pwidth+"px, 0, 0)"
});
}, function () {
$(".container").css({
transform: "translate3d(-0, 0, 0)"
});
});
});
});

Calc is your friend. You can use that along with 'transition' to achieve the intended effect. Check out this simplified example.
http://codepen.io/anon/pen/gPBQOb
Good practice is to toggle a class which will override the position property in this case left. It should also toggle your chevron image to point left and right.
Your example is using a lot of js calculations and has to recalculate with window size changes. This example uses js only to toggle a css class on click and the rest in managed purely with css. Much simpler in my opinion.
HTML
<div class="maincontent"></div>
<div class="menu">
<div class="button"></div>
</div>
CSS
.maincontent{
background-color: green;
height: 2000px;
width: 100%;
}
.menu{
background-color: red;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
transition: left 1s;
}
.menu.collapse{
left: calc(-100% + 30px)
}
.button{
background-color: yellow;
height: 100%;
width: 30px;
position: absolute;
right: 0px;
}
JS
$('.button').click(
function(){
$('.menu').toggleClass('collapse')
})

Drop Down Animate Contact Box

I have been looking all day for a way to make a contact form similar to the one on this site: http://45royale.com/
If you click on the contact button a black background fades in and the from drops down using an ease function. I have been picking through the code trying to see what to do but I am stuck and I have also been looking and other javascript pop ups but so far it seems they only use php for the form however this one calls a html.
Any suggestions?

Here is something like the form in the example: http://jsfiddle.net/ep39v/3/.
And the source:
HTML
<div class="form"></div>
<button id="showFormBtn">Show form</button>
​
JavaScript
var form = $('.form');
$('#showFormBtn').click(function () {
fadeBackground(showForm);
});
(function () {
form.css({
top: -form.height(),
left: ($(document.body).width() - form.width()) / 2
});
}());
function fadeBackground(callback) {
var background = $('<div class="background"></div>');
$(document.body).append(background);
background.fadeTo(300, 0.5, function () {
if (typeof callback === 'function') {
callback();
}
});
}
function showForm() {
var form = $('.form');
form.animate({ top: 10 }, 1500, 'easeOutElastic');
}
​
CSS
.form {
width: 30%;
height: 40%;
background: black;
position: absolute;
}
body {
height: 100%;
}
.background {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: black;
opacity: 0;
}​
May be you need to change only the easing.