We Keep Coding

Click back arrow not working properly in JavaScript

This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Do transition: 0.15s; instead of transition: 0.25s; in css file.

Align divs next to each other CSS (Cards Style)

I'm trying to align cards that are wrapped up in divs. What I want to do is align those cards beside each other until it reaches maximum screen width, then I want it to move to the next line automatically.
The problem is that once I copy the html code, the new copied card spawns on top of the previous card rather than next to each other.
HTML:
<div class="fighter-card">
<div class="front active">
<div class="ranking-position">1</div>
<div class="more">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<div class="fighter-picture">
<img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
</div>
<ul class="information">
<li>
<div class="information-left">Name:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Weight:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Belts:</div>
<div class="information-right">aa</div>
</li>
</ul>
</div>
<div class="back">
<div class="go-back">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
</div>
<ul class="information">
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">None of your business</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">aa</div>
<div class="information-right">9<sup>o</sup></div>
</li>
</ul>
</div>
</div>
<div class="fighter-card">
//Next div with the same content for testing
</div>
CSS:
.fighter-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
min-height: 400px;
}
.fighter-card .front {
width: 100%;
height: 100%;
background: #171717;
padding: 30px;
box-sizing: border-box;
transition: .5s;
transform-origin: right;
float: left;
}
.ranking-position {
font-weight: bold;
width: 50%;
text-align: left;
float: left;
color: #fff;
font-size: 40px;
}
.more {
width: 50%;
text-align: right;
cursor: pointer;
float: right;
font-size: 24px;
color: #fff;
display: block;
}
.fighter-picture {
background-size: cover;
}
.information {
margin: 0;
padding: 0;
}
.information li {
padding: 10px 0;
border-bottom: 2px solid #fff;
display: flex;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.information li:last-child {
border-bottom: none;
}
.information li .information-left {
width: 50%;
}
.information li .information-right {
width: 50%;
text-align: right;
}
.fighter-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: rgba(0,0,0,0.7);
box-sizing: border-box;
transform-origin: left;
transition: .5s;
transform: translateX(100%) rotateY(90deg);
}
.fighter-card .back.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front {
transform: translateX(-100%) rotateY(90deg);
}
.go-back {
font-size: 24px;
color: #fff;
text-align: right;
}
.go-back .fa {
cursor: pointer;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.more').click(function () {
$('.back').addClass('active')
$('.front').removeClass('active')
});
$('.go-back').click(function () {
$('.back').removeClass('active')
$('.front').addClass('active')
});
});
I know it's a lot of code here entered. Just want to make sure that everything that could be related to this problem is included.
Thanks in advance.

If you use absolute positioning and specify the location, then you should do that for each card. If not, let the browser do the positioning by using display: inline-block or float: left (if there is other content on the line).

Keep items on same line in a dynamic width sidebar

I'm trying to create a sidebar for a webpage. Now I want the sidebar to be collapsible with an animation but I cannot find a way of keeping the <img> and <span> on the same line when collapsing because the width of both tags exceeds the width of the sidebar.
I tried everything than I could think of, played with float, display, overflow, etc.
Here is a quick JSFiddle to give you an idea.
function toggleSidebar() {
$('#sidebar, #mainContent').toggleClass('expanded');
$('#sidebar, #mainContent').toggleClass('collapsed');
if ($("#sidebar").hasClass("collapsed"))
$("#toggler a").html(">>");
else
$("#toggler a").html("<<");
}
#mainContent {
background-color: #0f0;
}
#sidebar {
background-color: #00f;
}
img {
vertical-align: middle;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
ul.nav-sidebar {
width: 100%;
padding: 0px;
}
#toggler a {
float: right;
}
ul.nav-sidebar {
width: 100%;
}
ul.nav-sidebar li {
width: 100%;
display: inline-block;
}
ul.nav-sidebar li,
ul.nav-sidebar li a {
color: white;
font-weight: bold;
}
.ar-icon {
width: 50px;
}
#sidebar ul li span {
padding-left: 10px;
}
#sidebar.collapsed ul li span {
/*display: none;*/
}
#mainContent,
#sidebar {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#sidebar,
#mainContent {
float: left;
height: 100%;
}
#mainContent.expanded {
width: calc(100% - 80px);
}
#mainContent.collapsed {
width: calc(100% - 200px);
}
#sidebar.expanded {
width: 200px;
}
#sidebar.collapsed {
width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<ul class="nav nav-sidebar">
<li id="toggler" onclick="toggleSidebar();"><a><<</a></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
</div>

