We Keep Coding

make menu scrollable on button click

I have a problem with my code, I'm trying to make my menu that contains list of items scrollable on button click (left and right buttons). The thing is after i click on right button, it works but it does not let me click it again....if i do it does nothing.So it goes once right and once left only. I want to be able to keep pressing it untill i reach the last item in the menu and vice versa.
My html code for the menu:
<div class="menu-wrapper">
<ul class="menu">
<li class="item active">Hair</li>
<li class="item">Massage</li>
<li class="item">Nails</li>
<li class="item">Facial</li>
<li class="item">Tattoo</li>
<li class="item">Institue</li>
<li class="item">Masking</li>
<li class="item">Doudou</li>
<li class="item">Facial</li>
<li class="item">Tattoo</li>
<li class="item">Institue</li>
<li class="item">Masking</li>
<li class="item">Doudou</li>
</ul>
<div class="paddles">
<button class="left-paddle paddle hidden">
<
</button>
<button class="right-paddle paddle">
>
</button>
</div>
</div>
My Css code is:
.menu-wrapper {
position: relative;
border-radius: 10px;
height: 50px;
margin: 1em auto;
overflow-x: hidden;
overflow-y: hidden;
}
.menu {
height: 50px;
background: white;
box-sizing: border-box;
padding-left: 0;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.item {
display: inline-block;
width: 155px;
height: auto;
text-align: center;
box-sizing: border-box;
padding: 10px;}
.item.active{color: white; background-color: #6f51ed;}
.item:hover{
cursor: pointer;
}
.paddle {
position: absolute;
top: 0;
bottom: 0;
width: 2em;
}
.left-paddle {
left: 0;
color:#6f51ed;
background-color: transparent;
border-color: transparent;
outline: none;
font-size: x-large;
padding-bottom: 5px;
}
.right-paddle {
right: 0;
color:#6f51ed;
background-color: transparent;
border-color: transparent;
outline: none;
font-size: x-large;
padding-bottom: 5px;
}
.hidden {
display: none;
}
My Jquery/Js code is:
<script>
var scrollDuration = 450;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.item').length;
var itemSize = $('.item').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 5;
// get wrapper width
var getMenuWrapperSize = function() {
return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size
var menuVisibleSize = menuWrapperSize;
// get total width of all menu items
var getMenuSize = function() {
return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled to the left
var getMenuPosition = function() {
return $('.menu').scrollLeft();
};
// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {
// get how much of menu is invisible
menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled so far
var menuPosition = getMenuPosition();
var menuEndOffset = menuInvisibleSize - paddleMargin;
// show & hide the paddles
// depending on scroll position
if (menuPosition <= paddleMargin) {
$(leftPaddle).addClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition >= menuEndOffset) {
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
}
});
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate( { scrollLeft: itemSize}, scrollDuration);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate( { scrollLeft: -itemSize }, scrollDuration);
});
</script>

Because you are scrolling to the same position, you need to add or subtract the itemSize to the current scroll position of .menu.
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: $('.menu').scrollLeft() + itemSize
}, scrollDuration);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: $('.menu').scrollLeft() - itemSize
}, scrollDuration);
});

How to let a div become visible when the bar is full [JS]

my name is Daniel and i'm making a drinking game for school, I want to let a div to become visible when the bar is full (so you know when the bar is full and you win the game), but i have no idea how to do this...
Could you help me out?
HTML:
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
</div>
</div>
CCS:
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
JS:
var jumpsize = 2.77, // %
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
set(topcnt(bar.width()) + jumpsize);
});
set(0);

The reason its not working is because u forgot to put the if statement in the function u run on click. So the if statement only runs once. and on first load it will result in false. To fix your code move the if statement in your Body.onclick.
Next time it would be smart to include the full javascript that is relative to the function.
By looking at the online code i was able to find the issue.
Hope this resolves your issues.
~Yannick

When you hit your target you need to remove the CSS styling of Display = none.
W3 schools page here for some helpful info to help you learn some more.
https://www.w3schools.com/jsref/prop_style_display.asp
The line below inserted when you reach your goal to display should make the bar appear.
document.getElementById("hiddenText").style.display = "block";

I'm not sure you want this, but try this:
var jumpsize = 2.77, // %
width = 0,
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
if(pcnt >= 100) {$('#hiddenText').show();}
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
width += jumpsize;
set(topcnt(width));
});
set(0);
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button class="card1">click me</button>

You are using jQuery so quicker will be:
$('#hiddenText').show();
Edit:
sooo
if($('#bar').children('div').width() >= 334){
$('#hiddenText').show();
}
As You can see the div with progress bar can have max od 334 px. Check if it has it and if yes then show the text. Put this in that click event

