We Keep Coding

Javascript - How pass function click, from one menu to another

I am a beginner in JS (level 0.1), and I have a problem with my script.
My practice page has only 1 page, but 2 menus, and I need that when clicking on a menu, this click passes the .active class to the other brother button (1A to 1B, etc.). And I do not know how to do it.
My script works well with one menu at a time, but does not apply the .active class to the second menu.
SEE DEMO LIVE (Codepen)
What am I doing wrong...?
Thanks in advance!
//----------------
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
$('.menu').removeClass("active");
$(this).addClass("active");
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div class="menu active">Buton 1-A</div>
<div class="menu">Buton 2-A</div>
<div class="menu">Buton 3-A</div>
<div class="menu">Buton 4-A</div>
<div class="menu">Buton 5-A</div>
</div>
<div id="menu-2">
<div class="menu active">Buton 1-B</div>
<div class="menu">Buton 2-B</div>
<div class="menu">Buton 3-B</div>
<div class="menu">Buton 4-B</div>
<div class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>

$(document).ready(function(){
$('#cont-menu .menu').click(function(){
$('.menu').removeClass('active');
//Get the element from each list which matches the position of the clicked element
$('#menu-1').children().eq($(this).index()).addClass('active');
$('#menu-2').children().eq($(this).index()).addClass('active');
});
});
Demo

If the buttons are simply associated by their position in the menu, we can get that position, and then select all elements at the same position in every menu (via the :nth-child selector). To make things easier we add a class to every menu.
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
var index = $(this).index() + 1;
$('.menu').removeClass("active");
$('.menu-container :nth-child('+index+')').addClass("active");
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div class="menu-container">
<div class="menu active">Buton 1-A</div>
<div class="menu">Buton 2-A</div>
<div class="menu">Buton 3-A</div>
<div class="menu">Buton 4-A</div>
<div class="menu">Buton 5-A</div>
</div>
<div class="menu-container">
<div class="menu active">Buton 1-B</div>
<div class="menu">Buton 2-B</div>
<div class="menu">Buton 3-B</div>
<div class="menu">Buton 4-B</div>
<div class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>