Flexbox can do it simply:
ul.nav-sidebar li a {
display: flex;
align-items: center;
}
jsFiddle
function toggleSidebar() {
$('#sidebar, #mainContent').toggleClass('expanded');
$('#sidebar, #mainContent').toggleClass('collapsed');
if ($("#sidebar").hasClass("collapsed"))
$("#toggler a").html(">>");
else
$("#toggler a").html("<<");
}
#mainContent {
background-color: #0f0;
}
#sidebar {
background-color: #00f;
}
img {
vertical-align: middle;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
ul.nav-sidebar {
width: 100%;
padding: 0px;
}
#toggler a {
float: right;
}
ul.nav-sidebar {
width: 100%;
}
ul.nav-sidebar li {
width: 100%;
display: inline-block;
}
ul.nav-sidebar li,
ul.nav-sidebar li a {
color: white;
font-weight: bold;
}
.ar-icon {
width: 50px;
}
#sidebar ul li span {
padding-left: 10px;
}
#sidebar.collapsed ul li span {
/*display: none;*/
}
#mainContent,
#sidebar {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#sidebar,
#mainContent {
float: left;
height: 100%;
}
#mainContent.expanded {
width: calc(100% - 80px);
}
#mainContent.collapsed {
width: calc(100% - 200px);
}
#sidebar.expanded {
width: 200px;
}
#sidebar.collapsed {
width: 80px;
}
ul.nav-sidebar li a {
display: flex;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<ul class="nav nav-sidebar">
<li id="toggler" onclick="toggleSidebar();"><a><<</a></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
</div>

You can do something like this (changes commented):
function toggleSidebar() {
$('#sidebar, #mainContent').toggleClass('expanded');
$('#sidebar, #mainContent').toggleClass('collapsed');
if ($("#sidebar").hasClass("collapsed"))
$("#toggler").html(">>"); /* modified */
else
$("#toggler").html("<<"); /* modified */
}
#mainContent {
background-color: #0f0;
}
#sidebar {
overflow: hidden; /* added */
background-color: #00f;
}
img {
vertical-align: middle;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
ul.nav-sidebar {
width: 200px; /* modified; needs to match the width of the #sidebar.expanded */
padding: 0px;
}
#toggler { /* modified */
/* added */
color: white;
font-weight: bold;
display: block;
padding: 10px 15px;
text-align: right; /* instead of "float: right" */
}
/* addition */
#toggler:hover {
cursor: pointer;
}
ul.nav-sidebar li {
width: 100%;
display: inline-block;
}
ul.nav-sidebar li,
ul.nav-sidebar li a {
color: white;
font-weight: bold;
}
.ar-icon {
width: 50px;
}
#sidebar ul li span {
padding-left: 10px;
}
#sidebar.collapsed ul li span {
/*display: none;*/
}
#mainContent,
#sidebar {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#sidebar,
#mainContent {
float: left;
height: 100%;
}
#mainContent.expanded {
width: calc(100% - 80px);
}
#mainContent.collapsed {
width: calc(100% - 200px);
}
#sidebar.expanded {
width: 200px;
}
#sidebar.collapsed {
width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<a id="toggler" onclick="toggleSidebar();"><<</a> <!-- moved outside -->
<ul class="nav nav-sidebar">
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<!-- a few extra divs, just to see the overflow in action -->
</div>

