Scroll buttons for one div at a time

Scroll buttons for one div at a time - javascript

I have many events on my page, and I have one div with some images inside (scrollbar is active), and I have one function that works with arrows (scrollbar is hidden).
What I want is: I need the slide buttons to work for every event, and to move just the event you are checking out.
I have tried some methods but I cannot get it to work
var next = document.getElementById('slide');
next.onclick = function() {
var container = document.getElementById('scrollFunction');
sideScroll(container, 'right', 25, 100, 10);
};
var back = document.getElementById('slideBack');
back.onclick = function() {
var container = document.getElementById('scrollFunction');
sideScroll(container, 'left', 25, 100, 10);
};
function sideScroll(element, direction, speed, distance, step) {
scrollAmount = 0;
var slideTimer = setInterval(function() {
if (direction == 'left') {
element.scrollLeft -= step;
} else {
element.scrollLeft += step;
}
scrollAmount += step;
if (scrollAmount >= distance) {
window.clearInterval(slideTimer);
}
}, speed);
}
.scoll-pane {
width: 100%;
height: auto;
overflow: auto;
outline: none;
overflow-y: hidden;
padding-bottom: 15px;
-ms-overflow-style: scroll;
scrollbar-width: none;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
.scoll-pane::-webkit-scrollbar {
display: none;
}
#slideBack {
cursor: pointer;
position: absolute;
top: 105px;
left: -15px;
}
#slide {
cursor: pointer;
position: absolute;
top: 100px;
right: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This HTML code will be repeated for every event -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<div class="col-12">
<div class="scoll-pane mt-4" id="scrollFunction">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
<i id="slideBack" class="fas fa-arrow-left"></i>
<i id="slide" class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<div class="col-12">
<div class="scoll-pane mt-4" id="scrollFunction">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
<i id="slideBack" class="fas fa-arrow-left"></i>
<i id="slide" class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

