Set interval not working after bullet navigation is clicked [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have created my own slider and now I am facing an issue with calling the auto sliding set interval function again after I used the bullet navigation. "setTimeout(autoSlide, 1000);" is not working. The code I have tried is given below. Please do get me a solution. Thank you.
<!doctype html>
<head>
<title> Custom Slider </title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
.slide
{
float: left;
width: 960px;
height: 300px;
background-color: #000;
}
.slide h1
{
color: #fff;
}
#container
{
width: 960px;
overflow: hidden;
margin: auto;
margin-top: 100px;
}
#wrapper
{
position: relative;
right: 0px;
}
#bullets li
{
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
<div style="clear: both;"> </div>
</div>
</div>
<ol id="bullets">
</ol>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideWidth = $('.slide').width();
var slideLength = $('.slide').length;
var totalWidth = slideWidth * slideLength;
$('#wrapper').css('width', totalWidth);
var currentPos = $('#wrapper').position().right;
var currentIndex = 0;
var autoSlide;
function auto(){
currentIndex += 1;
if(currentIndex > slideLength - 1)
{
currentIndex = 0;
}
$('#wrapper').animate({right: currentIndex * slideWidth});
}
var autoSlide = setInterval(auto, 1000);
$('.slide').each(function(){
$('#bullets').append('<li class="bullet"> </li>');
});
$('.bullet').click(function(){
clearInterval(autoSlide);
var bulletIndex = $(this).index();
if(bulletIndex > slideLength - 1)
{
bulletIndex = 0;
}
$('#wrapper').animate({right: bulletIndex * slideWidth});
currentIndex = bulletIndex;
setTimeout(autoSlide, 1000);
});
});
</script>
</body>

setTimeout(autoSlide, 1000);
is passing an old timer handle into setInterval, which won't work. Pass the function again:
autoSlide = setTimeout(auto, 1000);
Also note that setTimeout will set up a timer that only fires once, whereas your original setInterval will set up a repeating timer, so you may have wanted setInterval there.

Related

Section Scrolling with js

It is necessary to implement scrolling through the sections of the site. For example, when scrolling down, you need to scroll to the next section. And if we scroll up, then to the previous section.
<body>
<header></header>
<div class="top"></div>
<div class="mid"></div>
<div class="bottom"></div>
<footer></footer>
</body>
UPD: i resolved it by finding this https://codepen.io/mystroken/pen/bKoebp
no it is not neccessary to have scrolling only using section you could use divs as well to achieve the same. Here's an example for your understanding
html{
scroll-behavior: smooth;
}
.links{
position: fixed;
background: white;
}
div:not(.links){
width: 100vw;
height: 100vh;
}
#one{
background: black;
}
#two{
background: blue
}
#three{
background: pink;
}
#four{
background: green;
}
<div class="links">
one
two
three
four
</div>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
Here is a example how you can scroll by JavaScript.
If you do not want smooth scroll, you 0 instead of 300 on button on-click.
button{cursor: pointer}
div{
width: 100%;
height: 100vh;
}
#header{
background: black;
}
#content{
background: blue
}
#middle{
background: pink;
}
#footer{
background: green;
}
<div style="height:100px;position:fixed">
<button onclick="scrollToSmoothly('header', 300)">header</button>
<button onclick="scrollToSmoothly('content', 300)">content</button>
<button onclick="scrollToSmoothly('middle', 300)">middle</button>
<button onclick="scrollToSmoothly('footer', 300)">footer</button>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="middle">
</div>
<div id="footer">
</div>
function scrollToSmoothly(id, time) {
var pos = document.querySelector('#'+id).offsetTop;
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
Correct implementation of section scrolling(step scrolling)
<div class="cachu__container">
<!-- All sections are wrapped inside .cachu__sections -->
<div class="cachu__sections">
<section class="cachu__section">Some section</section>
<section class="cachu__section">Some section</section>
<section class="cachu__section">Some section</section>
</div>
<!-- End of section -->
<!-- Navigation will be dynamically added here (via JavaScript) -->
</div>
JS
// Now let's turn on our slider!
// 1. Set some options.
// 2. Instantiate the Slider with the DOM Element instance of the wrapper.
// 3. Run the slider !!
document.addEventListener('DOMContentLoaded', function() {
const options = {};
let slider = new Cachu(document.querySelector('.cachu__container'), options);
slider.run();
});
https://codepen.io/mystroken/pen/bKoebp

How to make auto slideshow of Divs stop when target link to one of the slide is clicked

I have a slideshow of divs that automatically cycles through but how do i make it so that when i click on a target link, it leads me there and stops the cycling of the slideshow. Moreover, after a few cycles, the slides start to clog up and aggregate on top of one another, can someone please help tp rectify this error thanks.
This is my current code:
parent div {
display: none;
position: absolute;
}
#parent div:first-child {
display: block;
}
#parent > div {
width: 400px;
height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
<script>
function Divs() {
var divs = $("#parent div"),
now = divs.filter(":visible"),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function () {
setInterval(Divs, 1400);
});
</script>
<div class="box" id="food">
<h2>hi</h2>
</div>
<div class="box" id="infrastructure">
<h2>bye</h2>
</div>
<div class="box" id="culture">
<h2>hi</h2>
</div>
<div class="box" id="nature">
<h2>bye</h2>
</div>
</div>
If you set your interval to a variable you can point an event-listener to the parent div and on click you can reset the timer.
here is a solutuion:
const interval= setInterval(divs, 1400)
const parentContainer = document.querySelector('#parent')
parentContainer.addEventListener('click', event => {
clearInterval(interval)
console.log(event.target.parentNode)
})
divs(interval)
function divs() {
var divs= $('#parent div'),
now = divs.filter(':visible'),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
#parent div {
display: none;
position: absolute;
}
#parent div:first-child {
display: block;
}
#parent > div {
width: 400px;
height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
<div class='box' id='food'>
<h2>food</h2>
</div>
<div class='box' id='infrastructure'>
<h2>infrastructure</h2>
</div>
<div class='box' id='culture'>
<h2>culture</h2>
</div>
<div class='box' id='nature'>
<h2>nature</h2>
</div>
</div>

