It used to work and now I have no idea what I did wrong. When I toggle the mobile menu, the navigation items don't show up but when I inspect it the browser shows they're there but aren't visible.
Can someone help me figure out this menu problem? This has stumped me
I tried making the menu links appear at the top with a high z index, different combinations of selecting the a tags in the list items, still nothing.
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
// Do something else, like open/close menu
});
/* Code for the toggling of the navbar */
let toggleNavStatus = false;
let toggleNav = function () {
let getMenu = document.getElementById("main-navigation");
let getSidebar = document.getElementById("bottom-nav-bar");
let getSidebarUL = document.querySelector(".side-nav ul");
let getSidebarLinks = document.querySelectorAll(".side-nav a");
if (toggleNavStatus === false) {
getSidebar.style.visibility = "visible";
getSidebar.style.opacity = "1";
getMenu.style.top = "20px";
getMenu.style.visibility = "visible";
getSidebarLinks.forEach((item, index)=>{
console.log(item);
item.style.display = "block";
item.style.opacity = "1";
})
getSidebar.style.height = "290px";
toggleNavStatus = true;
}
else if (toggleNavStatus === true) {
getSidebar.style.visibility = "hidden";
getSidebar.style.opacity = "1";
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
item.style.visibility = "hidden";
item.style.display = "none";
})
getSidebar.style.height = "0";
toggleNavStatus = false;
}
}
/*
Core Styles
*/
body, html {
margin: 0;
padding: 0;
}
.container {
padding: 0 5%;
}
a, p, h1, h2, h3, h4, h5, h6, li {
font-family: 'Roboto', sans-serif;
}
p {
font-size: 1.125em;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 2.5em;
}
h1+h2 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
font-size: 1em;
}
/* Buttons */
.solid {
background: #000;
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
margin-bottom: 15px;
}
.primary {
background: var(--primary);
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
}
:root {
--primary: #fdd008;
--button-reg: 1em;
--button-sm: .75em;
--heading: #1a1a1a;
--p: #4c4c4c;
}
/*
Navigation
*/
#top-navbar {
display: none;
}
.sub-nav {
visibility: hidden;
height: 0;
position: relative;
z-index: 2000;
background: #fff;
display: none;
}
.quote {
display: none;
}
/* Side Nav */
#main-navigation {
margin: 0;
padding-right: 20px;
position: relative;
top: -2020px;
z-index: 2;
visibility: hidden;
}
#bottom-nav-bar {
height: 0;
width: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 200;
background: #232b2b;
transition: .3s ease-in-out;
visibility: hidden;
opacity: 0;
}
nav ul li {
position: relative;
list-style: none;
text-align: right;
padding: 0px;
top: 50px;
z-index: 1200;
margin: 15px 0;
width: auto;
font-weight: bold;
font-size: 10px;
}
.side-nav a {
text-decoration: none;
padding: 0;
margin-bottom: 5px;
color: #fff;
font-size: 13px;
opacity: 0;
visibility: hidden;
display: none;
position: relative;
z-index: 200;
}
nav img {
position: absolute;
top: 15px;
left: 0;
z-index: 10;
}
/* Hamburger Menu */
#menu-button {
position: absolute;
right: 10px;
display: flex;
align-items: center;
top: 7px;
width: 60px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
position: relative;
z-index: 2000;
}
.hamburger:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
background-color: #fff;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
z-index: 2000;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* * Spring */
.hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.13s linear;
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.22s;
background-color: transparent !important;
}
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins|Roboto&display=swap" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Valley Construction Supply | Marysville, WA</title>
</head>
<header>
<button id="menu-button" class="hamburger hamburger--spring" onclick="toggleNav()" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<!-- Top Navigation Bar -->
<div id="top-navbar">
<div class="container">
<img src="" alt="valley_construction_supply_logo">
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Marysville, WA</p>
<p>(800) 559-8566</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Tacoma, WA</p>
<p>(800) 922-2082</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Hours</p>
<p>Mon-Fri: 9am - 5pm</p>
</div>
</div>
</div>
</div>
<nav>
<!-- Desktop Navigation -->
<img src="images/vcs.png" alt="" height="60px">
<div id="bottom-nav-bar" class="side-nav" class="container">
<ul id="main-navigation" class="side-nav">
<li>HOME</li>
<li>ABOUT</li>
<ul class="sub-nav">
<li>JOBS</li>
<li>ABOUT VCS</li>
</ul>
<li>SERVICES</li>
<ul class="sub-nav">
<li>REBAR FABRICATION</li>
<li>HOMECONCRETE</li>
<li>BUILDING MATERIALS</li>
<li>EQUIPMENT AND TOOLS</li>
</ul>
<li>PRODUCTS</li>
<li>PROMOTIONS</li>
<li>CONTACT</li>
<ul class="sub-nav">
<li>APPLY FOR CREDIT</li>
</ul>
</ul>
<button class="quote" type="button">
REQUEST A QUOTE
</button>
</div>
</nav>
</header>
<body>
</body>
</html>
when you click the hamburger menu the navigation list is supposed to appear from the top with the slide down menu. But no links show up.
The problem is in your toggleNav() function. If you look at this part of the code:
if (toggleNavStatus === false) {
getSidebarLinks.forEach((item, index)=>{
console.log(item);
// here, you are setting display back to block, BUT visibility stays hidden!
item.style.display = "block";
item.style.opacity = "1";
})
}
else if (toggleNavStatus === true) {
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
// here, you are setting display to none AND visibility to hidden
item.style.visibility = "hidden";
item.style.display = "none";
})
}
Side note for you: In order to hide an element from the page, you don't need to set both visibility:hidden and display:none. Either one will do the job, although they differ in details. If you are interested, you can learn more about these differences in the following question: What is the difference between visibility:hidden and display:none?
Related
I have 2 toggle switches, the problem I have is sperating each toggle switches to do their own thing. I'm unable to, in javascript, to make a if/else statement for my 2nd toggle switch.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label class="switch"><input type="checkbox"><div class="slider round"><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label class="switch2"><input type="checkbox2"><div class="slider2 round2"><div id="text2">OFF</div></div></label></a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
</body>
</html>
the first if statement for the frist switch works but when I copy the code i couldn't make an ID for the CHECKBOX for javascript and CSS.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
RainbowId.classList.toggle('Rainbow');
document.getElementById('text').innerHTML = 'ON';
}
else {
RainbowId.classList.toggle("Rainbow");
document.getElementById('text').innerHTML = 'OFF';
}
});
});
I gave the 2nd switch its own classes but couldn't give the CHECKBOX its own class.
/* Rainbow background*/
.Rainbow {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
position: absolute;
background-size: 1800% 1800%;
-webkit-animation: rainbow 3s ease infinite;
animation: rainbow 3s ease infinite;
}
#keyFrames rainbow {
0%{background-position:0% 82%}
25%{background-position: 50% 9.5%}
50%{background-position:100% 19%}
75%{background-position: 75% 41%}
100%{background-position:0% 82%}
}
/* Sidebar Styles */
.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background: grey;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
overflow-x: hidden;
transition: 1s;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
white-space: nowrap;
transition: 0.3s;
}
.closebtn {
cursor: pointer;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 40px;
}
.openbtn {
font-size: 40px;
cursor: pointer;
border: none;
background: none;
}
.openbtn:hover {
opacity: 50%;
}
br {
user-select: none;
}
/* Toggle Switch Styles */
.switch {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch #text {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
/*Toogle Switch 2*/
.switch2 {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch2 input {
display:none;
}
.slider2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider2:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider2 {
background-color: #2196F3;
}
input:focus + .slider2 {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider2:before {
transform: translateX(26px);
}
.slider2.round2 {
border-radius: 34px;
}
.slider2.round2:before {
border-radius: 50%;
}
.switch2 #text2 {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
Change your code as follows - use querySelectorAll to find all .checkbox
You'll see that both id="text" (and text2) are now class="text" this is important, since we can get the parent of the clicked checkbox and use querySelector to find the appropriate text
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
checkbox.parentElement.querySelector('.text').innerHTML =
checkbox.checked ? 'ON' : 'OFF';
if (this.dataset.action === 'rainbow') {
RainbowId.classList.toggle('Rainbow');
} else {
console.log('DO NOT TOUCH as TOUCHED');
}
});
});
});
I also tidied the code a bit to be more DRY
And your html - I've put line breaks in to make it readable, but I know that may cause issues, but at least you can see easily what has changed
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a>
<label class="switch">
<input type="checkbox" data-action="rainbow">
<div class="slider round">
<!-- added class here -->
<div id="text" class="text">OFF</div>
</div>
</label>
</a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a>
<label class="switch2">
<input type="checkbox" data-action="not a rainbow">
<div class="slider2 round2">
<!-- added class here -->
<div id="text2" class="text">OFF</div>
</div>
</label>
</a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
This question already has answers here:
Why does querySelector only select the first element and how can I fix this?
(4 answers)
Closed 1 year ago.
I have been trying to make a working phone for a school project. In HTML. Now, I added a class with JS with the following:
document.querySelector(".app-content").classList.add("app-on");
Now, the class .app-on changes the width, height and font-size of my div. It has a transition built in. However, the width and height instantly pop up, while the font-size transitions just like i wanted.
.app-content is the class I am focusing on. The one I have added the animation to is the first one of that class to appear in the code
The full code for reference:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<body onload="startTime()">
<!-- phone -->
<div id="phone-border">
<!-- screen -->
<div id="phone-screen">
<p id="time" style="font-weight: 600; font-size: 30px; float: left; color: white; padding: 10px;"></p>
<div id="app-container">
<div class="app-wrapper" style="z-index: 10000;">
<img src="https://img.icons8.com/ios/452/coronavirus--v1.png" class="app-icon" style="left: 10%; top 60%" onclick="openMA()">
<div class="app top-app left" href="#">Malware-Arten</div>
<div class="app-content" style="position: absolute; left: 0; color: black;">asdasdfasdfasdfasdf</div>
</div>
<div class="app-wrapper">
<img src="https://www.freeiconspng.com/thumbs/shield-png/shield-png-1.png" class="app-icon" style="right: 15%; top 60%" onclick="openS()">
<div class="app top-app right" href="#">Schutz</div>
<div class="app-content"></div>
</div>
<div class="app-wrapper">
<img src="https://www.freeiconspng.com/thumbs/youtube-logo-png/hd-youtube-logo-png-transparent-background-20.png" class="app-icon" style="left: 10%; bottom: 17%" onclick="openYT()">
<div class="app bottom-app left" href="#">Youtube-Info</div>
<div class="app-content"></div>
</div>
<div class="app-wrapper">
<img src="https://www.designbust.com/download/1024/png/email_icon_transparent512.png" class="app-icon" style="right: 15%; bottom: 17%" onclick="openM()">
<div class="app bottom-app right" href="#">E-Mail</div>
<div class="app-content"></div>
</div>
</div>
<div class="blackscreen">
</div>
</div>
<!-- /screen -->
<!-- homebutton -->
<div style="position: fixed;">
<button class="pushable homebutton" id="hb">
<div class="front home-front">
</div>
</button>
</div>
<!-- /homebutton -->
</div>
<!-- /phone -->
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS here:
I have marked the class with a comment.
#import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
body {
background: #2c2b30;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-weight: 900;
color: #f58f7c;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
}
#phone-border{
width: 360px;
height: 630px;
background: #4f4f51;
margin: auto;
padding-top: 60px;
border-radius: 20px;
border-bottom: 13px solid #303030;
border-left: 13px solid #404040;
}
#phone-screen {
width: 92%;
height: 84%;
background: #f58f7c;
margin: auto;
position: relative;
}
#app-container {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
height: 63%;
}
.app-icon {
position: absolute;
width: 100px; height: 100px;
border-radius: 10px;
border: 3px solid #000;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
.app-icon:hover {
transform: translateY(-10px);
}
.app {
color: #414b41;
margin: auto;
}
.top-app {
position: absolute;
bottom: 60%;
}
.bottom-app {
position: absolute;
bottom: 10%;
}
.left {
left: 6%;
}
.right {
right: 21%;
}
.app-content {
background: #404040;
font-size: 0;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.app-on { /* -----------------------THIS-------------------------*/
font-size: 15px;
width: 100px;
height: 100px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.blackscreen {
width: 100%;
height: 100%;
background: #000;
margin: auto;
position: absolute;
z-index: 2;
transition: all 0.5s;
}
.fade {
background: transparent;
transition: 1s;
}
.phone-on {
box-shadow: 0px 0px 30px #f58f7c;
transition: 1.2s;
}
.homebutton {
width: 60px;
height: 60px;
background: #404040;
border-radius: 100px;
border: none;
padding: 0;
cursor: pointer;
outline-offset: 4px;
transition: all 0.5s;
position: fixed;
left: 48%;
top: 82%;
margin-top: 20px;
}
.home-front {
display: block;
padding-top: 60px;
border-radius: 100px;
font-size: 1.25rem;
background: #202020;
color: white;
transform: translateY(-6px);
position: relative;
left: 3px;
}
.homebutton:hover .front {
transform: translateY(-8px);
left: 4px;
transition: 0.08s;
}
.homebutton:active .front {
transform: translateY(-2px);
left: 1px;
transition: 0.08s;
}
JS here:
var on = false;
var homeButton = document.getElementById("hb");
homeButton.onclick = function(){
if (on==false) {
document.querySelector(".blackscreen").style.backgroundColor = "transparent";
document.getElementById("phone-screen").classList.add('phone-on');
on=true;
setTimeout(function(){document.querySelector(".blackscreen").style.zIndex = "-10";},500);
}
else if(on==true) {
console.log(123);
}
}
function openMA() {
console.log("Malware-Arten")
var malwareArten = true;
document.querySelector(".app-content").classList.add("app-on");
}
function openS() {
console.log("Schutz")
var schutz = true;
}
function openYT() {
console.log("YT")
var yt = true;
}
function openM() {
console.log("Mail")
var mail = true;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
document.querySelector only returns one element. You want to use document.querySelectorAll for multiple elements, along with a loop to do this.
document.querySelector(".app-content").forEach((ele) => ele.classList.add("app-on"));
The default width and height of a div is auto and you cannot transition from an auto property to a pixel value. Try adding width: 0; height: 0; to the .app-content class.
I have created a simple image carousel that I am using on my site.
It all works well until I only have one but as soon as I try to create a new one it doesn't work properly.
All I need is that all the image sliders I create are independent of each other.
Both of the sliders should work individually.
Any help would be very great.
Here is my code:
//current position
var pos = 0;
//number of slides
var totalSlides = $('.slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('.slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('.slider-wrap ul.slider').width(sliderWidth*totalSlides);
//next slide
$('.next').click(function(){
slideRight();
});
//previous slide
$('.previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('.slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('.pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('.slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('.counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('.pagination-wrap ul li').removeClass('active');
$('.pagination-wrap ul li:eq('+pos+')').addClass('active');
}
/*GLOBALS*/
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
a:hover {
color: #1bc1a3;
}
body,
hmtl {
background: #ecf0f1;
font-family: 'Anton', sans-serif;
}
.wrapper {
width: 600px;
margin: 50px auto;
height: 400px;
position: relative;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px;
}
.slider-wrap {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider-wrap ul.slider {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-wrap ul.slider li {
float: left;
position: relative;
width: 600px;
height: 400px;
}
.slider-wrap ul.slider li > div {
position: absolute;
top: 20px;
left: 35px;
}
.slider-wrap ul.slider li > div h3 {
font-size: 36px;
text-transform: uppercase;
}
.slider-wrap ul.slider li > div span {
font-family: Neucha, Arial, sans serif;
font-size: 21px;
}
.slider-wrap ul.slider li i {
text-align: center;
line-height: 400px;
display: block;
width: 100%;
font-size: 90px;
}
.object-fit_contain {
object-fit: contain;
height: auto;
max-width: 600px;
}
/*btns*/
.btns {
position: absolute;
width: 50px;
height: 60px;
top: 50%;
margin-top: -25px;
line-height: 57px;
text-align: center;
cursor: pointer;
z-index: 100;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.next {
right: -1px;
margin-right: 200px;
}
.previous {
left: -1px;
margin-left: 200px;
}
.counter {}
.slider-wrap.active .next {
right: 0px;
}
.slider-wrap.active .previous {
left: 0px;
}
/*bar*/
.pagination-wrap {
min-width: 20px;
margin-top: 350px;
margin-left: auto;
margin-right: auto;
height: 15px;
position: relative;
text-align: center;
}
.pagination-wrap ul {
width: 100%;
}
.pagination-wrap ul li {
margin: 0 4px;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #3ab8cb;
opacity: 0.5;
position: relative;
top: 0;
}
.pagination-wrap ul li.active {
width: 12px;
height: 12px;
top: 3px;
opacity: 1;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}
/*Header*/
h1,
h2 {
text-shadow: none;
text-align: center;
}
h1 {
color: #666;
text-transform: uppercase;
font-size: 36px;
}
h2 {
color: #7f8c8d;
font-family: Neucha, Arial, sans serif;
font-size: 18px;
margin-bottom: 30px;
}
/*ANIMATION*/
.slider-wrap ul,
.pagination-wrap ul li {
-webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ########################### Slider 1 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
<!-- ########################### Slider 2 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
You have multiple elements with the same ID. You will need to update your code to work off of class and "closest" related items if you need multiples of these on a single page.
For example, where you click "previous", you might need to change to something like:
//previous slide
$('.previous').click(function(event){
slideLeft(event.target); // to pass the clicked 'previous' button to slideLeft()
});
Then in your slideLeft() function, find the slider by whichever one is ancestrally closest to the clicked button:
function slideLeft(target){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$(target).closest('.slider').css('left', -(sliderWidth*pos)); // only line I changed in your example
//*> optional
countSlides();
pagination();
}
I did not run this fully but the concept of "know which one is clicked, then find what to update from there" is what you're going for I believe.
I'd like to change the colour of my logo when the menu button is clicked to match the style of the overlay.
Currently, I've been able to change it from black logo to white logo. However, when you attempt to close the menu, it does not change back to black logo, even though my js function should handle the switch.
Any help is appreciated.
function menuButton(x) {
x.classList.toggle("change");
}
function toggleNav() {
var x = document.getElementById("myNav");
if (x.style.height === "100%") {
x.style.height = "0%";
} else {
x.style.height = "100%";
}
}
function changeImg() {
var logo = document.getElementById("logo");
if (logo.src == "/images/1x/White.png") {
logo.src = "/images/1x/Asset 1.png";
} else {
logo.src = "/images/1x/White.png";
}
}
/* Global */
.white {
color: #fff
}
html,
body {
margin: 0;
padding: 0;
/* background-color: darkgray; */
}
/* Header */
header {
width: 100%;
min-height: 80px;
padding: 0;
background-color: white;
color: black;
position: fixed;
margin: 0px;
/* border-bottom: 5px solid black; */
/* z-index: 2; */
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header .logo {
float: left;
margin-top: 4px;
position: relative;
z-index: 2;
transition: 0.5s;
}
header .menu {
float: right;
margin-top: 25px;
cursor: pointer;
position: relative;
z-index: 2;
}
/* header .title h1{
margin: 21.5px 0px 0px 0px;
padding: 0;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 30px;
}
header .title a:link, a:visited{
color: black;
text-decoration: none;
} */
.bar1,
.bar2,
.bar3 {
background-color: black;
width: 35px;
height: 5px;
margin-bottom: 6px;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: white;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: white;
}
/* Navigation */
.overlay {
width: 100%;
height: 0;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.9);
z-index: 0;
transition: 0.5s;
overflow: hidden;
}
.overlayContent {
position: relative;
text-align: center;
top: 25%;
height: 100%;
margin-top: 30px;
font-family: 'Raleway', sans-serif;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: whitesmoke;
display: block;
transition: 0.3s;
}
.overlay a:hover,
a:active {
color: darkgrey;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<!-- Header Start - Includes Title, Logo, and Menu -->
<header id="top">
<div class="container">
<!-- Logo -->
<div class="logo">
<img id="logo" src="/images/1x/Asset 1.png" alt="Initials JB">
</div>
<!-- Menu Button -->
<div class='menu' onclick="menuButton(this); toggleNav(); changeImg()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- Title -->
<!-- <div class = "title">
<h1>
JADON BULL
</h1>
</div> -->
<!-- Navigation Start -->
<div class="container">
<nav id="myNav" class="overlay">
<div class="overlayContent">
Overview
Projects
Services
About Me
Contact
</div>
</nav>
</div>
</div>
</header>
<!-- Header End -->
<!-- Showcase -->
<div id="showcase">
</div>
JS:
You have to use absolute path of the image to the source of the image.
in the changeImg function, just change your if condition to :
if (logo.getAttribute('src') === '/images/1x/White.png')
and it will work.
There is a small error in your below line:
logo.src = "/images/1x/Asset 1.png";
Always make sure any filename or asset do not have spaces in their name. You could use underscore Asset_1.png and save the image. Later, use it as
logo.src = "/images/1x/Asset_1.png";
Also change the name if used elsewhere in html or css.
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>