The problem is because you're duplicating id attributes when they must be unique. To fix this you need to use common classes on the repeated DOM structures. Then in your JS you need to traverse this DOM structure to find the scrollable elements related to the clicked next/previous icons.
Note the loops over the .slide and .slideBack elements in order to add the event listeners to all of them individually. Also note the use of parentElement.querySelector() to find the related .scroll-pane.
document.querySelectorAll('.slide').forEach(function(next) {
next.addEventListener('click', function() {
var container = this.parentElement.querySelector('.scoll-pane');
sideScroll(container, 'right', 25, 100, 10);
});
});
document.querySelectorAll('.slideBack').forEach(function(back) {
back.addEventListener('click', function() {
var container = this.parentElement.querySelector('.scoll-pane');
sideScroll(container, 'left', 25, 100, 10);
});
});
function sideScroll(element, direction, speed, distance, step) {
scrollAmount = 0;
var slideTimer = setInterval(function() {
if (direction == 'left') {
element.scrollLeft -= step;
} else {
element.scrollLeft += step;
}
scrollAmount += step;
if (scrollAmount >= distance) {
window.clearInterval(slideTimer);
}
}, speed);
}
.scoll-pane {
width: 100%;
height: auto;
overflow: auto;
outline: none;
overflow-y: hidden;
padding-bottom: 15px;
-ms-overflow-style: scroll;
scrollbar-width: none;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
.scoll-pane::-webkit-scrollbar {
display: none;
}
.slideBack {
cursor: pointer;
position: absolute;
top: 105px;
left: -15px;
}
.slide {
cursor: pointer;
position: absolute;
top: 100px;
right: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This HTML code will be repeated for every event -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<div class="col-12">
<div class="scoll-pane mt-4">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
<i class="slideBack fas fa-arrow-left"></i>
<i class="slide fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="event-date mt-4">
<h4>October 1 (Monday)</h4>
<hr>
</div>
</div>
<div class="col-12">
<div class="scoll-pane mt-4">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
<i class="slideBack fas fa-arrow-left"></i>
<i class="slide fas fa-arrow-right"></i>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Try this to increase in the moving position as below.
next.onclick = function() {
var container = document.getElementById('scrollFunction');
sideScroll(container, 'right', 25, 300, 10);
};
var back = document.getElementById('slideBack');
back.onclick = function() {
var container = document.getElementById('scrollFunction');
sideScroll(container, 'left', 25, 300, 10);
};

Related

Carousel Item exceeding height..or height not adjusting to carousel item

https://topqna.herokuapp.com/
The text is missing in each carousel item, each time i have to manually adjust the carousel height and add < br> to get it to work but every day's text length might be different. Is there an automatic way so that the the entire text is visible while also the gap between navbar and item is fixed. Here's the html (albeit as a django template)
{% load staticfiles %}
{% load static %}
{% load index %}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="{% static 'style.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav>
<div class="container nav-wrapper">
<div class="flex-container">
<h class="brand-logo center"><b>Today's Q/A</b></h>
<ul id="nav-mobile" class="Center">
<li></li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
autoplay()
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
{#<section class="black">#}
<style>
html,
body{
background-color: #FEDCC8;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
</style>
<div class="flex-container">
<div class="container-fluid">
<a class="btn waves-effect waves-light" href="/kiddinglol">Cute Cat Pic <3
<i class="large material-icons left">sentiment_neutral</i>
<i class="large material-icons right">sentiment_very_satisfied</i>
</a>
</div>
<div class="container-fluid">
<a class="btn waves-effect waves-light" href="/iamonceagainsaying_your_net_sucks_sry"> C O Z Y
<i class="large material-icons left">favorite</i>
<i class="large material-icons right">favorite</i>
</a>
</div>
<div class="container-fluid">
<a class="btn waves-effect waves-light" href="/iamonceagainsaying_your_net_sucks_sryy"> Trippy Earth
<i class="large material-icons left">camera</i>
<i class="large material-icons right">flight_takeoff</i>
</a>
</div>
</div>
{#</section>#}
<style>
.carousel
{
**height: 1500px** !important;
}
.carousel-item
{
display: flex;
{#margin-top: -5%;#}
width: 1050 !important;
**height: auto**! important;
align-items: flex-start ! important;
justify-content: space-evenly! important;
}
</style>
<br>
<br>
<div class="container carousel">
{%for a, b in x|zip:z %}
<div class="carousel-item black lighten-2 white-text" href="#">
<div class="container">
<br>
<h3 class="align-center">{{a}}</h3>
{% for i in b %}
<p>{{ i }}</p>
{% endfor %}
<div class ="container">
<a href="/wubbalubba">
<h3 class=""> dank meme 4 u </h3>
<br>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<style>
a[href="/iamonceagainsaying_your_net_sucks_sry"] {
margin: auto;
padding: 0 50px;
display: inline-block;
position: relative;
text-decoration: black;
color: navajowhite;
width: auto;
overflow: hidden;
z-index: 2;
transition: all .5s ease;
}
a[href="/iamonceagainsaying_your_net_sucks_sry"] h1 {
z-index:2;
position:relative;
}
a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover {
color: white;
}
a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover:before {
right: 30%;
opacity: 1;
}
a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover:after {
left: 0%;
opacity: 1;
}
a[href="/iamonceagainsaying_your_net_sucks_sry"]:before {
opacity: 0;
content: '';
display: block;
position: absolute;
background: white;
width: 100%;
height: 100%;
top: 0;
right: 100%;
transition:all .6s ease;
}
a[href="/iamonceagainsaying_your_net_sucks_sry"]:after {
opacity: 70;
content: "click bitch";
display: block;
position: absolute;
background: white ;
width: 100%;
height: 100%;
top: 0;
left: 100%;
transition:all .5s ease;
}
</style>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {
indicators: true,
padding: 200,
});
});
</script>
{# </form>#}
{% block content %}
{% endblock content %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

There is no way to have the carousel item assume the height of its contents while using position: absolute. This post has a couple alternatives you can use:
Position: absolute and parent height?
thank you for dank mem

Hide scrollbar and add arrows instead

I have a "div" with some images and there is a scrollbar at the bottom.
What I would like to do is adding arrows to scroll and make the scrollbar invisible
So far I have tried some of my methods but it did not work.
.scoll-pane {
width: 100%;
height: auto;
overflow: auto;
outline: none;
overflow-y: hidden;
padding-bottom: 15px;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
<div class="container">
<div class="row">
<div class="col-12">
<div class="scoll-pane mt-4">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

You can hide the scroll bar with webkit-scrollbar and scrollbar-width CSS. Additionally, you can use some simple javascript selectors to "slide" a div when buttons are pressed, as demonstrated in the example below:
var button = document.getElementById('slide');
button.onclick = function () {
var container = document.getElementById('container');
sideScroll(container,'right',25,100,10);
};
var back = document.getElementById('slideBack');
back.onclick = function () {
var container = document.getElementById('container');
sideScroll(container,'left',25,100,10);
};
function sideScroll(element,direction,speed,distance,step){
scrollAmount = 0;
var slideTimer = setInterval(function(){
if(direction == 'left'){
element.scrollLeft -= step;
} else {
element.scrollLeft += step;
}
scrollAmount += step;
if(scrollAmount >= distance){
window.clearInterval(slideTimer);
}
}, speed);
}
.scoll-pane {
width: 100%;
height: auto;
overflow: auto;
outline: none;
overflow-y: hidden;
padding-bottom: 15px;
-ms-overflow-style: scroll; // IE 10+
scrollbar-width: none; // Firefox
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
.scoll-pane::-webkit-scrollbar {
display: none; // Safari and Chrome
}
<div class="container">
<div class="row">
<div class="col-12">
<div class="scoll-pane mt-4" id="container">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
</div>
</div>
</div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Maybe what you are looking for is a Carousel?
<style>
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://robohash.org/test" alt="...">
<img src="https://robohash.org/test" alt="...">
</div>
<div class="carousel-item">
<img src="https://robohash.org/test" alt="...">
</div>
<div class="carousel-item">
<img src="https://robohash.org/test" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I am using something like this, it is very simple code.
/* SIDE SCROLL PARTIAL*/
var frameWidth = $('.products__wrapper').width(), // width of div showed on display
scrollElmtWidth = $('.products__wrapper')[0].scrollWidth, // width of div also with hidden part
scrollAmount = 0,
distance = 0,
maxDistance = scrollElmtWidth - frameWidth; // width of hidden part - width which must be uncovered bz scrolling
scrollStep = maxDistance/4; // divide all resolution to 4 steps
$('.right-arrow-partial').click(function () {
event.preventDefault();
distance = $('.products__wrapper').scrollLeft();
if (distance < maxDistance) {
//if scrolled distance is less then max distance + 1/4 px each time -> after max distance have not to count + 1/4 px
scrollAmount += scrollStep;
$('.products__wrapper').animate({scrollLeft: scrollAmount}, 500);
}
})
$('.left-arrow-partial').click(function () {
event.preventDefault();
distance = $('.products__wrapper').scrollLeft();
//if (scrollAmount > maxDistance) {scrollAmount = maxDistance}
if (scrollAmount > 0) {
// if it is start of scroll area -> cannot discount - 1/4 px
scrollAmount -= scrollStep;
$('.products__wrapper').animate({scrollLeft: scrollAmount}, 500);
}
})

Javascript horizontal image slider

I'm trying to implement a simple image slider with arrows underneath, left and right.
When the slider reaches to the end(left or right), I would like the arrow to disappear at that side. Right now I can't get to the end of the list at the left side. Also I don't know how to center the list so that each item that gets viewed is centered on the screen.
Here is a gif that illustrates these problems:
https://i.gyazo.com/b3b3df55c6953c6b3e539dd347d951da.mp4
Here is the markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Image Slider</title>
</head>
<body>
<div class="headline">
<h1>
Experience The
<br>
<span>Diamond Revolution</span>
</h1>
<h3>
Spin actual diamonds in 360° HD and zoom in up to 40x. One of the world's biggest collections of loose diamonds, at your
fingertips.
</h3>
</div>
<div class="slider">
<ul class="slider-wrap">
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/round-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ROUND
</h3>
<h4 class="sub-title">
Maximizes light return from the top of the stone
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/cushion-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
CUSHION
</h3>
<h4 class="sub-title">
Antique cut with 58 facets and rounded corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/marquise-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
MARQUISE
</h3>
<h4 class="sub-title">
Long, narrow surface makes it appear larger than life
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/heart-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
HEART
</h3>
<h4 class="sub-title">
Features a distinctive cleft at the top and superior brilliance
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/pear-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PEAR
</h3>
<h4 class="sub-title">
Tradition meets brilliance in unique ‘water drop’ shape
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/radiant-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
RADIANT
</h3>
<h4 class="sub-title">
Brilliance combined with non-traditional cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/oval-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
OVAL
</h3>
<h4 class="sub-title">
Elongated shape accentuates the length of the finger
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/asscher-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ASSCHER
</h3>
<h4 class="sub-title">
Vintage-style square shape with cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/emerald-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
EMERALD
</h3>
<h4 class="sub-title">
Long lines create an elegant and sophisticated look
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/princess-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PRINCESS
</h3>
<h4 class="sub-title">
Maximum brilliance in an exquisite square form
</h4>
</div>
</li>
</ul>
</div>
<div class="controls">
<div class="title">
<h3>
PRINCESS
</h3>
<h4>
Maximum brilliance in an exquisite square form
</h4>
</div>
<a href="#" id="prev" class="fa fa-long-arrow-right">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
<a href="#" id="next" class="fa fa-long-arrow-left">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
</div>
<script src="js/index.js"></script>
</body>
</html>
Index.js:
var imageSlider = function () {
var slider = document.querySelector(".slider");
var items = document.querySelectorAll(".slider-item");
var itemWidth = items[0].offsetWidth;
var sliderList = document.querySelector(".slider-wrap");
var count = items.length / 2;
// Control Buttons
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var isNextHidden = false;
var isPrevHidden = false;
// Diamond Display
var mainTitle = document.querySelector(".controls .title h3");
var subTitle = document.querySelector(".controls .title h4");
window.addEventListener("resize", function () {
itemWidth = items[0].offsetWidth;
});
centerItem(count);
sliderList.style.left = "-" + count * itemWidth + "px";
var nextSlide = function () {
uncenterItem(count);
if (count >= 2) {
count--;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count === 1) {
next.style.display = "none";
isNextHidden = true;
}
centerItem(count);
}
var prevSlide = function () {
uncenterItem(count);
if (count < items.length) {
if (isNextHidden) {
next.style.display = "block";
}
count++;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count == items.length - 1) {
prev.style.display = "none";
isPrevHidden = true;
}
centerItem(count);
}
function uncenterItem(count) {
var centeredItem = items[count];
centeredItem.classList.remove("centered");
}
function centerItem(count) {
console.log(count);
var centeredItem = items[count];
centeredItem.classList.add("centered");
var title = centeredItem.getElementsByClassName("title");
var itemTitle = title[0].children[0].innerText.trim();
var itemSubtitle = title[0].children[1].innerText.trim();
// Assigning values to the fields
mainTitle.innerHTML = itemTitle;
subTitle.innerHTML = itemSubtitle;
}
next.addEventListener("click", nextSlide);
prev.addEventListener("click", prevSlide);
};
window.onload = function () {
imageSlider();
};
SASS file:
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
.headline {
text-align: center;
h1 {
font-size: 50px;
font-weight: normal;
margin-bottom: 0;
span {
font-weight: 700;
}
}
h3 {
font-size: 18px;
}
}
.slider {
position: relative;
width: 100%;
height: 300px;
padding-bottom: 50px;
overflow: hidden;
.slider-wrap {
display: flex;
justify-content: space-around;
position: relative;
list-style: none;
height: 100%;
min-width: 200%;
padding: 0;
margin: 80px 0;
transition: all 750ms ease;
left: 0;
.slider-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin: 0 20px;
height: 100%;
width: 250px;
float: left;
transition: all 750ms ease;
.title {
display: none;
}
img {
margin: 0 auto;
width: 250px;
}
}
.centered {
transform: scale(1.5);
}
}
}
.controls {
.title {
display: block;
position: absolute;
bottom: 30px;
left: 50%;
text-align: center;
margin: 20px;
color: black;
transform: translateX(-55%);
h3 {
font-size: 20px;
font-weight: 700;
}
h4 {
font-size: 15px;
font-weight: normal;
}
}
#prev,
#next {
position: absolute;
bottom: 0;
width: 100px;
line-height: 50px;
margin-top: 50px;
margin-bottom: 50px;
border-radius: 50%;
font-size: 70px;
text-align: center;
color: black;
text-decoration: none;
transform: translateY(-50%);
transition: all 150ms ease;
}
#prev {
right: 10px;
margin-right: 20vw;
}
#next {
left: 10px;
margin-left: 20vw;
img {
transform: rotate(180deg);
}
}
}

The condition in line number 42 else if (count == items.length - 1) should be replaced with else if (count == items.length).
Also need to take care of the undefined errors, by checking for the existence of objects using if condition. See the pen and refer line number 50 and 58.
Hope this helps.

Display popup on click of a box

I have a website here. When you click on the team tab, it will take you to the team section.
I am trying to create a popup here.The same pop up should work on clicking any of the points boxes:
points box
Now I am getting the popup below the points box (see in the website)
Code involved (only related to team section to keep the problem relevant):
$(document).ready(function() {
$('.counter col_fourth a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var block = _this.attr('href');
$(".counter col_fourth").removeClass("active");
_this.parent().addClass("active");
$(".counter col_fourth").hide();
$(block).fadeIn();
});
/**
* Fade in the Popup
*/
$('.counter col_fourth').on('click', function() {
$('#popup').fadeIn();
});
});
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half {
width: 49%;
}
.col_third {
width: 32%;
}
.col_fourth {
width: 23.5%;
}
.col_fifth {
width: 18.4%;
}
.col_sixth {
width: 15%;
}
.col_three_fourth {
width: 74.5%;
}
.col_twothird {
width: 66%;
}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
position: relative;
display: inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end {
margin-right: 0 !important;
}
/* Column Grids End */
.wrapper {
width: 980px;
margin: 30px auto;
position: relative;
}
.counter {
background-color: #808080;
padding: 10px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
}
.counter.col_fourth {
background-color: #fff;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main-section team" id="team">
<div class="container">
<h2>team</h2>
<h6>Take a closer look into our amazing team. We won’t bite.</h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic1.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
<p1>click to know</p1>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic2.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic3.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__inner">
<header class="popup__header">
<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
</header>
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" />
<section class="profile__details">
<ul class="profile__stats">
<li>
<h3 class="profile_stat__heading">Gold</h3>
<div class="profile_stat__number">17</div>
</li>
<li>
<h3 class="profile_stat__heading">Silver</h3>
<div class="profile_stat__number">8</div>
</li>
<li>
<h3 class="profile_stat__heading">Bronze</h3>
<div class="profile_stat__number">21</div>
</li>
</ul>
<h2 class="profile__name" id="popup-name"></h2>
<h2 class="profile__name">Designation: </h2>
<h2 class="profile__name">Reporting Manager: </h2>
<h2 class="profile__name">Email: </h2>
<h2 class="profile__name">Date of Join: </h2>
<h2 class="profile__name" id="popup-score"></h2>
<h2 class="profile__name">Latest Week Points: </h2>
<h2 class="profile__name">Overall Points: </h2>
<h2 class="profile__name">Medals Rewarded:</h2>
<ul class="social">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-bitbucket"></i></li>
<li class="location">
<i class="fa fa-map-marker"></i>
<span>Bangalore, IN</span>
</li>
</ul>
</section>
</div>
</div>
</div>
</section>
I think I am making some mistake with the JavaScript.
I just want to display the same popup on clicking the points boxes as in pic above.

My Javascript code doesn't work properly

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer() {
audio = new Audio();
audio.src = "nineDays.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
// Add Event Handling
playbtn.addEventListener("click", playPause);
mutebtn.addEventListener("click", mute);
// Functions
function playPause() {
if (audio.paused) {
audio.play();
playbtn.style.background = "url(video_pause.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(play.png) no-repeat";
}
}
function mute() {
if (audio.muted) {
audio.muted = false;
mutebtn.style.background = "url(speaker.png) no-repeat";
} else {
audio.muted = true;
mutebtn.style.background = "url(mute.png) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
body {
background: #282828;
color: white;
font-family: sans-serif;
}
.nav {
display: flex;
justify-content: flex-end;
position: absolute;
width: 100%;
top: 0;
left: 0;
list-style-type: none;
}
li a {
color: white;
text-decoration: none;
padding: 0 10px;
}
h1 {
font-size: 13px;
margin-bottom: 80%;
margin-right: 50%;
font-family: 'Montserrat';
}
.container {
padding-top: 8%;
}
button {
border: none;
cursor: pointer;
outline: none;
}
button#playpausebtn {
background: url(video_pause.png) center center no-repeat;
background-size: cover;
margin-left: 20px;
marging-top: 35px;
width: 20px;
height: 15px;
}
button#mutebtn {
background: url(speaker.png) center center no-repeat;
background-size: cover;
margin-top: 35px;
width: 25px;
height: 20px;
}
.soundNav {
position: absolute;
width: 20%;
height: 30px;
z-index: 99999;
}
<body>
<div class="soundNav">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
</div>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation">About me
</li>
<li role="presentation" class="active">Work
</li>
<li role="presentation">Get In Touch
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!--Indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> © Ed Sheeran Concert at Blossom Center</br>
August 2015
</h1>
</div>
</div>
<div class="item">
<img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item">
<img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item ">
<img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </h1>
</div>
</div>
<!--controls or next and prev buttons-->
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to understand what the problem is- whenever someone opens the page, the music starts. I want the user to be able to pause or mute the music whenever they want to. And that works fine, except my icons won't show, it's as they are hidden. Everything is in the same folder. I was thinking to use glyphicons, but I don't know how to use them inside of the javascript.

the javascript style syntax is littlebit different. use
mutebtn.style.backgroundImage = "url('mute.png') no-repeat";
and make sure ./mute.png exists and is readable

Develop Reference

JavaScript is the programming language of the Web.

Scroll buttons for one div at a time - javascript

Related

Carousel Item exceeding height..or height not adjusting to carousel item

Hide scrollbar and add arrows instead

Javascript horizontal image slider

Display popup on click of a box

My Javascript code doesn't work properly

Categories

Resources