I have build af little "model" of a single page site i want to build.
On press on a menu item, the site slides down or up, to the page requested.
I do this by having the whole content in a wrapper, that slides up and down with a css animation, and then a javascript to change the animation, depending on where to slide from and to.
But I have this problem, that when pressing on a menu-item, the page is "flashing" to the top page quickly, before doing the animation.
My code looks like this:
index.php:
<body>
<div id="menu">
<div id="menu-ele" onclick="slide_page('p1');">P1</div>
<div id="menu-ele" onclick="slide_page('p2');">P2</div>
<div id="menu-ele" onclick="slide_page('p3');">P3</div>
<div id="menu-ele" onclick="slide_page('p4');">P4</div>
</div>
<div id="wrapper">
<div id="page1">
<div id="page-titel">Page 1</div>
</div>
<div id="page2">
<div id="page-titel">Page 2</div>
</div>
<div id="page3">
<div id="page-titel">Page 3</div>
</div>
<div id="page4">
<div id="page-titel">Page 4</div>
</div>
</div>
</body>
css:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#menu {
width: 600px;
height: 70px;
background-color: #97B6C7;
border-bottom: 4px solid #324456;
border-left: 4px solid #324456;
float: right;
border-radius: 0 0 0 8px;
}
#menu-ele {
width: 110px;
height: 30px;
padding: 20px;
color: #19284B;
font-family: Trebuchet;
font-size: 18px;
text-align: center;
float: left;
cursor: pointer;
}
#menu-ele:hover {
color: #FBFBFB;
}
#wrapper {
width: 100%;
height: 100%;
-webkit-animation-name: wrapper-slide;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
top: 0;
position:absolute;
z-index: -1;
}
#-webkit-keyframes wrapper-slide {
}
#page1 {
width: 100%;
height: 100%;
background-color: #C0595B;
}
#page2 {
width: 100%;
height: 100%;
background-color: #BCA7A8;
}
#page3 {
width: 100%;
height: 100%;
background-color: #49677A;
}
#page4 {
width: 100%;
height: 100%;
background-color: #C0A27B;
}
#page-titel {
width: 500px;
height: 60px;
font-family: Trebuchet MS;
font-size: 60px;
text-align: center;
margin: 0 auto;
padding-top: 25%;
}
js:
function findWebkitRule(rule) {
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var j = 0; j < ss[i].cssRules.length; ++j) {
if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule) {
return ss[i].cssRules[j];
}
}
}
return null;
}
function change(anim, from, to) {
var keyframes = findWebkitRule(anim);
keyframes.deleteRule("0%");
keyframes.deleteRule("100%");
keyframes.insertRule("0% { top: " + from + "px; }");
keyframes.insertRule("100% { top: " + to + "%; }");
document.getElementById("wrapper").style.webkitAnimationName = anim;
document.getElementById("wrapper").style.webkitAnimationPlayState = "running";
}
function slide_page(page) {
var end = 0;
if (page == "p1") {
end = 0;
}
if (page == "p2") {
end = -100;
}
if (page == "p3") {
end = -200;
}
if (page == "p4") {
end = -300;
}
var topValue = document.getElementById("wrapper").offsetTop;
document.getElementById("wrapper").style.webkitAnimationName = "none";
document.getElementById("wrapper").style.webkitAnimationPlayState = "paused";
setTimeout(function(){
change("wrapper-slide", topValue, end);
}, 300); // <- I set this one to 300, so the flashing problem is demonstrated clearer
}
In this example, I have set the setTimeout to 300, så the problem is clearly demonstrated. Normally this would be 0, but you can still se the flash very quickly.
You can use the following snippet to convert it into a SPA.
This works in any size.
Header stays fixed.
Body shows only one frame at a time.
More important, no flickering!
$(document).ready(function () {
$(".page").css({
height: $(window).height(),
lineHeight: $(window).height() + "px"
});
$("nav a").click(function () {
theHref = $(this).attr("href");
$("html, body").animate({
scrollTop: $(theHref).offset().top
}, 500);
return false;
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
a {color: #33f; text-decoration: none;}
body {overflow: hidden;}
header {position: fixed; right: 0; top: 0;}
header nav ul {padding: 5px; background: #ccf; border-radius: 0px 0px 0px 5px;}
header nav ul li {display: inline-block;}
header nav ul li a {display: block; padding: 5px; border-radius: 5px;}
header nav ul li a:hover {background-color: #99f; color: #fff;}
.page {text-align: center;}
#page-1 {background: #99f;}
#page-2 {background: #9f9;}
#page-3 {background: #f99;}
#page-4 {background: #9cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
</header>
<section>
<div class="page" id="page-1">Page 1</div>
<div class="page" id="page-2">Page 2</div>
<div class="page" id="page-3">Page 3</div>
<div class="page" id="page-4">Page 4</div>
</section>
JSBin: http://jsbin.com/rekobofami, http://output.jsbin.com/rekobofami
Try this. Using jquery animate to slide to the relevant page.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function slide_page(page) {
$('html, body').animate({
scrollTop: $('#'+page).offset().top
}, 2000);
}
</script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#menu {
width: 600px;
height: 70px;
background-color: #97B6C7;
border-bottom: 4px solid #324456;
border-left: 4px solid #324456;
float: right;
border-radius: 0 0 0 8px;
}
#menu-ele {
width: 110px;
height: 30px;
padding: 20px;
color: #19284B;
font-family: Trebuchet;
font-size: 18px;
text-align: center;
float: left;
cursor: pointer;
}
#menu-ele:hover {
color: #FBFBFB;
}
#wrapper {
width: 100%;
height: 100%;
-webkit-animation-name: wrapper-slide;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
top: 0;
position:absolute;
z-index: -1;
}
#-webkit-keyframes wrapper-slide {
}
#page1 {
width: 100%;
height: 100%;
background-color: #C0595B;
}
#page2 {
width: 100%;
height: 100%;
background-color: #BCA7A8;
}
#page3 {
width: 100%;
height: 100%;
background-color: #49677A;
}
#page4 {
width: 100%;
height: 100%;
background-color: #C0A27B;
}
#page-titel {
width: 500px;
height: 60px;
font-family: Trebuchet MS;
font-size: 60px;
text-align: center;
margin: 0 auto;
padding-top: 25%;
}
</style>
</head>
<body>
<div id="menu">
<div id="menu-ele" onclick="slide_page('page1');">P1</div>
<div id="menu-ele" onclick="slide_page('page2');">P2</div>
<div id="menu-ele" onclick="slide_page('page3');">P3</div>
<div id="menu-ele" onclick="slide_page('page4');">P4</div>
</div>
<div id="wrapper">
<div id="page1">
<div id="page-titel">Page 1</div>
</div>
<div id="page2">
<div id="page-titel">Page 2</div>
</div>
<div id="page3">
<div id="page-titel">Page 3</div>
</div>
<div id="page4">
<div id="page-titel">Page 4</div>
</div>
</div>
</body>
</html>
Related
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
I am making a slider with control and indicators. I am stuck in how to make the indicators linking with the slider itself. I search a lot of keywords, but none of the answers can help me out :(
Trying to make it “Click on indicators > remove nearby active class > add active class to this > slider div match the order of the indicators div list)
$('.carousel-indicators > div').on('click', function(){
$(".carousel-indicators > div").something match the({
'order of the': ($(".slider-inner > div").slider list() + 'order')
});
$(".carousel-indicators > div").closest('div').removeClass('active');
$(this).addClass('active');
});
.slider-inner{
width:200px;
height:200px;
position:relative;
overflow:hidden;
float:left;
padding:3px;
border:#666 solid 1px;
}
.slider-inner > div{
display:none;
width:200px;
height:200px;
}
.slider-inner .active{
display:inline-block;
cursor: pointer;
}
.carousel-indicators{
width: 500px;
float: left;
}
.carousel-indicators > div{
float: left;
width: 30px;
height: 8px;
background-color: #D8D8D8;
margin-right: 30px;
cursor: pointer;
}
.carousel-indicators .active{
background-color: #FF6600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-outer">
<div class="slider-inner">
<div id="item" class="active" ><p>#1 </p></div>
<div id="item" ><p>#2 </p></div>
<div id="item" ><p>#3 </p></div>
</div>
<div class="carousel-indicators">
<div class="active"></div>
<div></div>
<div></div>
</div>
</div>
You can add data attributes to the div elements and target in the JS
$('#slider-indicator > li').on('click', function() {
var slideNumber = $(this).data('slide');
var slides = $('#slider > div');
var indicators = $('#slider-indicator > li');
// look for slide with same data-slide as the clicked li
for (var i = 0; i < slides.length; i++) {
if (i === slideNumber) {
$(slides[i]).addClass('active');
$(indicators[i]).addClass('active');
} else {
$(slides[i]).removeClass('active');
$(indicators[i]).removeClass('active');
}
}
});
#slider {
margin: 0 0 15px;
padding: 0;
width: 100%;
height: 30vw;
position: relative;
overflow: hidden;
}
#slider div {
margin: 0;
width: 100%;
height: 30vw;
position: absolute;
top: 0;
left: 100%;
background: green;
transition: left 0.4s linear;
color: white;
text-align: center;
padding: 10vw 0;
font-size: 40px;
}
#slider div:nth-child(2n) {
background: blue;
}
#slider div.active {
left: 0;
}
ul {
margin: 0 auto;
padding: 0;
width: 100%;
list-style: none;
color: white;
text-align: center;
font-size: 12px;
}
ul li {
margin: 0 16px;
padding: 8px 12px;
text-align: center;
background: grey;
display: inline-block;
cursor: pointer;
border-radius: 100%;
}
ul li.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
<div class="active">Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
<ul id="slider-indicator">
<li data-slide="0" class="active">1</li>
<li data-slide="1">2</li>
<li data-slide="2">3</li>
</ul>
I want bullets move when i clicked arrow,i tried to think how to code it but my knowledge and experience is still not enough so i really need help from people.
$(document).ready(function () {
$("#mainTopics").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#sub-topics").toggle();
});
$("html").on('click', function () {
if ($("#sub-topics").is(':visible')) {
$("#sub-topics").toggle();
}
});
});
var sliderImages = document.querySelectorAll('.slide');
var arrowLeft = document.querySelector('#arrow-left');
var arrowRight = document.querySelector('#arrow-right');
var arrowSlide = document.querySelectorAll('.arrow');
var sliderBullets = document.querySelectorAll('.bullets');
var current = 0;
//reset slideimages
function resetSlide() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
//slide left
function slideLeft() {
resetSlide();
sliderImages[current - 1].style.display = 'block';
current--;
}
//slide right
function slideRight() {
resetSlide();
sliderImages[current + 1].style.display = 'block';
current++;
}
//arrow left
arrowLeft.addEventListener('click', function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//arrow right
arrowRight.addEventListener('click', function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
//start to slideimages
function startSlide() {
resetSlide();
sliderImages[0].style.display = 'block';
}
//called startslide function
startSlide();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
/*arrow-left*/
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
/*arrow-right*/
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.active, .bullets:hover {
background-color: #e0dede;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Above is the code that i have learned from website asked people and youtube.
My website now the arrows work fine can change to other slides,but the bullets are not moving the same time like arrows.
Your goal can be reached by adding the following javascript code to your js file:
for (var i=0 ;i<sliderBullets.length;i++)
{
bullet=sliderBullets[i];
bullet.addEventListener("click",function(){
var i=this.id;
i=i.replace("bullet","");
current=parseInt(i)-1;
resetSlide();
sliderImages[current].style.display = 'block';
});
}
Try this one , its very easy .
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>
I'm new to javascript/jquery, and I'm building an image slider. I can't seem to get the images to animate. I'm not sure what's wrong here.
What I've been trying to do is to get the active slide then slide the next sibling and animate it, but all I get in result is that the first image animate then it stops.
Here is the code: https://jsfiddle.net/6qntgg5z/
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=" > ">
<input type="button" name="next" id="prev" value=" < ">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
CSS
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
Javascript
$(document).ready(function(){
setInterval(animateSlider(), 5000);
});
//configuration
var currentSlide=activeSlide();
var slides=$("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000,
function () {
$current.removeClass('active');
$current.css({opacity: 1.0});
});
try this fiddle (does what you need but has other flaws i think). in your html you used the '<' and '>' characters as your button text, this breaks the flow of the html so you should instead use character codes:
< becomes < and
> becomes > www.w3schools.com/html/html_entities.asp
also your js was missing a closing } and the jsfiddle was missing aa jquery library call (I wish jsfiddle would make it faster to integrate libraries). hope it helps.
$(document).ready(function(){
setInterval(function(){ animateSlider() }, 5000);
});
//configuration
var currentSlide = activeSlide();
var slides = $("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
//remove active class from previous element and assign it to the current one then animate it using animate() function
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000, function () {
$current.removeClass('active');
$current.css({opacity: 1});
});
}
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 1em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>