How can I stop a slideshow? [duplicate]

This question already has answers here:
Pause button for Javascript slideshow
(3 answers)
Closed 4 years ago.
When I click on some of the buttons I want the slideshow to stop working and let me see the img for 10s or 15s and then it goes back to work. I tried the setTimeout function but I think I didn't use it right. I checked some solutions here on stackoverflow for some problems that seemed like mine but nothing helped me.
Here is an executable version of my code:
https://codepen.io/Amoocris/pen/MZXQYb?send-to-phone=5555555#0
Here is my code:
var slideIndex = 0;
showSlide();
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
var i;
slide = document.getElementsByClassName("mySlide");
dotz = document.getElementsByClassName("btn");
for (i = 0; i < slide.length; i++) {
slide[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slide.length) {
slideIndex = 1
}
for (i = 0; i < dotz.length; i++) {
dotz[i].className = dotz[i].className.replace("active", "");
}
slide[slideIndex - 1].style.display = "block";
slide[slideIndex - 1].className += "active";
setTimeout(showSlide, 3000);
}
* {
box-sizing: border-box;
}
.img {
width: 100%;
height: 666.656px;
}
.mySlide {
max-width: 1000px;
position: relative;
margin: auto;
}
.btns {
text-align: center;
}
.btn {
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #bbb;
margin: 0 2px;
}
.active,
.btn:hover {
background-color: pink;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="slider-container">
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/1639557/pexels-photo-1639557.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/1639565/pexels-photo-1639565.jpeg?cs=srgb&dl=burger-close-up-delicious-1639565.jpg&fm=jpg" alt="" class="img">
</div>
<div class="btns">
<span class="btn" onclick="currentSlide(1)"></span>
<span class="btn" onclick="currentSlide(2)"></span>
<span class="btn" onclick="currentSlide(3)"></span>
</div>
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
You can set up a variable to keep track of slideshow’s auto play. When a button is clicked, the auto play is cancelled until after a certain time period, say 5s.
Let’s set the variable to be timer and define it at the beginning of the slideshow section in the JS file:
var timer = null;
Then in the showSlide function, in addition to calling setTimeout function like you are currently doing, you can assign the the return value of the function to timer so that you can cancel it whenever you need to:
timer = setTimeout(showSlide, 3000);
Then in the button click function you’ll write, add the following code to temporarily cancel autoplay and set to resume it after 5 seconds:
clearTimeout(timer);
timer = setTimeout(showSlide, 5000);
Hope this helps.

Building a fluid mosaic grid

I'm trying to build a fluid mosaic grid. I used the fluid word since i already have a working mosaic grid.
You can check a fiddle i made on purpose for this question: https://jsfiddle.net/a995w8ye/
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Teste</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="divContainer">
<div id="1" class="cube">
</div>
<div id="2" class="cube">
</div>
<div id="3" class="cube">
</div>
<div id="4" class="cube">
</div>
<div id="5" class="cube">
</div>
<div id="6" class="cube">
</div>
<div id="7" class="cube">
</div>
<div id="8" class="cube">
</div>
<div id="9" class="cube">
</div>
</div> <!-- End of div container -->
</body>
</html>
CSS:
#divContainer {
width: 1000px;
height: 800px;
border: 1px solid black;
}
.cube {
position: relative;
float: left;
width: calc(1000px/3);
height: calc(800px/3);
cursor: pointer;
}
.cube.fullscreen{
z-index: 9;
width: 100%;
height: 100%;
position: relative;
background-color: #131313;
}
.cube:hover {
opacity: 0.75;
}
JS:
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function fillColors(){
for (var i = 1; i<=9; i++)
{
document.getElementById(i).style.background = getRandomColor();
}
}
window.onload=function(){
fillColors();
$('.cube').on('click', function() {
$(this).addClass('fullscreen');
$('.cube').each(function(){
if($(this).hasClass('fullscreen'))
{
return true;
}
$(this).hide();
})
})
}
The width and height if each cube are 1/3 of the main div. They are left float and they have a relative position. I need a relative position since the "divContainer" in the real case doesn't have a fixed size and in that case, since all cubes have exactly 1/3(width and height) of it they will make a perfect grid that can be 3x3 or even 1x9.
When a user click in a cube, that cube get's another class with a higher z-index and the width and heigh equal to his parent. The other cubes won't be visible in the end. They might or might not disappear. In the end I just want to see the expanded cube that i clicked.
This is simple. What i want to do is to make a cube expand slowly while the others vanish slowly as well or at least cover the others with a higher z-index. This is easy to achieve in the top left cube using .animate() but in the middle cube or the bottom right one i find difficult to do this.
P.S: ATM I'm not worried about everything come back to his original state. I just want to expand every div as mentioned.
Any suggestions?
Thanks in advance
UPDATE
I've fixed the code based on your comment
var container = $('#container'),
cubes = $('#container > div'),
count = 3, unit = 'vw',
fullstate = false;
function randomcolor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function fillcolor(){
$(this).css({background: randomcolor()});
}
function setup () {
var t = $(this),
i = t.index();
t.data({
top: Math.floor(i/count) * 100/count,
left: (i%count) * 100/count
});
}
function gridposition () {
var t = $(this);
t.css({
'z-index': 0,
top: t.data('top') + unit,
left: t.data('left') + unit,
width: 100/count + unit,
height: 100/count + unit
});
}
function fullcube () {
$(this).css({
'z-index': 9,
width: 100 + unit,
height: 100 + unit,
top: 0,
left: 0
});
}
cubes.each(function () {
setup.call(this);
fillcolor.call(this);
gridposition.call(this);
}).on('click', function () {
if (fullstate) {
cubes.each(gridposition);
} else {
fullcube.call(this);
}
fullstate = !fullstate;
});
html,
body,
#container,
#container > div.fullscreen {
width: 100%; height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
}
#container > div {
position: absolute;
transition: all 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
</div>
OLD ANSWER
This is how I would solve this problem:
var container = $('#container'),
cubes = $('#container > div');
function randomcolor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function fillcolor(){
$(this).css({background: randomcolor()});
}
cubes.each(fillcolor).on('click', function () {
var h = 'hidden';
cubes.toggleClass(h);
$(this).removeClass(h).toggleClass('fullscreen');
});
html,
body,
#container,
#container > div.fullscreen {
width: 100%; height: 100%;
}
body {
margin: 0;
}
#container > div {
float: left;
width: 32vw; height: 32vw;
transition: all 0.5s;
}
#container > div:hover {
opacity: 0.75;
}
#container > div.hidden {
width: 0; height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
</div>

