Final Update The problem got solved. Thank you all. Prepros compile my js file into main-dist. the new code was in there instead of my main.js. Thank you for all who help me.
update Able to reproduce the nonworking code in jsBin
I'm wondering why the function is not working in my js file after my jquery file is called but the script work in my HTML file.
I want the function to be in my js file so it isn't in each one of my HTML file.
Example 1 in html on jsFiddle
Example 2 in html
var navBar = function() {
var pull = $('#pull');
var menu = $('nav ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
};
$(document).ready(navBar);
Really Long snippet. The navbar code work in snippet as well but it doesn't work when i load in my browser
//time on front page
function displayTime () {
var elt = document.getElementById("clock");
var now = new Date();
elt.innerHTML = now.toLocaleTimeString();
setTimeout (displayTime, 1000);
};
displayTime();
/*
function menu(){
$('.tMenu').click(function(){
$('nav ul').slideToggle();
})
}
menu(); */
var navBar = function() {
var pull = $('#pull');
var menu = $('nav ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
};
$(document).ready(navBar);
//slider main page
var main = function(){
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(){
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(500).removeClass('active-slide');
prevSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
$('.dot').click(function(){
var index = $(this).index(); // get the index or position of the current element that has the class .dot
$('.slide').fadeOut(500); // to hide all elements with class .slide
$('.dot').removeClass('active-dot');
$('.slide').removeClass('active-slide').addClass('active');
$('#slide' + (index+1)).fadeIn(500);
$('#slide' + (index+1)).removeClass('active').addClass('active-slide');
$(this).addClass('active-dot');
});
};
$(document).ready(main);
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
nav {
background: #17181D;
border-bottom: 1px solid #0A0A0A;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
height: 40px;
width: 100%;
}
nav ul {
height: 40px;
width: 600px;
margin: 0 auto;
padding: 0;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #DED6D6;
display: inline-block;
line-height: 40px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0px #30365E;
width: 150px;
}
nav li a {
border-right: 1px solid #515676;
border-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #2575C6;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
}
nav a {
text-align: center;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #17181D;
width: 100%;
position: relative;
text-decoration: none;
}
nav a#pull:after {
border-top: .5em double white;
border-bottom: .145em solid white;
content: ' ';
display: inline-block;
height: 0.85em;
width: 1em;
position: absolute;
right: 15px;
top: 13px;
}
}
#media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div>
<h1 class='vb'></h1>
<div class='time'></div>
<div id='clock'></div>
<nav class='clearfix'>
<ul class='clearfix'>
<li>
Home
</li>
<li>
Bio
</li>
<li>
Hobbies
</li>
<li>
Resume
</li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</div>
</header>
<div class='slider container'>
<div class='slide active-slide slide-bg' id='slide1'>
<div class='container'>
<div class='row'>
<div class='slide-copy-1 col-xs-12'>
<h1>Surrounding</h1>
<p class='fun'>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding. When was the last time you stop and enjoy a nice beatiful sunset?</p>
</div>
</div>
</div>
</div>
<div class='slide' id='slide2'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Get Moving And Motivated!</h1>
<p>In a world where digital devices is so prominent, we get lost in them. Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
</div>
<div class='slide-image col-md-8'>
<!--
<ul class='imageList'>
<li><a href='#'><img src="images/jog.jpg" /></a></li>
<li><a href='#'><img src="images/health.png" /></a></li>
<li><a href='#'><img src="images/motivated.jpg" /></a></li>
<li><a href='#'><img src='images/possible.jpg' /></a></li>
</ul> -->
</div>
</div>
</div>
</div>
<div class='slide' id='slide3'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Food Delight</h1>
<p>We have all been there before!! Food is the best type of comfort. Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
<!--<img src="images/sushi.jpg"/>-->
</div>
</div>
</div>
</div>
<div class='slide' id='slide4'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Videos</h1>
<p>Movies, TV shows and online video play such a huge role in our culture. Learning, Entertainment, Visual Satisfaction etc.</p>
<!--<iframe class='vid' width="750" height="400" src="https://www.youtube.com/embed/sGbxmsDFVnE" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
</div>
</div>
<div class='slider-nav'>
<ul class='slider-dot'>
<li class='dot dot1 active-dot'>•</li>
<li class='dot dot2'>•</li>
<li class='dot dot3'>•</li>
<li class='dot dot4'>•</li>
</ul>
</div>
Please see it's working here [1]: https://jsfiddle.net/e1aar5hz/11/
$(function() {
var pull = $('#pull');
var menu = $('nav ul');
menu.hide();
pull.show()
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
You code works just as it should. You target a link with id="pull" to toggle the menu on and off. The problem is, on your CSS, you hide that #pull link when you add this:
a#pull {
display: none;
}
So the button we need to click to toggle the menu is not there.
Just remove that CSS and you will see the "Menu" button and that the script is working fine.
If this is not the problem, please elaborate on what you are expecting to happen with the code you have here.
i recreated your code and is working just fine the only error i corrected was on displayTime function
function displayTime () {
var now = new Date();
var elt = $("#clock").text(now.toLocaleTimeString());
setTimeout (displayTime, 1000);
};
here is a demo http://plnkr.co/edit/6qNQMIQT4EhtqrlzUtGb?p=preview
Related
I have a <div> tag which contains an <ul> with three <li>s with an <a> in each of them.
I have another <div> tag which contains one default image.
$(document).ready(function() {
$(".vas").click(function() {
$("#banner div").hide();
$("#vas").show();
});
$(".anb").click(function() {
$("#banner div").hide();
$("#anb").show();
});
$(".tam").click(function() {
$("#banner div").hide();
$("#tam").show();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<img src="../images/nagam1.png">
<ul>
<li>Vasantha</li>
<li>Anbalagan</li>
<li>Tamilmani</li>
</ul>
</div>
<div id="banner">
<img src="../images/family.jpg">
</div>
When clicking every link, how can I make the corresponding image load in <div id="banner">, i.e. hiding the last image and loading the new corresponding image in it?
You could do something like this:
$(document).ready(function () {
$('.nav-img-click').on('click', function(event){
event.preventDefault();
// on click hide all data-js-images inside #banner div
$('#banner [data-js-img]').hide();
// show the one which maches the "name"
$('#banner img[data-js-img="' + $(this).attr('name') + '"').show();
});
})
[data-js-img] {
display: none; /* hide all images which have data-js-img */
}
[data-js-img="default"] {
display: inline-block; /* but show the data-js-img=DEFAULT */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<img src="https://picsum.photos/200/30">
<ul>
<li>Vasantha</li>
<li>Anbalagan</li>
<li>Tamilmani</li>
</ul>
</div>
<div id="banner">
<img data-js-img="default" src="https://picsum.photos/200">
<img data-js-img="tam" src="https://loremflickr.com/320/240/dog">
<img data-js-img="anb" src="https://loremflickr.com/g/320/240/paris">
<img data-js-img="vas" src="https://loremflickr.com/320/240/brazil,rio">
</div>
Html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div class="logo">LOGO</div>
<ul class="nav">
<li>Vasantha</li>
<li>Anbalagan</li>
<li>Tamilmani</li>
</ul>
</div>
<div id="banner">
<img class="banner-img" src="https://images.pexels.com/photos/4098987/pexels-photo-4098987.jpeg?cs=srgb&dl=pexels-taryn-elliott-4098987.jpg&fm=jpg">
</div>
Css
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#header {
display: flex;
align-items: center;
height: 40px;
}
#header .logo {
width: 100px;
height: 100%;
text-align: center;
line-height: 40px;
background: pink;
}
#header .nav {
display: flex;
height: 100%;
justify-content: center;
}
.nav li {
width: 100px;
height: 100%;
text-align: center;
line-height: 40px;
}
.nav a {
color: #000;
}
.nav a:hover {
color: #ccc;
}
.banner-img {
width: 1000px;
}
Javascript
$(document).ready(function () {
const imgUrls = {
vas:
"https://images.pexels.com/photos/1596564/pexels-photo-1596564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
anb:
"https://images.pexels.com/photos/316776/pexels-photo-316776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
tam:
"https://images.pexels.com/photos/3045635/pexels-photo-3045635.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
};
const navItems = $(".nav li");
const imgBox = $(".banner-img")[0];
navItems.on("click", function (el) {
imgBox.src = imgUrls[el.target.id];
});
});
codepen.io
You can do like this :
Html:
<div id="header">
<img src="../images/nagam1.png">
<ul id="imageLinks">
<li>Vasantha</li>
<li>Anbalagan</li>
<li>Tamilmani</li>
</ul>
</div>
<div>
<img id="myBanner" src="Image-1.jpg">
</div>
Script:
<script>
$(document).ready(function () {
$("#imageLinks a").click(function () {
$("#myBanner").attr("src",this.id+".jpg");;
});
});
</script>
I'm trying to make a custom scrollspy for a website.
When scroll down I want first of all make the nav fixed/sticky, that works perfectly. When scroll down further I try to make the current nav item active, by adding a class active.
But whatever I try I just can't get that class active added to the nav item when we are at that specific section. I don't get any errors whatsoever so I rerally don't know anymore what I do wrong. I just can't see it.
Is this perhaps the wrong approach or can someone see why it won't get active?
$(function() {
var $anchor = $('.product-menu');
if ($anchor.length) {
var $menuItems = $anchor.find('a'),
$scrollItems = $menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
}),
initPosition = $anchor.offset().top;
$(window).scroll(function() {
var htop = $('#header').outerHeight(true) - 1;
if (initPosition != $anchor.offset().top && !$anchor.hasClass('sticky')) {
initPosition = $anchor.offset().top;
}
if ($(window).scrollTop() >= initPosition - htop) {
$anchor.addClass("sticky").css({
top: htop
});
} else {
$anchor.removeClass("sticky");
}
if ($anchor.length && $(window).width() > 768) {
var cur = $scrollItems.map(function() {
if ($(window).scrollTop() >= $(this).offset().top - $anchor.outerHeight() - $('#header').outerHeight()) return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
$menuItems.removeClass("active").end().filter("[href='#" + id + "']").addClass("active");
}
});
}
});
#header {
background: indianred;
color: #fff;
height: 60px;
position: sticky;
top: 0;
z-index: 98;
transition: all ease-in-out .25s;
box-shadow: 0 5px 10px rgba(0,0,0,.05);
}
.product-menu {
margin: 45px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
height:60px;
line-height:60px;
box-shadow: 0 5px 10px rgba(0,0,0,.05);
}
.product-menu.sticky {
position: sticky;
background: #fff;
z-index: 9;
width: 100%;
}
.list-inline {
padding-left: 0;
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
}
.list-inline li {
margin: 0 5px;
}
.product-block {
height: 300px;
background: #eee;
border: 1px solid #000;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header id="header">
<div class="header flex flex-align-center flex-between container">
<div class="logo">
<img src="" alt="Logo" width="" height="64" />
</div>
</div>
<nav id="menu" class="nav list-inline">
<ul class="list-inline container">
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
</ul>
</nav>
</header>
<div class="some-container">
<nav class="product-menu">
<ul class="list-inline container">
<li>Product information</li>
<li>Specifications</li>
<li>Product bundles</li>
<li>Reviews</li>
<li>Related products</li>
</ul>
</nav>
<div class="desc">
<div id="description" class="product-block">description</div>
<div id="specifications" class="product-block">specifications</div>
</div>
<div class="info">
<div id="bundles" class="product-block">bundles</div>
<div id="reviews" class="product-block">reviews</div>
</div>
<div id="related" class="product-block">related</div>
</div>
</body>
</html>
This is pretty rough but might help you get you to where you want. Defiantly not the most efficient way to handle this.
I changed $(window).width() > 768 greater than value to 520 so example below would run in stackoverflow desktop.
I've include comments in my newly added code below...
$(function() {
// changed this to const variable and non object var
const anchor = $('.product-menu');
// set updatable vars on ready
let scrollTop = $(this).scrollTop();
let topOffset = anchor.outerHeight() + $('#header').outerHeight();
// if product menu nav exists
if (anchor.length) {
// re arranged vars a bit
let $menuItems = $('a', anchor);
let $scrollItems;
// update scroll items var
$scrollItems = $menuItems.map(function() {
let item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
let initPosition = anchor.offset().top;
// added this so when product menu items are clicked it scrolls to div
$menuItems.on('click', function(e) {
// get the href id from the clicked anchor
let anchor = $(this).attr('href');
// get the scroll to (top) position minus the nav
let scrollTo = $(anchor).offset().top - topOffset;
// scroll too
$('html,body').animate({
scrollTop: scrollTo
}, 1000);
// prevent link defaults
e.preventDefault();
});
// changed this to .on binding method instead of .scroll
$(window).on('scroll', function() {
let htop = $('#header').outerHeight(true) - 1;
if (initPosition != anchor.offset().top && !anchor.hasClass('sticky')) {
initPosition = anchor.offset().top;
}
if ($(window).scrollTop() >= initPosition - htop) {
anchor.addClass("sticky").css({
top: htop
});
} else {
anchor.removeClass("sticky");
}
// update vars on scroll
scrollTop = $(this).scrollTop();
topOffset = anchor.outerHeight() + $('#header').outerHeight();
// changed 768 to 520 so stackoverflow demo would fire
if (anchor.length && $(window).width() > 520) {
// each scroll items for key value function
$.each($scrollItems, function(key, value) {
// if the top offset minus the scroll top position is less than or equal to header + product menu height
if ((value.offset().top - scrollTop) <= topOffset) {
// remove class from all product menu item anchors
$menuItems.removeClass('active');
// add active class to current viewed product menu anchor
$('a[href="#' + this.attr('id') + '"]', anchor).addClass('active');
}
});
}
});
}
});
#header {
background: indianred;
color: #fff;
height: 60px;
position: sticky;
top: 0;
z-index: 98;
transition: all ease-in-out .25s;
box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}
.product-menu {
margin: 45px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
height: 60px;
line-height: 60px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}
.product-menu.sticky {
position: sticky;
background: #fff;
z-index: 9;
width: 100%;
}
.list-inline {
padding-left: 0;
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
}
.list-inline li {
margin: 0 5px;
}
.product-block {
height: 300px;
background: #eee;
border: 1px solid #000;
}
.product-menu a.active {
color: indianred;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header id="header">
<div class="header flex flex-align-center flex-between container">
<div class="logo">
<img src="" alt="Logo" width="" height="64" />
</div>
</div>
<nav id="menu" class="nav list-inline">
<ul class="list-inline container">
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
</ul>
</nav>
</header>
<div class="some-container">
<nav class="product-menu">
<ul class="list-inline container">
<li>Product information</li>
<li>Specifications</li>
<li>Product bundles</li>
<li>Reviews</li>
<li>Related products</li>
</ul>
</nav>
<div class="desc">
<div id="description" class="product-block">description</div>
<div id="specifications" class="product-block">specifications</div>
</div>
<div class="info">
<div id="bundles" class="product-block">bundles</div>
<div id="reviews" class="product-block">reviews</div>
</div>
<div id="related" class="product-block">related</div>
</div>
</body>
</html>
After some minor modifications only in this part of your code.
if ($anchor.length && $(window).width() > 768) {
...
}
The menu element will remain active while scrolling in the area covered by the element's height, you can check the desired behavior by running the code snippet below:
$(function() {
var $anchor = $('.product-menu');
if ($anchor.length) {
var $menuItems = $anchor.find('a'),
$scrollItems = $menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
}),
initPosition = $anchor.offset().top;
$(window).scroll(function() {
var htop = $('#header').outerHeight(true) - 1;
if (initPosition != $anchor.offset().top && !$anchor.hasClass('sticky')) {
initPosition = $anchor.offset().top;
}
if ($(window).scrollTop() >= initPosition - htop) {
$anchor.addClass("sticky").css({
top: htop
});
} else {
$anchor.removeClass("sticky");
}
if ($anchor.length) {
Array.from($scrollItems).forEach(($scrollItem, i) => {
let id = $($scrollItem).attr('id');
let bottomOffsetMargin;
if(i < $scrollItems.length -1 ) {
bottomOffsetMargin = $($scrollItems[i+1]).offset().top;
} else {
bottomOffsetMargin = $anchor.offset().top + $anchor.outerHeight();
}
if ($(window).scrollTop() >= $($scrollItem).offset().top && $(window).scrollTop() < bottomOffsetMargin && !$anchor.find("a[href='#" + id + "']").hasClass("active")) {
$menuItems.removeClass("active");
$anchor.find("a[href='#" + id + "']").addClass("active");
}
});
}
});
}
});
#header {
background: indianred;
color: #fff;
height: 60px;
position: sticky;
top: 0;
z-index: 98;
transition: all ease-in-out .25s;
box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}
.product-menu {
margin: 45px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
height: 60px;
line-height: 60px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}
.product-menu.sticky {
position: sticky;
background: #fff;
z-index: 9;
width: 100%;
}
.list-inline {
padding-left: 0;
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
}
.list-inline li {
margin: 0 5px;
}
.product-block {
height: 500px;
background: #eee;
border: 1px solid #000;
}
a.goSmoothly.active {
text-decoration: none;
color: red;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header id="header">
<div class="header flex flex-align-center flex-between container">
<div class="logo">
<img src="" alt="Logo" width="" height="64" />
</div>
</div>
<nav id="menu" class="nav list-inline">
<ul class="list-inline container">
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
<li>Main nav item</li>
</ul>
</nav>
</header>
<div class="some-container">
<nav class="product-menu">
<ul class="list-inline container">
<li>Product information</li>
<li>Specifications</li>
<li>Product bundles</li>
<li>Reviews</li>
<li>Related products</li>
</ul>
</nav>
<div class="desc">
<div id="description" class="product-block">description</div>
<div id="specifications" class="product-block">specifications</div>
</div>
<div class="info">
<div id="bundles" class="product-block">bundles</div>
<div id="reviews" class="product-block">reviews</div>
</div>
<div id="related" class="product-block">related</div>
</div>
</body>
</html>
I have one page website with sections and bootstrap navbar. I can move to different section by clicking link in navbar, scrolling (auto-scroll to next section) and clicking arrow (up/down).
My problem is: when I click link or click arrow to move to different section, and then scroll, scrolling don't take new location/section, but act as if I were on previous section. Example: I'm on 2nd section, I click link and move to 4th section, and than scroll up. Instead of going to 3rd section, I go to first.
My js code is:
/*fullpagescroll*/
$(document).ready(function() {
var scrollLink = $('.scroll');
/*smoothScrolling */
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 800)
})
/*active link */
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 50
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass('active')
$(this).parent().siblings().removeClass('active')
}
})
})
});
//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 500);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 500);
}
}
});
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
My html is:
<!DOCTYPE html>
<html>
<head>
<title>CKB </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<!--<section id="move"> -->
<!-- NAVBAR-->
<section id="pageA">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand ml-auto">Brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="scroll" href="#pageA">Start</a></li>
<li ><a class="scroll" href="#pageB">About us</a></li>
<li ><a class="scroll" href="#pageC">Prices</a></li>
<li ><a class="scroll" href="#pageD">Knowledge</a></li>
<li ><a id="right" class="scroll" href="#pageE">Contact</a></li>
<li ><a id="right" class="scroll" href="#pageF">Localization</a></li>
</ul>
</div>
</div>
</nav>
<!---LOGO -->
<div class= "down">
<img src="down.png">
</div>
<!-- strzałki nawigujące -->
</section>
<section id="pageB">
<div class= "up1">
<img src="up.png">
</div>
<div class= "down ">
<img src="down.png">
</div>
</section>
<section id="pageC">
<div class= "up">
<img src="up.png">
</div>
<div class= "down">
<img src="down.png">
</div>
</section>
<section id="pageD">
<div class= "up">
<img src="up.png">
</div>
<div class= "down">
<img src="down.png">
</div>
</section>
<section id="pageE">
<div class= "up">
<img src="up.png">
</div>
<div class= "down">
<img src="down.png">
</div>
</section>
<section id="pageF">
<div class= "up">
<img src="up.png">
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
My css is:
body {
overflow:hidden;
}
#content {
left:50%;
position: center;
padding-top: 10%;
text-align: center;
text-shadow: 5px 4px 3px rgba(0,0,0,0.4),
5px 8px 13px rgba(0,0,0,0.1),
5px 18px 23px rgba(0,0,0,0.1);
}
#logo {
width: 350px;
height: auto;
}
#sentencja {
padding-top: 1%;
margin-top: 0;
text-align: center;
color: white;
font-style: italic;
font-size: 2em;
}
.navbar-default {
background-color: black;
font-size: 1.15em;
font-weight: bold;
opacity: 0.8;
/*border-bottom: 2px solid grey;
height: 70px;
padding-top: 0.7%; */
}
.navbar .navbar-collapse {
text-align: center;
}
#media (min-width: 768px) {
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
}
#media (min-width: 768px) {
.navbar-nav > li {
display: inline-block;
float:none;
}
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white;
}
#media only screen and (max-width: 750px) {
.navbar-default .navbar-collapse {
border-color: grey;
background-color: black;
}
}
.navbar-default .navbar-brand { /* kolor */
color: #d6d6d6;
}
#media (min-width:768px){
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
float: left;
margin-right: -190px;
}
}
section {
width: 100%;
height: 750px;
float: left;
}
#pageA {
background: orange;
height:100%;
width:100%;
}
#pageB {
background: red;
height:100%;
width:100%;
}
#pageC {
background: yellow;
height:100%;
width:100%;
}
#pageD {
background: blue;
height:100%;
width:100%;
}
#pageE {
background: green;
height:100%;
width:100%;
}
#pageF {
background: white;
height:750px;
width:100%;
}
h1 {
text-align: center;
color: white;
margin-top: 70px;
}
h3 {
color: white;
}
.up {
position:relative;
padding-top:5.5%;
left:47.5%;
}
.up1 {
position:relative;
padding-top:7%;
left:47.5%;
}
.down {
position:relative;
left:47.5%;
padding-top: 475px;
}
*/
.down1 {
padding-top: 60px;
}
How to synchronise it? Thanks
In this dropdown nav I'm building if a dropdown is opened and you click to open a second one, the black box should remain visible. At the moment the black box disappears when you click on a second dropdown and reappears after the dropdown is completely opened.
Update
I also noticed the black box shows after a dropdown is open and it should open at the same time.
I hope this makes sense and thank you for your help!
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: left;
}
.top-bar-section a.active {
background: #f00;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
Nav item 1
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 2
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 3
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 4
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>
If you want black-bg being added once the menu is clicked, then do not remove and add black-bg class on every click event. Simply add it once if the menu have active class and remove it when menu do not active class. If you remove and add class on every click event then black-bg will first disappear and again it will appear. To black-bg at the time drop-down is open then remove $(".main-container").addClass("black-bg"); from callback function of slideDown() because a callback function is executed after the current effect is finished.
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
if (menu.hasClass('active')) {
menu.removeClass('active');
$(".main-container").removeClass("black-bg");
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500);
$(".main-container").addClass("black-bg");
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: left;
}
.top-bar-section a.active {
background: #f00;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
Nav item 1
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 2
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 3
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 4
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>
Just move $(".main-container").removeClass("black-bg"); into if (menu.hasClass('active')) {
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
//$(".main-container").removeClass("black-bg"); FROM HERE
if (menu.hasClass('active')) {
menu.removeClass('active');
$(".main-container").removeClass("black-bg"); // TO HERE
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: left;
}
.top-bar-section a.active {
background: #f00;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
Nav item 1
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 2
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 3
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
Nav item 4
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>
Is this what you are looking for?
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
The black box will remain there in this case. What you were previously doing was that you were removing black-box explicitly.
I've made a carousel on my single page website that displays some of my photography work. The problem I'm having is that whenever I click one of the arrows to access the next picture - left or right, I am instantly snapped to the top of the page!
I've checked through both the CSS and JS and I can't seem to find any reason as to why this would be occurring.
HTML:
<div class="container">
<h3><span class="underline">Exploration</span></h3>
<p>I love exploring and capturing epic moments on my journeys. Here's some of my favourites from my latest trip across the west coast of America.</p>
</div>
<div class="slider">
<!--SLIDE 1 START-->
<div class="slide active-slide slide-feature slide-feature-1">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 1 END-->
<!--SLIDE 2 START-->
<div class="slide slide-feature slide-feature-2">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 2 END-->
<!--SLIDE 3 START-->
<div class="slide slide-feature slide-feature-3">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 3 END-->
<!--SLIDE 4 START-->
<div class="slide slide-feature slide-feature-4">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 4 END-->
<!--SLIDE 5 START-->
<div class="slide slide-feature slide-feature-5">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 5 END-->
</div>
<div class="slider-nav">
<img src="images/arrow-left.svg">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="images/arrow-right.svg">
</div>
</div>
<!--FLIPBOARD ENDS HERE-->
</div>
CSS:
.exploration {
height: 1100px;
background-color: #ffffff;
}
.exploration .container {
position: relative;
top: 35px;
width: 1200px;
}
.exploration h3 {
color: #313131;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 20px;
text-align: center;
}
.exploration p {
color: #313131;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
}
.slider {
position: relative;
top: 50px;
width: 100%;
height: 800px;
}
.slide {
display: none;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
/* Slide feature */
.slide-feature {
text-align: center;
height: 800px;
}
.slide-feature-1 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11036160_10152854777396270_5157414753497878003_o.jpg');
background-position: center;
}
.slide-feature-2 {
background-image: url('https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xta1/t31.0-8/11218515_10152909922431270_7749144937209461633_o.jpg');
background-position: center;
}
.slide-feature-3 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/t31.0-8/11187795_10152891725491270_1769195601160147349_o.jpg');
background-position: bottom;
}
.slide-feature-4 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11154672_10152854784061270_3532862830070230799_o.jpg');
background-position: center;
}
.slide-feature-5 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/11164749_10152909922426270_8192461025609874418_o.jpg');
background-position: center;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
position: relative;
top: 40px;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #7FCCE5;
}
JS:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
//Next Arrow Functionality
$('.arrow-next').click(function() {
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
var currentDot=$('.active-dot');
var nextDot=currentDot.next();
if (nextSlide.length == 0) {
nextSlide=$('.slide').first();
nextDot=$('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function() {
var currentSlide=$('.active-slide');
var prevSlide=currentSlide.prev();
var currentDot=$('.active-dot');
var prevDot=currentDot.prev();
if(prevSlide.length == 0) {
prevSlide=$('.slide').last();
prevDot=$('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
//Load Jumbotron text on page open.
$("#test h1").addClass("load");
};
$(document).ready(main);
You need to add e.preventDefault(); to your onlick functions
Check the fiddle
EDIT
As I just commented in the comment section it is the href="#" that is causing the page to the jump to the top. So technically if you remove the achor tag the e.preventDefault(); is not necessary. But it is good to keep it.
Add a parameter (e) to your click callback functions then prevent default post (that an anchor tag with href set has) with this line:
e.preventDefault();
like this:
//Next Arrow Functionality
$('.arrow-next').click(function (e) {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
e.preventDefault();
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function (e) {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
e.preventDefault();
});