You're currently only adding the .active class to the clicked button, if we add a identifier for each button (a name) we can achieve what you're asking.
Try:
$(`[name=${$(this).attr('name')}]`).addClass("active");
$(document).ready(function() {
$('#cont-menu .menu').click(function() {
$('.menu').removeClass("active");
$(`[name=${$(this).attr('name')}]`).addClass("active");
});
});
body {
text-align: center;
font-family: Arial, sans-serif
}
.code {
background: #d9d9d9;
padding: 2px 5px
}
#cont-menu span {
line-height: 1.75
}
#cont-menu {
position: relative;
width: 500px;
margin: 0 auto;
top: 5px
}
#menu-1,
#menu-2 {
width: 150px;
display: inline-block;
vertical-align: top;
margin: 0 20px
}
.menu {
padding: 10px 20px 10px 10px;
margin: 0 0 3px 0;
color: #fff;
text-align: left;
background: #999;
cursor: pointer
}
.menu:hover {
background: red
}
.active {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div class="menu active" name="button1">Buton 1-A</div>
<div class="menu" name="button2">Buton 2-A</div>
<div class="menu" name="button3">Buton 3-A</div>
<div class="menu" name="button4">Buton 4-A</div>
<div class="menu" name="button5">Buton 5-A</div>
</div>
<div id="menu-2">
<div class="menu active" name="button1">Buton 1-B</div>
<div class="menu" name="button2">Buton 2-B</div>
<div class="menu" name="button3">Buton 3-B</div>
<div class="menu" name="button4">Buton 4-B</div>
<div class="menu" name="button5">Buton 5-B</div>
</div>
<br><br>
</div>

One solution is to use the jQuery data attribute. We set a value for this on each menu that associates it with 1-5, this can then be used to add the class for both menu buttons.
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
//get the value of the data-menu-class attribute
var menuClass = $(this).data('menu-class');
//remove all previous active classes
$('.menu').removeClass("active");
//add active to each menu (1&2)
$('#menu-1 .menu'+menuClass).addClass('active');
$('#menu-2 .menu'+menuClass).addClass('active');
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div class="menu menu1 active" data-menu-class='1'>Buton 1-A</div>
<div class="menu menu2" data-menu-class='2'>Buton 2-A</div>
<div class="menu menu3" data-menu-class='3'>Buton 3-A</div>
<div class="menu menu4" data-menu-class='4'>Buton 4-A</div>
<div class="menu menu5" data-menu-classx='5'>Buton 5-A</div>
</div>
<div id="menu-2">
<div class="menu menu1 active" data-menu-class='1'>Buton 1-B</div>
<div class="menu menu2" data-menu-class='2'>Buton 2-B</div>
<div class="menu menu3" data-menu-class='3'>Buton 3-B</div>
<div class="menu menu4" data-menu-class='4'>Buton 4-B</div>
<div class="menu menu5" data-menu-class='5'>Buton 5-B</div>
</div>
</div>

You can use some text manipulation to parse the IDs and button text values, in order to identify which button was clicked, from which menu, and then calculate how to find the same button in the other menu.
This demo's comments assumes you choose Buton 3 from the first menu. The code will:
Traverse UP the DOM tree from the clicked button to find the closest wrapper (Note that I added a class to both button wrappers to make that easy), and grab its ID.
Split the ID on the hyphen, then grab the right-side value (1 or 2)
Use a ternary operator to get the other number (i.e. if this is menu 1, nxt_mnu is 2, etc)
Get the text of this button
Same as (2) above, use split() to get just the text before the -A or -B
Remove .active class from all buttons on all menus
Add .active class to the clicked button
(a) Select the next menu, (b) find the button with text containing same text as the button clicked, (c) Add active class to that sister button
DEMO:
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
debugger;
let mnu_num = $(this).closest('.menu-wrapper').attr('id');
mnu_num = mnu_num.split('-')[1]; //menu-1
let nxt_mnu = (mnu_num == 1) ? '2' : '1'; //2
let btn_txt = $(this).text(); //Buton 3-A
btn_txt = btn_txt.split('-')[0] //eg. Buton 3
$('.menu').removeClass("active");
$(this).addClass("active");
$('#menu-' + nxt_mnu).find('.menu:contains(' +btn_txt+ ')').addClass('active');
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1" class="menu-wrapper">
<div class="menu active">Buton 1-A</div>
<div class="menu">Buton 2-A</div>
<div class="menu">Buton 3-A</div>
<div class="menu">Buton 4-A</div>
<div class="menu">Buton 5-A</div>
</div>
<div id="menu-2" class="menu-wrapper">
<div class="menu active">Buton 1-B</div>
<div class="menu">Buton 2-B</div>
<div class="menu">Buton 3-B</div>
<div class="menu">Buton 4-B</div>
<div class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>

Here I use data attribute with css attribute selector to get the same element in the group. And to get same behaviour with hover effect, I use js to control it instead of css.
$(document).ready(function() {
$('#cont-menu').on('click', '.menu', function(e) {
$('.menu').removeClass('active');
$(`[data-group=${this.dataset.group}]`).addClass("active");
});
$('#cont-menu').on('mouseenter', '.menu', function(e) {
$('.menu').removeClass('hover');
$(`[data-group=${this.dataset.group}]`).addClass('hover')
});
});
body {
text-align: center;
font-family: Arial, sans-serif
}
.code {
background: #d9d9d9;
padding: 2px 5px
}
#cont-menu span {
line-height: 1.75
}
#cont-menu {
position: relative;
width: 500px;
margin: 0 auto;
top: 5px
}
#menu-1,
#menu-2 {
width: 150px;
display: inline-block;
vertical-align: top;
margin: 0 20px
}
.menu {
padding: 10px 20px 10px 10px;
margin: 0 0 3px 0;
color: #fff;
text-align: left;
background: #999;
cursor: pointer
}
.menu.hover {
background: red;
}
.active {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div data-group="a" class="menu active">Buton 1-A</div>
<div data-group="b" class="menu">Buton 2-A</div>
<div data-group="c" class="menu">Buton 3-A</div>
<div data-group="d" class="menu">Buton 4-A</div>
<div data-group="e" class="menu">Buton 5-A</div>
</div>
<div id="menu-2">
<div data-group="a" class="menu active">Buton 1-B</div>
<div data-group="b" class="menu">Buton 2-B</div>
<div data-group="c" class="menu">Buton 3-B</div>
<div data-group="d" class="menu">Buton 4-B</div>
<div data-group="e" class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and backwards, of course,
are active at the same time...?</span>
</div>

Hiding charts in javascript

I need to hide or show charts depending on the selected value, but it is not working and not showing the error in console. I made the javascript code with an alert and it works, so I guess the problem is not about the "if" logic
Here is the HTML code
<div class="row">
<!-- Left col -->
<section class="col-lg-12 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"></li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
</section>
</div>
<select class="target" id="opcion">
<option value="mes1" selected="selected">Hace 1 mes</option>
<option value="mes2">Hace 2 meses</option>
<option value="mes3">Hace 3 meses</option>
</select>
and this is the Javascript Snippet
$( ".target" ).change(function() {
if(document.getElementById('opcion').value == "mes1") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area.redraw();
area2.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes2") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area2.redraw();
area.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes3") {
alert( "Mes 3" );
}
});
any help will be appreciated