Seems to me like you're overcomplicating things a little bit with the percentage calculations. I would just add a variable for the width of the bar that starts at 0 and increase this with the jumpsize on every click. Once this new variable goes over or equals 100 you show the hidden div.
HTML
<div class="col-xs-12" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button id="button">Click me</button>
<div id="showOnComplete">Show me when the bar is full!</div>
CSS
#bar {
width: 340px;
height: 24px;
padding: 4px 3px;
margin: 30px auto 0;
background-color: #f8f8f8;
}
#bar > div {
position: relative;
float: left;
height: 100%;
width: 0;
max-width: 100%;
background: #9d3349;
transition: width 500ms;
}
#button {
margin: 20px auto;
display: block;
}
#showOnComplete {
width: 400px;
padding: 20px;
margin: 20px auto;
background: blue;
color: #fff;
text-align: center;
display: none;
}
JS
(function($) {
var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
barWidth = 0,
$bar,
$showOnComplete;
$(function() {
$bar = $("#bar").children("div");
$showOnComplete = $("#showOnComplete");
$(document).on("click", "#button", function() {
barWidth += jumpSize;
$bar.width(barWidth + "%");
if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
});
});
})(jQuery);
I've made a fiddle for it here.

How do I change background-color of 2 divs when I press 1 other div?

How do I make 2 divs (header and sub-header) change color when div (change) is pressed?
The sub-header is going to be changed to another color, not the same color as header.
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header>
Header
</div>
<div class="sub-header">
sub-header
</div>

You could approach it like this...
Create a new class for each new background color you'd like:
.header {
background: grey;
}
.header-alt {
background: lightblue;
}
.sub-header {
background: lightblue;
}
.sub-header-alt {
background: grey;
}
Then use jQuery toggleClass to add/remove those classes on click of the div change
$(".change").click(function() {
$('.header').toggleClass("header-alt");
$('.sub-header').toggleClass("sub-header-alt");
});
Example
$(".change").click(function() {
$('.header').toggleClass("header-alt");
$('.sub-header').toggleClass("sub-header-alt");
});
body {
width: 600px;
margin: 0 auto;
color: #FFF;
font-family: sans-serif;
font-size: 20px;
}
div {
padding: 20px;
}
.change {
background: black;
cursor: pointer;
}
.header {
background: grey;
}
.header-alt {
background: lightblue;
}
.sub-header {
background: lightblue;
}
.sub-header-alt {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="change">
Click this to change the background-color of the 2 headers
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>
Codepen if you prefer...

Onclick of div.change assign background-color to other divs $('.header').css("background-color","red");
$('.change').on('click',function(){
$('.header').css("background-color","red");
$('.sub-header').css("background-color","red");
})
Demo : https://jsfiddle.net/y5tLzbsc/

you give both of them the class 'active'
and on your css
.header.active{
background:blue;
}
.sub-header.active{
background:red;
}
and on your js:
document.querySelector('.change').onclick = function(){
document.querySelector('.header').className += " active";
document.querySelector('.sub-header').className += " active";
}

Here is a code snippet that does exactly what you described. This solution is using jquery. Look at the code below and feel free to ask if something is not clear :)
var colorChanged = false;
$('.change').click(function() {
if(!colorChanged){
$('.header').css('background-color','red');
$('.sub-header').css('background-color','blue');
colorChanged = true;
} else {
$('.header').css('background-color','transparent');
$('.sub-header').css('background-color','transparent');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>

Just add an event listener. See demo:
document.addEventListener('click', function(e) {
if (e.target.className.indexOf('change') > -1) {
var headerEl = document.querySelector(".header");
var subHeaderEl = document.querySelector(".sub-header");
// This will toggle the color change on or off after each click
if (headerEl.className.indexOf('color') > -1) {
headerEl.className = headerEl.className.replace(" color", "");
subHeaderEl.className = subHeaderEl.className.replace(" color", "");
} else {
headerEl.className += " color";
subHeaderEl.className += " color";
}
}
})
.header.color {
background-color: red;
}
.sub-header.color {
background-color: blue;
}
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>

This can be done with HTML and CSS. There is no need to use anything advanced or exotic.
The checkbox becomes the click input and it is hidden off screen. Since a connected label acts as the checkbox it becomes your input button. The label is the replacement for your original top DIV.
body {
margin: 0;
padding: 0;
}
#hidden_checkbox {
display: block;
position: absolute;
top: -50px;
right: 0;
}
#visible_label {
display: block;
height: 200px;
cursor: pointer;
background-color: rgb(200, 200, 200);
}
#hidden_checkbox:checked ~ div:nth-of-type(1) {
background-color: rgb(0, 50, 0);
}
#hidden_checkbox:checked ~ div:nth-of-type(2) {
background-color: rgb(0, 0, 50);
}
.header {
height: 200px;
background-color: rgb(0, 128, 128);
}
.sub-header {
height: 200px;
background-color: rgb(128, 0, 128);
}
<input id="hidden_checkbox" type="checkbox">
<label id="visible_label" for="hidden_checkbox">Click this to change the background-color of the 2 headers.</label>
<div class="header">Header</div>
<div class="sub-header">Sub-header</div>