Simply add a class to the navigation items you want to stay inline and set a min-width to them. I added the class "nav-item", and then set "#sidebar" overflow to hidden;
HTML:
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<ul class="nav nav-sidebar">
<li id="toggler" onclick="toggleSidebar();"><a><<</a></li>
<li class="nav-item"> //new class
<img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span>
</li>
<li class="nav-item"> //new class
<img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span>
</li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
</div>
CSS
#sidebar {
overflow: hidden;
}
.nav-item {
min-width: 250px; /* This can be as big as small as you need */
}

You need to use absolute sizes for the list elements in order to make it work with overflow, else when you collapse the sidebar the list elements change their size automatically as well leading to a break into a new line.
Try this:
ul.nav-sidebar li:not(:first-child) {
width: 200px;
overflow:hidden;
display: inline-block;
}
you assign the sidebar a fixed size, so you could do that for the list elements as well leading with overflow:hidden to your desired behaviour (if I got it right what you want to accomplish).
Here a fiddle: https://jsfiddle.net/h0ey6bm5/19/

Slideshow Pagination Javascript/Jquery with no plugins

Code here https://jsfiddle.net/bbayo/gmvex82e/4/
I want to make a pagination slideshow out of the menu like (skinny, straight, flare) give the slideshow a control example arrows and x to close. I did something but get stuck.
Right now if you click on skinny you will get a slideshow but if you instead click on straight or boyfriend it gives you the content but no arrows.
check it here https://jsfiddle.net/bbayo/gmvex82e/4/
<div class="denim-destination-container">
<div class="denim-destination-content">
<div class="fits">
</div>
</div>
<div>
Any help is appreciated. Thank you