I solved it by using the chart js function called "Redraw". Thanks anyways

jQuery search page for documents

I have a page that looks like this:
HTML
<div class="alert alert-dismissable">
<div class="form-group text-center">
<div id="Section">
<div class="row">
<div class="col-md-12">
<input type="text" id="SearchText" class="form-control link-search" placeholder="Document Name..." style="width:20%;margin-left: 43%;" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" style="float: right; margin-right: -2%;" />
</div>
<div class="col-md-6">
<input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" style="margin-left: -69%;" />
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 2%;">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#edoccollapse3">Panel One</a>
</h3>
</div>
<div id="edoccollapse3" class="panel-collapse collapse">
<div class="panel-body">
<ul class="my-ul">
<li>Test Document 1</li>
<li>Test Document 2</li>
<li>Test Document 3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#edoccollapse2">Panel Two</a>
</h3>
</div>
<div id="edoccollapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="my-ul">
<li>Test Document 4</li>
<li>Test Document 5</li>
<li>Test Document 6</li>
<li>Test Document 7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery
$(function() {
$("#SearchText").keyup(function(event) {
if (event.keyCode == 13)
search($(this).val());
});
$('#ButtonSearch').click(function() {
search($("#SearchText").val());
});
function search(keyword) {
var textboxValue = keyword.toLowerCase();
$('.panel-body').each(function() {
var exist = false;
$(this).find('.my-ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
exist = true;
}
});
if (exist === false) {
$(this).parent().removeClass('in');
} else {
$(this).parent().addClass('in');
}
});
}
// When user wants to clear search
$("#ButtonClearSearch").click(function() {
$("#SearchText").val("");
$('.panel-body').each(function() {
$(this).parent().removeClass('in');
});
$('#SearchText').blur(function () {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('placeholder','Document Search'));
}
});
});
});
My Goal
I would like to display an alert if the user types in a word that doesn't match any document names, saying "No documents found that match what the user typed in". Also, currently when a user doesn't type in anything and clicks search, every panel opens. If the textbox is empty and the user tries to search.. I would like an alert to pop-up saying "No value to search". I am lost on where to put this code because the jQuery is using .each and I don't need an alert for every item that it is searching.
Example in Action
Bootply