JQuery/Javascript for Div resizing, expand and collapse

Any help will be appreciated.
I have 3 divs, the parent div(red), 2 child divs at the top(blue) and another on the bottom(green). Here is what I want to achieve:
When the top div(blue) resizes/increases its size by clicking the "Expand Blue Div" button, the bottom div(green) will shrink/decreases its size but remain in its position, meaning, it should still remain on its x-Axis even though it change its height. In short, regardless of the height of the bottom div(green), it should still remain on its position.
I want it also to revert back all of their original sizes when click on "Shrink Blue Div" button. Both Green and blue sizes will be on their original sizes.
I prefer a full jquery/javascript solution on this one. Thank you all
PLEASE NOTE
The javascript code should NOT use constant numbers for computation of size/height of "GREEN" div. For example, "greendiv.height = 100 - 5px" <<, we should avoid using constants for this one.
$("#expandDiv").click(function(){
$("#blueDiv").css("height","150px");
});
.parent_container {
border: 5px solid red;
height: 400px;
}
.blue_box {
height: 50px;
border: 5px solid blue;
}
.green_table {
overflow-y: auto;
border: 5px solid green;
position:relative;
height:250px;
}
.btn_actions {
padding: 10px;
}
<div class="parent_container">
<div class="btn_actions">
<button class="btn" id="expandDiv">Expand Blue Div</button>
<button class="btn" id="shrinkDiv">Shrink Blue Div</button>
</div>
<div class="blue_box" id="blueDiv">
</div>
<div class="btn_actions">
<button class="btn">Download Data</button>
<button class="btn">Sort Data</button>
</div>
<div class="green_table">
</div>
</div>
Here is my JSFiddle: https://jsfiddle.net/koykoys/0zLpgzsn/1/

Try this code:
$("#expandDiv").click(function(){
var $blueDiv = $("#blueDiv"), $greenDiv = $(".green_table");
var blueDivHeight = $blueDiv.height(), greenDivHeight = $greenDiv.height();
var updatedblueDivHeight = 150;
var incrementedblueDivHeight = updatedblueDivHeight - blueDivHeight;
$blueDiv.height(updatedblueDivHeight);
$greenDiv.height(greenDivHeight - incrementedblueDivHeight);
});
See demo at https://jsfiddle.net/0zLpgzsn/2/

If you want CSS only solution, than take a look at this:
.parent-container {
height: 300px;
border: 1px solid red;
padding: 2px;
display: flex;
flex-direction: column;
}
label[for=toggle-blue]::before {
content: 'Expand';
}
.blue-container {
border: 1px solid blue;
flex-grow: 5;
}
#toggle-blue {
display: none;
}
#toggle-blue:checked + label::before {
content: 'Shrink';
}
#toggle-blue:checked + label + div {
flex-grow: 20;
}
.green-container {
border: 1px solid green;
flex-grow: 10;
}
<div class="parent-container">
<input id="toggle-blue" type="checkbox" />
<label for="toggle-blue"></label>
<div class="blue-container">
</div>
<div class="green-menu">
<button>
Button 1
</button>
<button>
Button 2
</button>
</div>
<div class="green-container">
</div>
</div>
It uses CSS Flexible Boxes and Adjacent sibling selectors, as well as ::before Pseudo Element.

Jquery Code:
$("#expandDiv").click(function(event){
$('#shrinkDiv').removeClass('shrinked');
if(!$(this).hasClass('expanded')) {
$("#blueDiv").animate({
height: "+=150"
});
$(".green_table").animate({
height: "-=150"
});
$(this).addClass('expanded');
}
});
$("#shrinkDiv").click(function(event){
if( (!$(this).hasClass('shrinked')) && ($('#expandDiv').hasClass('expanded')) ) {
$("#blueDiv").animate({
height: "-=150"
});
$(".green_table").animate({
height: "+=150"
});
$(this).addClass('shrinked');
}
$('#expandDiv').removeClass('expanded');
});
Here is the working fiddle
https://jsfiddle.net/0zLpgzsn/4/