1.Your post didn't show your entire code to figure out what you're facing and others can't understand what you want to ask.(Although you post the code in jsfiddle, but what you post here is simple html and it's not clear enough for others to understand your question)
2.Why your control arrows and close button didn't show is because your .hide contains your control
<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper" >
<div id="skinny" class="macysSlide show">
<div class="slide-container">
<img src="xxx.jpg" alt="" />
</div>
</div>
<!-- and more divs -->
</div>
<div class="denim-close " id="x-img">
<img src="xxx"/>
</div>
<div class="arrow" id="arrow_right">
<img src="xxx"/>
</div>
<div class="arrow" id="arrow_left">
<img src="xxx"/>
</div>
and your javscript control show only your slider div but not your control div.
$(".link").click(function() {
$(".hide").hide();
var dataType = $(this).attr('data-type');
$("#" + dataType).show();
});
here is the fixed code.
check the html and javascript section.
$(document).ready(function() {
$(".link").click(function() {
$(".hide").hide();
$(".control").show();
var dataType = $(this).data('type');
$("#" + dataType).show();
});
var currentPosition = 0,
counter = 0,
slideWidth = 886,
slides = $('.macysSlide'),
numSlides = slides.length,
selectedClass;
function displayArrows(position) {
for (var i = 0; i < numSlides; i += 1) {
if (i == position) {
$(".activeslide").remove();
} else {
$("li.navPos" + i).css('color', '#8a8a8a');
}
}
}
function moveSlide() {
console.log(slideWidth);
console.log(currentPosition);
$('#macysSlideshowWrapper').animate({
'margin-left': (slideWidth * -currentPosition)
})
}
$('.arrow').click(function() {
currentPosition = parseInt(currentPosition);
if ($(this).attr('id') == 'arrow_right') {
if (currentPosition == (numSlides - 1)) {
currentPosition = 0;
} else {
currentPosition = currentPosition + 1;
}
} else if ($(this).attr('id') == 'arrow_left') {
if (currentPosition == 0) {
currentPosition = numSlides - 1;
} else {
currentPosition = currentPosition - 1;
}
}
displayArrows(currentPosition);
moveSlide();
});
displayArrows(currentPosition);
$(".fits-bottom-nav li").click(function() {
moveSlide();
// selectedClass=$(this).attr('class');
// console.log('selectedClass', selectedClass);
// currentPosition = selectedClass[6];
currentPosition = $(this).find("a").data('index');
console.log('currentPosition', currentPosition);
displayArrows(currentPosition);
moveSlide();
});
$(".control").hide();
});
ul {
margin: 0 0 1.5em;
/* 24 / 16 */
padding: 0;
}
li {
line-height: 1.5;
/* 24 / 16 */
margin: 0;
display: inline-block;
cursor: pointer;
padding: 32px;
}
.denim-destination-container {
width: 900px;
margin: 0 auto;
line-height: 0;
}
.denim-nav ul li a.active {
color: yellow;
}
.denim-destination-content {
border-top: 7px solid #34496C;
border-right: 7px solid #34496C;
border-left: 7px solid #34496C;
width: 886px;
height: 2532px;
}
/* fits styles */
.fits,
.washes {
position: relative;
}
.fits-top-nav {
position: absolute;
top: -22px;
left: 50px;
}
.fits-top-nav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
margin: 5px;
}
.fits-top-nav li a:hover {
color: yellow;
}
.fits-bottom-nav {
position: absolute;
top: 576px;
left: 34px;
}
.fits-bottom-nav li a {
color: #485977;
text-decoration: none;
font-size: 14px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
font-weight: bold;
margin-left: -8px;
}
.fits-bottom-nav .active a {
background-color: #ccc !important
}
.washes-top-nav {
position: absolute;
top: 512px;
left: -17px;
}
.washes-top-nav li {
line-height: 18px;
margin-left: 20px
}
.washes-top-nav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
margin: 5px;
}
/* slide styles */
#macysSlideshow {
/*width and height of the slides go here*/
height: 636px;
margin: 0 auto;
overflow: hidden;
position: absolute;
top: 173px;
clear: both;
}
#macysSlideshowWrapper {
/*width of all the slides combined (slidesWidth * 3) goes here*/
/* width:6300px;
height:636px;*/
}
.macysSlide {
/*slide with and height goes here*/
width: 886px;
height: 636px;
float: left;
position: relative;
margin: 0;
}
.slide-container {
position: relative;
display: inline-block;
float: left;
width: 886px;
}
.arrow,
.denim-close {
position: absolute;
cursor: pointer;
}
/*add left and right arrow positioning*/
#arrow_left {
top: 30%;
left: 15px;
padding-top: 1px;
z-index: 100;
}
#arrow_right {
top: 30%;
left: 855px;
padding-top: 1px;
z-index: 100;
}
#x-img {
top: 1%;
left: 850px;
padding-top: 1px;
z-index: 100;
}
/* BRANDS STYLE */
#brands {
position: relative;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
font-size: 14px;
color: #34496c;
margin-top: 205px;
}
.brand-content {
position: absolute;
top: 200px;
left: 400px;
}
.dotted {
border-bottom: 3px dashed #34496c;
text-decoration: none;
font-size: 20px;
}
.brands-list li {
display: inline;
}
.brands-list a {
display: inline-block;
padding: 5px;
margin-right: 55px;
color: #34496c;
}
.new-noteworthy-list {
width: 611px;
margin-top: 25px;
margin-left: -25px;
}
.all-time-fav-list {
width: 580px;
margin-top: 25px;
margin-left: -25px;
}
/* how to wear it styles */
label,
a {
color: teal;
cursor: pointer;
text-decoration: none;
}
#slider {
margin: 0 auto;
}
/* NEW EXPERIMENT */
/* Slider Setup */
input {
display: none;
}
#slide1:checked ~ #slides .inner {
margin-left: 0;
}
#slide2:checked ~ #slides .inner {
margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
margin-left: -400%;
}
#slide6:checked ~ #slides .inner {
margin-left: -500%;
}
#slide7:checked ~ #slides .inner {
margin-left: -600%;
}
#overflow {
overflow: hidden;
height: 774px;
}
article img {
width: 100%;
}
#slides .inner {
width: 700%;
line-height: 0;
}
#slides article {
/*width: 20%;*/
float: left;
}
/* Control Setup */
#controls {
margin: -29.9% 0 0 0;
width: 100%;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
/*margin: 20% 0 0;*/
text-align: center;
position: absolute;
margin-left: 250px;
margin-top: 175px;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
margin-left: 35px;
}
#active label:hover {
background: #eacf54;
border-color: #777 !important;
}
#controls label {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(7),
#slide7:checked ~ #controls label:nth-child(1) {
background: url('../images/denim-right-arr-01.png') no-repeat;
float: right;
margin: -190px -20px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(7),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5),
#slide7:checked ~ #controls label:nth-child(6) {
background: url('../images/denim-left-arr-01.png') no-repeat;
float: left;
margin: -190px 0 0 15px;
display: block;
}
#slide1:checked ~ #active label:nth-child(1) {
display: none;
}
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5),
#slide6:checked ~ #active label:nth-child(6),
#slide7:checked ~ #active label:nth-child(7) {
background: #eacf54;
border-color: #eacf54 !important;
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
/* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
/* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label {
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
/*washes styles*/
.washes-content {
position: absolute;
top: 235px;
left: 175px;
}
.hide {
display: none;
}
.show {
display: block;
}
#dw {
position: absolute;
left: 150px;
}
#ww {
position: absolute;
left: 200px;
}
#bw {
position: absolute;
left: 10px;
}
#gw {
position: absolute;
left: 160px;
}
#mw {
position: absolute;
left: 295px;
}
`HTML`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="denim-destination-container">
<div class="denim-destination-content">
<div class="fits">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-02a.jpg" alt="" />
<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper">
<div id="skinny" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-04a.jpg" alt="" />
</div>
</div>
<div id="straight" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-05a.jpg" alt="" />
</div>
</div>
<div id="boyfriend" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-06a.jpg" alt="" />
</div>
</div>
<div id="bootcut" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-08a.jpg" alt="" />
</div>
</div>
<div id="cropped" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-07a.jpg" alt="" />
</div>
</div>
<div id="flare" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-09a.jpg" alt="" />
</div>
</div>
</div>
</div>
<div class="control">
<div class="denim-close " id="x-img">
<a href="#fits">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-close.png" />
</a>
</div>
<div class="arrow" id="arrow_right">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-right-arr.png" />
</div>
<div class="arrow" id="arrow_left">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-left-arr.png" />
</div>
</div>
<nav class="fits-top-nav denim-nav">
<ul>
<li>FITS
</li>
<!--
-->
<li>WASHES
</li>
<!--
-->
<li>HOW TO WEAR IT
</li>
<!--
-->
<li>BRANDS
</li>
<!--
-->
<li>SHOP ALL DENIM
</li>
</ul>
</nav>
<nav class="fits-bottom-nav">
<ul>
<li>SKINNY
</li>
<li>STRAIGHT
</li>
<li>BOYFRIEND
</li>
<li>BOOTCUT
</li>
<li>CROPPED
</li>
<li>FLARE
</li>
</ul>
</nav>
</div>
</div>
</div>

