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;
});

Transparent to color navbar on scroll doesn't switch to color when the page is reloaded

This code switches between a transparent and a white navbar depending on how far the page is scrolled. However, if I reload the page while it's scrolled to a point where the navbar should be white, it turns transparent again after it reloads until I start scrolling (then it turns white). How can I make it be white before I scroll if the page is reloaded?
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$("nav").addClass("scrolled");
} else {
$("nav").removeClass("scrolled");
};
});

$(document).ready(function(){
if ($(window).scrollTop() > 50){
$("nav").addClass("scrolled");
}else{
$("nav").removeClass("scrolled");
};
});
try this and give feedback

Edited based on comment to check scroll on load and set styles appropriately.
function toggleScroll(){
if ($(window).scrollTop() > 50) {
$("nav").addClass("scrolled");
} else {
$("nav").removeClass("scrolled");
};
}
$(window).scroll(function() {
toggleScroll();
$( "nav" ).text( $(this).scrollTop() );
});
$(function() {
toggleScroll();
$( "nav" ).text( "Loaded with scroll: " + $(this).scrollTop() );
});
.container {
height: 2000px;
background-color: gray;
}
nav {
position: fixed;
top: 20px;
left: 20px;
height: 150px;
width: 150px;
padding: 40px;
background-color: transparent;
}
.scrolled {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<nav id="nav">
Nav
</nav>
</div>

How do I move an object 250px on first click and 250px back on second click

I have an object and when I click the button it moves 250px.
$(document).ready(function(){
$("#jqueryAirlinesBut").click(function(){
$("#flyingDroneImage").animate({right: '250px'});
});
});
Now when I click the button again I want it to move 250px back to where it was. I am new to jQuery and it seems like there are no if statements in that language? So what do I do this?

You should use a boolean variable to be able to track which click you're on.
See the example in the snippet.
$(document).ready(function() {
var firstClick = false;
$("#jqueryAirlinesBut").on('click', function() {
if (!firstClick) {
$("#flyingDroneImage").animate({
left: '+=250px'
});
firstClick = true;
} else {
$("#flyingDroneImage").animate({
left: '-=250px'
});
firstClick = false;
}
});
});
#flyingDroneImage {
width: 30px;
height: 30px;
background-color: blue;
position: absolute;
top: 50%;
left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jqueryAirlinesBut">Move</button>
<div id="flyingDroneImage"></div>

Why not just use a variable to manage state? Something like this:
var isClicked = false;
$(document).ready(function(){
$("#jqueryAirlinesBut").click(function(){
if(!isClicked){
$("#flyingDroneImage").animate({right: '250px'});
isClicked = true;
} else {
$("#flyingDroneImage").animate({right: '0px'});
isClicked = false;
}
});
});

Here is an Example which may help you:
$(document).ready(function(){
var moved=false;
$("button").click(function(){
if(moved===false){
$("div").animate({'margin-left': '250px'});
moved=true;
}else{
$("div").animate({'margin-left': '0'});
moved=false;
}
});
});
div{
width:50px;
height:50px;
background:#000;
margin-top:20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Move</button>
<div></div>

save your state
$(document).ready(function(){
// save state
var isLeft = true;
// have a function that responds to state
var goTheOtherWay = function() {
var r;
if (isLeft) {
r = {left: '250px'};
} else {
r = {left: 0};
}
isLeft = !isLeft;
return r;
};
$("#jqueryAirlinesBut").click(function() {
// pass in your state-aware function to $.animate()
$("#flyingDroneImage").animate(goTheOtherWay());
});
});
#canvas {
postiion: absolute;
}
#flyingDroneImage {
background-image: url('http://rotorfx.com/wp-content/uploads/2015/12/large_large-3.jpg');
width: 150px;
height: 150px;
border: 1px solid gray;
background-size: 100%;
background-repeat: no-repeat;
background-position-y: 50%;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jqueryAirlinesBut">jqueryAirlinesBut</button>
<div id="canvas">
<div id="flyingDroneImage"></div>
</div>

$(document).ready(function(){
$("#jqueryAirlineBut").click(function(){
( $("#flyingDroneIMage").css('left') === '0px') ?
$("#flyingDroneIMage").animate({left: '250px'}) : $("#flyingDroneIMage").animate({left: '0px'});
});
});
#flyingDroneIMage{
position:relative;
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="submit" id="jqueryAirlineBut" value="Click to move"/>
<image id="flyingDroneIMage" src="http://lorempixel.com/400/200"/>

Something like this:
$(document).ready(function() {
var toggler = true; //keeps track of where to move
$("#jqueryAirlinesBut").click(function() {
$('#flyingDroneImage').animate({
right: toggler ? '-=250' : '+=250' //decides where to move based on the toggler
}, function() {
toggler = toggler ? false : true //switches the toggler
});
});
});
right: toggler ? '-=250' : '+=250'
The above is a ternary conditional operation.
It means: change the right property based on the following: if the toggler is true, the right property will have 250 pixels subtracted from the current right property, otherwise it will have 250 pixels added to it.
It could be written as
var amountToChange;
if(toggler == true){
amountToChange = '+=250'; //Adds 250 to the existing property
}else{
amountToChange = '-=250'; //Subtracts 250 from the existing property
}
The last function is a callback function, it gets called automatically when the animation finishes its last frame. You can also write that function somewhere else and pass it as the callback, and it will be executed when the animation ends.
You can read about it in the jQuery.animate documentation, it's the complete section

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')
})

Is it possible to list multiple ID's in a function, that will not trigger a .hide function?

Got a problem with my slide in menu. Check the my JSfiddle here.
At the moment the slide-in menu closes, whenever clicked on everything else than the menu itself. The problem is, that the menu closes, when i click the text. I would like to perhaps list more ID's inside the same function, something like this;
if(isOpened && e.target.id!='slide-in,text')
My script:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
$("#button").show();
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
$("#button").hide;
}
});
Thank you!

You can use an array and indexOf
['slide-in', 'text'].indexOf(e.target.id) === -1
Might I suggest that you add a class to the elements you don't want it to apply to?
!$(this).is('.someClass')

instead of checking for all the ids, check for existence of parent with id as slide-in
if(isOpened && e.target.id!='slide-in') {
if(!$(e.target).parents('#slide-in').length) {
$("#slide-in").removeClass("active");
isOpened = false;
$("#button").show();
}
}
check this fiddle

#slide-in {
position: fixed;
z-index: 10;
top: 0;
width: 300px;
height: 100%;
background-color: #eee;
border-right: 10px solid #ccc;
display:none;
}
and add this inside the .js
$(document).ready(function(){
$("#button").click(function(){
$("#slide-in").show(300);
})
$("#slide-in").click(function(){
$(this).hide(300);
});
});
and if you want more real use this.
in your css change this class like this
#slide-in {
position: fixed;
z-index: 10;
top: 0;
width: 0px;
height: 100%;
background-color: #eee;
border-right: 10px solid #ccc;
display:none;
}
for your js
$(document).ready(function(){
$("#button").click(function(){
$("#slide-in").animate({width: "300px"});
});
$("#slide-in").click(function(){
$(this).animate({width: "0px"});
});
});