/*CSS*/
<style type="text/css">
.parent_container {
border: 5px solid red;
height: auto;
position:relative;
}
.blue_box {
height: 50px;
border: 5px solid blue;
}
.green_table {
overflow-y: auto;
border: 5px solid green;
position:relative;
height:50px;
}
.open{
height:150px;
}
.closed{
height:35px;
}
.btn_actions {
padding: 10px;
}
</style>
// jQuery
$(document).ready(function(){
$("#expandDiv").on("click", function(){
if(!$("#blueDiv").hasClass("open")){
$("#blueDiv").addClass("open");
}
if(!$(".green_table").hasClass("closed")){
$(".green_table").addClass("closed");
}
})
$("#shrinkDiv").on("click", function(){
if($("#blueDiv").hasClass("open")){
$("#blueDiv").removeClass("open");
}
if($(".green_table").hasClass("closed")){
$(".green_table").removeClass("closed");
}
})
})
This is based on your solution and requitrements :)
Plus link to fiddle Fiddle

Simple jQuery left/right slide toggle animation for mobile menu

I'm trying to create a menu that slides in and out from the right hand side of the screen for a mobile version of a site.
I have a 'ul' that starts off screen on page load due to its large margin. The plan is to have a button that will toggle that margin back and forth with '.animate' in order to hide and reveal the 'ul'.
The first chunk of code below works but won't repeat. So, on 'click', the menu appears, hides and then appears once more before it stops responding. This confused me so I tried a different route and went with an 'if' statement but now it just keeps sliding left despite the class definitely changing (i've checked it in the console).
Now i'm stumped! Can anyone help?
// MOBILE MENU
$(function() {
// create identical menu buttons with different classes
var $active = $("<div class='mm-active'><hr><hr><hr></div>");
var $inactive = $("<div class='mm-inactive'><hr><hr><hr></div>");
// append 'inactive' menu button to menu div
$(".mobile-menu").prepend($inactive);
$($inactive).click(function() {
$($inactive).hide();
$(this).next("ul").animate({'margin-left': '-='+90}, 1000);
$(".mobile-menu").prepend($active);
});
$($active).click(function() {
$(this).nextAll("ul").animate({'margin-left': '+='+90}, 1000);
$($active).remove();
$($inactive).show();
});
});
//And here with the 'if' statement...
$(function() {
// create identical menu buttons with different classes
var $mm_btn = $("<div><hr><hr><hr></div>");
var $classname = ($mm_btn).attr("class");
// append mobile menu button to menu div
$(".mobile-menu").prepend($mm_btn);
$($mm_btn).click(function() {
$($mm_btn).toggleClass('active');
if($classname === 'active') {
$(this).next("ul").animate({'margin-left': '+='+90}, 1000);
} else {
$(this).next("ul").animate({'margin-left': '-='+90}, 1000);
}
});
});
.mobile-menu {
position: absolute;
top: 5px;
right: 0;
width: 25px;
margin: 0 25px 0 0;
padding: 5px 0 8px 5px;
z-index: 1;
}
.mobile-menu hr {
border: 0;
height: 2px;
background: black;
}
.mobile-menu ul {
position: relative;
z-index: -1;
display: inline-block;
text-align: right;
margin-left: 50px;
margin-top: -50px;
padding: 50px 25px 5px 5px;
list-style: none;
}
.mobile-menu ul li {
padding: 3px;
}
<div class="mobile-menu">
<ul>
<li class="projects">projects</li>
<li>about</li>
<li>contact</li>
</ul>
</div>

In first case, when you are removing element all events are also removed: .remove()
In second case: $classname was set to empty string on page load and is never changed this is why only else is executed.
// MOBILE MENU
$(function() {
// create identical menu buttons with different classes
var $active = $("<div class='mm-active'><hr><hr><hr></div>");
// append 'inactive' menu button to menu div
$(".mobile-menu").prepend($active);
$($active).click(function() {
if ($active.hasClass('mm-active')) {
$(this).nextAll("ul").animate({
'margin-left': '-=' + 90
}, 1000);
} else {
$(this).nextAll("ul").animate({
'margin-left': '+=' + 90
}, 1000);
}
$active.toggleClass('mm-active');
});
});
body {
overflow: hidden;
}
.mobile-menu {
position: absolute;
top: 35px;
right: 0;
width: 25px;
margin: 0 25px 0 0;
padding: 5px 0 8px 5px;
z-index: 1;
}
.mobile-menu hr {
border: 0;
height: 2px;
background: black;
}
.mobile-menu ul {
position: relative;
z-index: -1;
display: inline-block;
text-align: right;
margin-left: 50px;
margin-top: -50px;
padding: 50px 25px 5px 5px;
list-style: none;
}
.mobile-menu ul li {
padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-menu">
<ul>
<a href="projects.html">
<li class="projects">projects</li>
</a>
<a href="about.html">
<li>about</li>
</a>
<a href="contact.html">
<li>contact</li>
</a>
</ul>
</div>