You could add a class to your documents, like documents and then loop through each of these documents, filter by one that the html contains the search terms and check for the length of the remaining array. Something like
$('input').on('change', function(value) {
var val = $('input').val();
var array = $('.documents').filter(function(index, item) {
return item.innerHTML.indexOf(val) !== -1;
})
if(array.length == 0) {
alert("No documents found that match " + val);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<li class="documents">doc 1</li>
<li class="documents">doc 2</li>
<li class="documents">doc 3</li>
<li class="documents">doc 4</li>
</div>
<input type="text">

Hello please try following this : https://www.bootply.com/VSh5pyBz5E
I have used console.log instead of alert in above bootply.
alert shown in below code.
Only change is in js code :
$(function() {
$("#SearchText").keyup(function(event) {
if (event.keyCode == 13)
search($(this).val());
});
$('#ButtonSearch').click(function() {
let searchVal = $("#SearchText").val();
if(!searchVal){
alert("No value to search");
return;
}
search(searchVal);
});
function search(keyword) {
var textboxValue = keyword.toLowerCase();
var exist = false;
$('.panel-body').each(function() {
$(this).find('.my-ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
exist = true;
}
});
if (exist === false) {
$(this).parent().removeClass('in');
} else {
$(this).parent().addClass('in');
}
});
if(!exist){
alert("No documents found that match what the user typed in");
}
}
// When user wants to clear search
$("#ButtonClearSearch").click(function() {
$("#SearchText").val("");
$('.panel-body').each(function() {
$(this).parent().removeClass('in');
});
$('#SearchText').blur(function () {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('placeholder','Document Search'));
}
});
});
});

Dragula - Drag elements from one container to different elements

My question is related to dragula https://github.com/bevacqua/dragula
I am trying to drag elements from one container and drop them (copy not move) into different containers. So, in this way I have one container which contains elements to drag and I want to drop them into different containers but its not working properly and sometimes its not working at all. Please guide me what is wrong with my code.
HTML
/*container which contains elements to drag */
<div class="row">
<div class="col-md-12">
<div class="activityIcons" style="text-align:center;">
<ul class="media-list media-list-container" id="media-list-target-left">
<li class="media" style="display:inline-block;" id="phone">
<div class="media-left media-middle dots" ><i class="icon-phone2 text-indigo-800 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Phone Call" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
</li>
<li class="media" style="display:inline-block;" id="history">
<div class="media-left media-middle dots"><i class="icon-history text-orange-600 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Review Order History" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
</li>
<li class="media" style="display:inline-block;" id="order">
<div class="media-left media-middle dots"><i class="text-blue-600 icon-cart-add2 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Place Product Order" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
</li>
</ul>
</div>
</div>
</div>
/* containers where elements will be dropped */
<div class="activity" id="1" style="margin-top: 5px; padding:5px; border: 1px solid #ccc;">
<div class="row activityDetail" id="1" style="padding:5px; margin:15px;">
<div class="col-md-12" style="border-bottom:1px solid #ddd;">
<span class="text-bold text-black actTime" style="cursor:pointer; margin-right:5px;">Time</span>
<span class="text-bold text-black regionCust" style="cursor:pointer; margin-right:5px;">Region & Customer</span>
<span class="media-list-container" id="activitiesBar1"><span class="dropMsg1">Drop Here</span></span>
<span class="pull-right stats">
<ul></ul>
</span>
</div>
</div>
<div class="row activityDetailTwo" id="2" style="padding:5px; margin:15px;">
<div class="col-md-12" style="border-bottom:1px solid #ddd;">
<span class="text-bold text-black actTimeTwo" id="2" style="cursor:pointer; margin-right:5px;">Time</span>
<span class="text-bold text-black regionCustTwo" id="2" style="cursor:pointer; margin-right:5px;">Region & Customer</span>
<span class="media-list-container" id="bar2"><span class="dropMsg2">Drop Here</span></span>
<span class="pull-right stats">
<ul></ul>
</span>
</div>
</div>
JQuery
dragula([document.getElementById('media-list-target-left'), document.getElementById('activitiesBar1')], {
copy: true,
revertOnSpill: true,
mirrorContainer: document.querySelector('.media-list-container'),
move: function (el, container, handle) {
return handle.classList.contains('dragula-handle');
}
}).on('drop', function(el) {
var actionId = $(el).attr('id');
if($('#activitiesBar1').children('.dropMsg1').length > 0){ $('.dropMsg1').remove(); }
if(actionId == "phone"){ $('.callDuration').modal(); }
if(actionId == "history"){ $('.orderHistoryModal').modal(); }
if(actionId == "order"){ $('.catalog').modal(); }
if(actionId == "chat"){ $('.conversation').modal(); }
if(actionId == "reschedule"){ $('.schedule').modal(); }
if(actionId == "training"){ $('.training').modal(); }
if(actionId == "visit"){ $('.carExpenses').modal(); }
});
dragula([document.getElementById('media-list-target-left'), document.getElementById('bar2')], {
copy: true,
revertOnSpill: true,
mirrorContainer: document.querySelector('#bar2'),
move: function (el, container, handle) {
return handle.classList.contains('dragula-handle');
}
}).on('drop', function(el) {
var actionId = $(el).attr('id');
if($('#bar2').children('.dropMsg2').length > 0){ $('.dropMsg2').remove(); }
if(actionId == "phone"){ $('.callDuration').modal(); }
if(actionId == "history"){ $('.orderHistoryModal').modal(); }
if(actionId == "order"){ $('.catalog').modal(); }
if(actionId == "chat"){ $('.conversation').modal(); }
if(actionId == "reschedule"){ $('.schedule').modal(); }
if(actionId == "training"){ $('.training').modal(); }
if(actionId == "visit"){ $('.carExpenses').modal(); }
});
Your suggestions will be highly appreciated.
Thank you.