shuffle.js: position of grids move after shuffle

I have a 3*3 grid layout. It should look something like this:
Then I added shuffle.js to shuffle the grids and filter them. However, the grid layout turns into this.
Why did this happen and how to fix it?? Thank you
My HTML code:
<body>
<div id="wrapper">
<div id="menunav">
<header id="logo">Siyan Zhao</header>
<nav id="nav">
<ul>
<li>Portfolio</li>
<li>About Me</li>
<li>Skills</li>
<li>Resume</li>
</ul>
</nav>
<ul id="filter">
<li><a class="active" href="#" data-group="all">All</a></li>
<li>UI/UX</li>
<li>Design</li>
<li>Research</li>
<li>Illustration</li>
</ul>
</div>
<!--Main content in the format of grids-->
<div id="content">
<div class="grid3">
<article class="bucket">
<a href="firefly-ticket.html">
<img src="images/Firefly/firefly_icon.png" alt=""/>
<div class="img-overlay">
<h5>Firefly: A Smart Ticket</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="Chance.html">
<img src="images/Chance/Chance Icon_2.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "research", "ui"]'>
<h5>Chance</h5>
</div>
</a>
</article>
<article class="bucket" >
<a href="monogram.html">
<img src="images/monogram.jpg" alt=""/>
<div class = "img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Monogram</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="gestalt-composition.html">
<img src="images/gestalt-cover.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Gestalt Composition</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="redthread.html">
<img src="images/redThread.jpg" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>The Red Thread</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="typographic-hierarchy.html">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Typographic Hierarchy</h5>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©Siyan Zhao 2014</div>
</div>
</body>
My CSS code:
/* -------------------------------------*/
#wrapper {
background-color: #FFFfff;
width: 70%;
padding-bottom: 0px;
margin: 0 auto;
position: relative;
min-height: 100%;
overflow-x: hidden;
}
/* Left hand side menu style */
/* -------------------------------------*/
#menunav {
z-index: 20;
background-color: #ffffff;
position: fixed;
width: 210px;
padding-top: 80px;
display: block;
margin: 0px;
border-right-style: none;
border-color: rgba(0,0,0,1.00);
border-right-width: thin;
font-family: 'Droid Sans', sans-serif;;
font-weight: normal;
}
#logo {
text-align: left;
margin-bottom: 48px;
padding-top: 18px;
font-family: "Century Gothic";
font-weight: bold;
font-size:2.3em;
}
#menunav ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
}
#menunav #nav a{
text-align: left;
font-size: 1em;
padding-top: 18px;
border-color: rgba(0,0,0,1.00);
border-bottom-style: solid;
border-width: thin;
-webkit-transition: padding-left 0.3s ease-in-out;
-moz-transition: padding-left 0.3s ease-in-out;
-o-transition: padding-left 0.3s3 ease-in-out;
-ms-transition: padding-left 0.3s3 ease-in-out;
transition: padding-left 0.3s ease-in-out;
}
#menunav #nav a:hover {
padding-left: 50px;
}
#menunav #nav a:active, #mainnav a:focus, #menunav #nav a.thispage{
text-decoration: none;
font-weight: bold;
/*ovrwrite hover effect for active page */
padding-left: 0;
}
/* Formatting for main page grid area*/
/* -------------------------------------*/
.bucket {
float: left;
margin: 0% 0%;
position: relative;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
width: 33.3%;
}
.grid3 .bucket:nth-of-type(3n+1) {
clear: left;
}
.bucket img {
height: auto;
width: 100%;
/*Align image to the baseline to delete white spacing*/
vertical-align: bottom;
}
/*hover over overlay effect*/
/* -------------------------------------*/
.img-overlay {
background-color: rgba(0,0,0,0.7);
bottom: 0;
left: 0;
top: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
.img-overlay h5{
opacity: 1;
display: inline-block;
margin: auto;
font-weight: normal;
font-size: 1.3vw;
line-height: 1vw;
position: absolute;
top: 30%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.img-overlay p{
opacity: 1;
display: inline-block;
margin: auto;
position: absolute;
top: 47%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
font-family: 'Droid Serif', serif;
font-size: 1.2vw;
line-height: 1vw;
/*vertical-align: middle;*/
}
.bucket:hover .img-overlay {
opacity: 1;
}
My Javascript
$(document).ready(function() {
/* Shuffling buckets */
var $grid3 = $('.grid3');
$grid3.shuffle({
itemSelector: '.bucket'
});
$('#filter a').click(function (e) {
e.preventDefault();
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid3.shuffle('shuffle', groupName );
});

You should make sure that the container parent div are set:
#content {
position:relative;
}
or
#content . grid3 {
position:relative;
}