I am experiencing a small issue with this JS code...
-I have multiple divs that are changing automatically in rows as they move randomly...
- I want to change the color of the
divmoving up to green. - And for the
divmoving down, I want to change the color to red.
I have attempted to do this, but currently both divs are changing color while moving up and down...
Should I create a class or id to check the position of the divs and use JavaScript to implement something like:
... check the position of the div
... if moving up, change the color to 'green'
... else, change to 'red'
You can see how it currently works here: CLICK HERE FOR SAMPLE
Here is the main JS file: MAIN JS FILE for MixItUp
$(document).ready(function () {
var mixit = $('#Container').mixItUp({
load: {
sort: 'random'
},
layout: {
containerClass: 'list',
display: 'block'
}
});
function loop() {
mixit.mixItUp('sort', 'random');
};
var looper = setInterval(loop, 20000);
});*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #68b8c4;
}
.mix.category-1 {
height: 50px;
}
#Container .mix {
border: 1px solid black;
margin-top: 1px;
background-color: white;
}
.container{
padding: 20px 0 0;
text-align: center;
font-size: 0.1px;
margin-left: 35%;
-webkit-backface-visibility: hidden;
}
.container:after{
content: '';
display: inline-block;
width: 100%;
}
.container .mix,
.container .gap{
display: inline-block;
width: 49%;
}
.container .mix{
text-align: center;
margin-bottom: 0;
display: none;
}
.container .mix:after{
content: attr(data-myorder);
color: black;
font-size: 16px;
display: inline-block;
vertical-align: top;
padding: 4% 6%;
font-weight: 700;
}
.container .mix:before{
content: '';
display: inline-block;
padding-top: 60%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9"></script>
<div id="Container" class="container">
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-1" data-myorder="2"></div>
<div class="mix category-1" data-myorder="3"></div>
<div class="mix category-1" data-myorder="4"></div>
<div class="mix category-1" data-myorder="5"></div>
<div class="mix category-1" data-myorder="6"></div>
<div class="mix category-1" data-myorder="7"></div>
<div class="mix category-1" data-myorder="8"></div>
</div>