Hero Carousel Auto Navigation

I have a carousel Item Implemented by some one in a Webcenter Portal. I have the HTML code, CSS file of it and the JS.
The issue I have now occurs when the carousel has 5 Images and is auto sliding. Wait for the carousel to get to the fifth item and watch it scroll back to the first one. When it scrolls back, it cycles through all the Images rather than directly going to first.
The expected behavior is that it has to scroll from the 5th slide directly to 1st slide. I have no much experience with this particular JS and I would like to know where exactly I need to check for this particular behaviour and where exactly to do the changes.
Your question is simple. After 5 th slide next slide should be 1 st with continuation. Now it goes to 1 st but with reverse order and then cont. normally.
In this code you will get your solution.
Please try this code. jsfiddle
jquery code
$('document').ready(function () {
var width = 750;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('.slider');
var $slideContainer = $slider.find('ul');
var $slides = $slideContainer.find('li');
setInterval(function () {
$slideContainer.animate({
'margin-left': '-=' + width + 'px'
}, animationSpeed, function () {
currentSlide++;
if (currentSlide >= $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
});
html
<body>
<div id="container">
<div id="header">
<h3>J-Slider</h3>
</div>
<div class="slider">
<ul>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
</ul>
</div>
</div>
</body>
css
body {
font-family:Gerogia;
font-size:15px;
}
#container {
width:930px;
margin:50px auto 10px auto;
border-left:#666 solid 3px;
border-right:#666 solid 3px;
background:#f5f5f5;
padding:20px 30px;
}
#header {
padding:10px 0;
border-bottom:#ccc solid 1px;
overflow:hidden;
text-align:center;
}
h3 {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.slider {
width: 750px;
height: 400px;
padding-top: 10px;
margin-left: 75px;
overflow: hidden;
}
.slider ul {
width:8000px;
list-style-type:none;
}
.slider li {
float: left;
}

Categories

Resources