Had the same basic requirement (one "source container" to copy from).
I think you are supposed to handle it all within one drake object that has all the containers and handles the behaviour with its options.
The key to have one "source container" to copy from is to have a simple method as copy option:
dragula([document.getElementById('media-list-target-left'), document.getElementById('activitiesBar1'),
document.getElementById('bar2')], {
copy: function (el, source) {
return source.id === 'media-list-target-left';
},
accepts: function (el, target) {
return target.id !== 'media-list-target-left';
}
}
);
So in this case you can copy from media-list-target-left to other containers but not drop elements into this container.

Moving DIV disable button 0px left-margin

I have a little problem. Im trying to create my own slider using jQuery and some css/javascript.
I got my slider to work moving a Div 660px to the left and right by clicking a button.
But, I would like to have the right button disabled when the left margin is 0. And I would like the whole div to rewind back to 0px after some clicks.
Is this possible?
Here is my code:
<script language="javascript">
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
}
</script>
<div class="container">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide">
<?php get_template_part('loop-reviews');?>
</div>
</div>
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
The code im using is from this page: Page
Well, with the code from Rayn i got the button to hide, but now it won't show when left-margin is 1px or something. So I'm trying this now: (doesn't work btw)
Im trying this now: (doesn't work btw)`function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
} else (slidemarginleft == '1px') {
$('.contr-right').show();
}
}`
Also I'm seeing that the margin-left isn't set in the style sheet but in the
<div style="margin-left:0px">content</div>

You can do an if statement after each click to check if the element has 0px
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
}
}

Use this
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
if($('.xman').css("marginLeft")=='0px'){
$('.contr-left').attr('disabled',true);
}
}

Disable Button when margin-left: 0px
You can use jquery's .prop() method to disable a button if a condition is met. Here is an example (in pseudo code):
function disableButton() {
$(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin") === 0) {
disableButton()
}
}
checkMargin()
Rewind to 0px after some clicks
Here, I'd just set a count for clicks and trigger a function when it meets the threshold you want. Pseudo code:
var threshold = 5
var clicks = 0
$(element).click(function(){
clicks++
if (clicks === 5) {
rewind();
}
clicks - 5
})
function rewind() {
$(element).css( "margin", "0" );
checkMargin()
}

Here is my working code, thanks for all the help:
<script>
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft < '-3000px'){
$('#slide').animate({marginLeft: '0px'}, 400);
}
var hide = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hide >= '-50px'){
$('.contr-left').addClass('showMe');
}
var hideMe = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hideMe <= '-50px'){
$('.contr-left').removeClass('showMe');
}
}
</script>
<!-- /Review script -->
<section id="reviews">
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<h4>Reviews</h4>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="row">
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide" style="margin-left:0px;">
<?php get_template_part('loop-reviews');?>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
<div class="btn btn-06">Bekijk alle reviews</div>
</div>
</section>