FTScroller - not fixing scroll to the bottom - javascript

On my project I have a list of items with FTScroller plugin implemented. However when I scroll to the bottom of this list, the scroll don't fixes on that position.
How can I solve this? What I'm doing wrong?
HTML
<div class="container">
<div id="boxesScroll">
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">A</span>
</div>
<div class="box-count">
<span class="description">Item A</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">B</span>
</div>
<div class="box-count">
<span class="description">Item B</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">C</span>
</div>
<div class="box-count">
<span class="description">Item C</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">D</span>
</div>
<div class="box-count">
<span class="description">Item D</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">E</span>
</div>
<div class="box-count">
<span class="description">Item E</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">F</span>
</div>
<div class="box-count">
<span class="description">Item F</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">G</span>
</div>
<div class="box-count">
<span class="description">Item G</span>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
var scrollBehaviours = {
scrollingY: true,
scrollingX: false,
alwaysScroll: true,
scrollbars: true
};
var scrollerPartidos = new FTScroller(document.getElementById('boxesScroll'), scrollBehaviours);
});
CSS
.container
{
width: 195px;
display: inline-block;
vertical-align: top;
height: 200px;
position: relative;
overflow: hidden;
white-space: nowrap;
float: initial;
background: lightblue;
}
#boxesScroll
{
position: absolute;
overflow: hidden;
width: 100%;
}
.boxItem
{
float: initial;
border: 0px!important;
display: block;
padding: 15px;
background: white;
margin: 10px;
cursor: pointer;
}
.boxItem .box-icon {
float: left;
padding-top: 5px;
}
.boxItem .box-icon span.roundedDescIcon {
padding: 8px;
border-radius: 50%;
border: 1px solid #ced5de;
background: #f7f9fb;
}
.boxItem .box-count {
padding: 0px 10px;
width: calc(100% - 50px);
display: inline-block;
vertical-align: top;
}
.boxItem .box-count .description {
font-size: 17px;
line-height: 30px;
vertical-align: middle;
float: left;
width: 100%;
}
.ftscroller_scrollbary,
.ftscroller_scrollbarx {
-moz-opacity: .2;
-khtml-opacity: .2;
-webkit-opacity: .2;
opacity: .2;
-ms-filter: alpha(opacity=.2 * 100);
filter: alpha(opacity=.2 * 100);
}
JSFiddle example


You need the height in ftscroller element
#boxesScroll
{
width: 100%;
height: 200px;
position: absolute;
overflow: hidden;
}

Related

How to Limit Elements on a Screen?

I have 4 boxes, (which will later be 9), in which I want there to be a total of 3 on screen at all times, excluding mobile. The remainder who are not on screen will be moved to the right end of the box line, but be unseen. I have looked around for a method to accomplish this via HTML & CSS and have found none. Is there a way to do this with HTML, CSS, or JS?
.bioSlider {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.box {
position: relative;
display: inline-block;
width: 390px;
padding: 10px;
}
.slideImage {
position: relative;
height: 300px;
}
.slideImage img {
object-fit: cover;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
opacity: 0;
transition: 0.6s ease-in-out;
}
.quoteText {
position: absolute;
text-align: left;
font-style: italic;
word-break: break-all;
padding: 30px;
top: 30px;
color: #e5e5e5;
opacity: 0;
transition: 0.6s ease-in-out;
}
.detailBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 9px;
background-color: #e8e8e8;
}
.slideImage:hover .overlay {
opacity: 50%;
}
.slideImage:hover .quoteText {
opacity: 100%;
}
<div>
<!-- Cadet Slider -->
<ul class='bioSlider'>
<li class='cadetOne'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Red_Card.png' alt=''>
<div class='overlay'> </div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
</div>
</div>
</div>
</li>
<li class='cadetTwo'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Yellow_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
</div>
</div>
</div>
</li>
<li class='cadetThree'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Blue_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
</div>
</div>
</div>
</li>
<li class='cadetFour'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Green_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
</div>
</div>
</div>
</li>
</ul>
</div>

Incorporate a function for all the buttons with specific class using vanilla JS

I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
//jshint esversion: 6
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', {
day: 'numeric',
month: 'long',
year: 'numeric'
});
var numberOfbuttons = document.querySelectorAll(".r").length;
console.log(numberOfbuttons);
for (i = 0; i < numberOfbuttons; i++) {
document.querySelectorAll(".r")[i].onmouseover = function() {
mouseOver([i]);
};
document.querySelectorAll(".r")[i].onmouseout = function() {
mouseOut([i]);
};
}
function mouseOut(key) {
document.querySelectorAll(".r")[key].style.opacity = 0;
}
function mouseOver(key) {
document.querySelectorAll(".r")[key].style.opacity = 1;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bg4.jpg);
background-size: cover;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
span {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
h1 {
/* width: 580px; */
font-family: 'Sofia', cursive;
font-size: 3.4rem;
text-align: center;
margin: 10px auto;
padding-top: 15px;
padding-bottom: 15px;
}
h2 {
font-family: 'Sofia', cursive;
font-size: 2rem;
}
#btn1 {
opacity: 0;
}
#btn2 {
opacity: 0;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
}
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
#no2 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
#no3 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 8px;
}
#no4 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.container2 {
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container3 {
width: 1100px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container4 {
width: 1300px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
.white_bg {
background-color: white;
}
.container1_row4 {
display: flex;
justify-content: center;
margin-left: 240px;
position: relative;
right: 10px;
}
.container2_row4 {
display: flex;
justify-content: center;
margin-left: 35px;
margin-right: 150px;
position: relative;
right: 25px;
}
.container3_row4 {
display: flex;
justify-content: center;
margin-right: 240px;
}
.level1 {
height: 3px;
width: 110px;
border-style: hidden solid solid solid;
border-width: thick;
margin-left: 230px;
}
.oblique1 {
width: 88px;
transform: rotate(-30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique2 {
width: 88px;
transform: rotate(30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique_row {
display: flex;
margin-left: 200px;
margin-top: 17px;
}
.line_container2 {
display: flex;
}
.first_arrow_row2 {
position: relative;
right: 125px;
}
.second_arrow_row2 {
position: relative;
right: 150px;
}
.second_arrow_row2>.oblique_row>.oblique1 {
border-style: hidden;
}
.line_container3 {
display: flex;
}
.line2 {
width: 45px;
transform: rotate(90deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.first_arrow_row3 {
position: relative;
right: 165px;
}
.second_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.second_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.first_arrow_row3>.oblique_row {
position: relative;
right: 25px
}
.first_arrow_row3>.level1 {
position: relative;
left: 60px
}
.first_arrow_row3>.oblique_row>.oblique1 {
width: 155px;
transform: rotate(344deg);
}
.first_arrow_row3>.oblique_row>.oblique2 {
width: 155px;
transform: rotate(16deg);
}
#datetime {
text-align: center;
}
<link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
<div class="container1">
<h1>_ _ _ Family tree _ _ _</h1>
<div id="no1">
<div class="tree homer">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
<span>
Homer Simpson
</span>
</div>
<div class="tree marge">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
<span>
Marge Simpson
</span>
</div>
</div>
<div class="line_container1">
<div class="level1"></div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
<div class="container2">
<div id="no2">
<div class="tree">
<img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
<button id="btn3" class="refresh r"></button>
<span>
Bart Simpson
</span>
</div>
<div class="tree">
<img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
<button id="btn4" class="refresh r"></button>
<span>
Lisa Simpson
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
<button id="btn5" class="refresh r"></button>
<span>
Abraham Simpson
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
<button id="btn6" class="refresh r"></button>
<span>
Maggie Simpson
</span>
</div>
</div>
<div class="line_container2">
<div class="first_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
</div>
<div class="container3">
<div id="no3">
<div class="tree">
<img class="white_bg" src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
<button id="btn7" class="refresh r"></button>
<span>
Ned Flanders
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
<button id="btn8" class="refresh r"></button>
<span>
Elizabeth Hoover
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
<button id="btn9" class="refresh r"></button>
<span>
Seymour Skinner
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://www.personality-database.com/profile_images/20160.png">
<button id="btn10" class="refresh r"></button>
<span> Edna Krabappel
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
<button id="btn11" class="refresh r"></button>
<span>
Barney Gumble
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
<button id="btn12" class="refresh r"></button>
<span>
Selma Bouvier
</span>
</div>
</div>
<div class="line_container3">
<div class="first_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="line2"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
<div class="third_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
</div>
</div>
<div class="container4">
<div id="no4">
<div class="container1_row4">
<div class="tree">
<img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
<button id="btn13" class="refresh r"></button>
<span>
Kent Brockman
</span>
</div>
<div class="tree">
<img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
<button id="btn14" class="refresh r"></button>
<span>
Mayor Quimby
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
<button id="btn15" class="refresh r"></button>
<span>
Sideshow Bob
</span>
</div>
</div>
<div class="container2_row4">
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
<button id="btn16" class="refresh r"></button>
<span>
Clancy Wiggum
</span>
</div>
</div>
<div class="container3_row4">
<div class="tree">
<img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
<button id="btn17" class="refresh r"></button>
<span>
Nikki McKenna
</span>
</div>
<div class="tree">
<img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
<button id="btn18" class="refresh r"></button>
<span>
Milhouse Van Houten
</span>
</div>
</div>
</div>
</div>
<div class="datetime">
<h2 id="datetime"></h2>
</div>
<!-- script loaded here -->
I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')

your calling it by mouseOut([i]); instead of mouseOut(i); (no need to wrap it as an array)
and the i changes in the loop each time, so at the end you have i == 18. and when the event callback is called the i is still 18. you can do something like document.querySelectorAll(".r")[i].onmouseover = mouseOver.bind(null, i);
Probably if you convert the NodeList to a proper Array the code is cleaner and less prone to errors. something like:
Array.from(document.querySelectorAll(".r"))
.forEach(el => {
// I'd rather user el.addEventListener("mouseover",...
el.onmouseover = () => el.style.opacity = 0;
el.onmouseout = () => el.style.opacity = 1;
});

How to calculate the element scroll height and scroll when move mouse in another element

i'm trying to create a select list and custom scrollbar what i did at the first is when the user scrolling the element the custom scrollbar move to the scolled position normally without any problem you can find it at this fiddle
now i want to hide the browser scrollbar and apply scolling inside the select menu from this custom scroll bar i tried the following
let scrollbarConatiner = document.getElementsByClassName('scrollbar-conatiner')[0],
menuItemsContainer = document.getElementsByClassName("menu-items-container")[0]
scrollbarConatiner.addEventListener("mousemove", function(e) {
let scrollbar = this.getElementsByClassName("scrollBar")[0]
let y = e.offsetY
console.log(menuItemsContainer.scrollHeight, menuItemsContainer.clientHieght, e.offsetY)
menuItemsContainer.scrollTop = y;
})
but it's scrolling just for the clientHieght when i want it to scroll and move the scrollbar to the menuItemsContainer scrollHeight i don't know the right way to apply this custom scrolling can anyone help me to make it work
here's the whole code
HTML
<div id="select">choose...</div>
<div id="select-menu">
<!-- Scrollbar -->
<div class="scrollbar-conatiner">
<div class="scrollbar"></div>
</div>
<!-- menu items -->
<div class="menu-items-container">
<div class="menu-items">
<span>Facebook</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>YouTube</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Twitter</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Pinterest</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Instagram</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Raddit</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Facebook</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>YouTube</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Twitter</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Pinterest</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Instagram</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Raddit</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Facebook</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>YouTube</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Twitter</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Pinterest</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Instagram</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
<div class="menu-items">
<span>Raddit</span>
<span class="circle">
<span class="circlein"></span>
</span>
</div>
</div>
</div>
CSS
body {
font-family: sans-serif;
}
#select {
background: #1c1d22;
color: #999;
width: 80%;
padding: 20px 20px 20px 20px;
margin: auto;
font-size: 14px;
position: relative;
}
#select:before {
content: "";
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 10px solid #818181;
position: absolute;
right: 20px;
top: 42%;
}
#select-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6)
}
.menu-items-container {
background: dodgerblue;
width: 90%;
overflow: hidden;
max-height: 360px;
}
.menu-items {
text-decoration: none;
color: #fff;
display: block;
padding: 20px 90px 20px 20px;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.menu-items:hover {
background: #333
}
.menu-items:hover .circle {
box-shadow: 0 0 3px 4px rgba(233, 244, 255, 0.3);
top: 30%
}
.circle {
border-radius: 50%;
height: 20px;
width: 20px;
border: 1px solid #fff;
position: absolute;
top: 33%;
right: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.circlein {
border-radius: 50%;
height: 65%;
width: 65%;
background: skyblue;
display: none;
}
.scrollbar-conatiner {
position: absolute;
width: 12px;
border-radius: 35px;
background: rgba(30, 30, 30, 0.3);
right: 5%;
overflow: hidden;
z-index: 1;
}
.scrollbar {
height: 30%;
width: 100%;
border-radius: 35px;
background: #333;
position: absolute;
cursor: pointer;
z-index: 2;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
JS
let select = document.getElementById('select'),
selectMenu = document.getElementById("select-menu"),
menuItemsContainer = document.getElementsByClassName("menu-items-container")[0],
menuItems = document.getElementsByClassName("menu-items"),
scrollbarConatiner = document.getElementsByClassName('scrollbar-conatiner')[0]
//show scrollbar only when elements more than 6
if (menuItems.length > 6) {
scrollbarConatiner.style.display = 'block'
} else {
scrollbarConatiner.style.display = 'none'
}
select.addEventListener('click', function() {
//select menu
selectMenu.style.display = 'flex'
//scrollbar
scrollbarConatiner.style.height = menuItemsContainer.offsetHeight + "px";
//select-menu items
menuItemsContainer.style.opacity = 1;
menuItemsContainer.style.transition = '0.5s';
});
$(".menu-items").click(function() {
//select-menu
selectMenu.style.display = 'none'
//set text of choosed element
select.innerText = this.innerText.trim()
//add circle for choosed
$(".circlein").hide();
$(this).find(".circlein").show(10)
});
$("#select-menu").click(function(e) {
if (e.target.id === $(this).attr("id")) {
$(this).fadeOut(40);
}
});
menuItemsContainer.addEventListener('scroll', function() {
var y = menuItemsContainer.scrollTop;
var z = menuItemsContainer.scrollHeight - menuItemsContainer.clientHeight;
var q = (y / z) * 70
$(".scrollbar").css({
top: q + "%"
})
});
scrollbarConatiner.addEventListener("mousemove", function(e) {
let scrollbar = this.getElementsByClassName("scrollBar")[0]
let y = e.offsetY
console.log(menuItemsContainer.scrollHeight, e.offsetY, menuItemsContainer.clientHeight)
menuItemsContainer.scrollTop = y;
})

Custom tree style in HTML/JS/CSS

I'm trying to create this structure in HTML/CSS and Javascript but I'm having trouble with the lines.
Here's the HTML code:
<div class="okr-container">
<div class="column">
<div class="objective active">
<div class="objective-header">
<span class="objective-title">Building a Foundation</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
<div class="circle"></div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">Doing something</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
</div>
</div>
<div class="column">
<div class="objective">
<div class="objective-header">
<span class="objective-title">REEEEEEEEEE</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
</div>
<div class="objective active">
<div class="objective-header">
<span class="objective-title">Help me please</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
<div class="circle"></div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">REEEEEEEEEE</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">Help me please</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
</div>
</div>
</div>
And here's the CSS:
body {
background-color: #F0F4F5
}
.okr-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.column {
width: 328px;
}
.objective {
width: 280px;
height: 100px;
padding: 10px;
background-color: white;
border: 0.5px solid #BFC5D0;
box-sizing: border-box;
border-radius: 4px;
position: relative;
margin: 16px;
}
.circle {
background: #FFF;
border: 4px solid #09D2C7;
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
right: -13px;
top: 35px;
}
.active {
border: 2px solid #09D2C7;
border-radius: 4px;
border-left: 8px solid #09D2C7;
}
.objective-title {
font-family: SF Pro Text;
font-size: 16px;
font-weight: bold;
}
.objective-options {
float: right;
font-weight: bold;
font-size: 20px;
}
.objective-details {
position: absolute;
bottom: 4px;
width: 90%;
}
.objectives-count {
font-family: SF Pro Text;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.02em;
}
.objective-progress {
font-family: SF Pro Display;
font-size: 30px;
line-height: 36px;
/* identical to box height */
float: right;
letter-spacing: 0.02em;
}
Here's what I have made so far on Codepen. I was thinking of using SVG lines but I don't know much about them to proceed in a way where lines would link the right boxes together.
Any help would be greatly appreciated! :)
Thank you!
EDIT: This is not going to be a drag-and-drop thing. Just that when a user clicks a box, it just shows the child DIVs.

Tricky div overlapping

I am trying to use z-index to overlap in this scenario, but I cannot achieve the results I am looking for.
Here is my code: https://jsfiddle.net/mx0zdpvm/.
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -100px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>
This is the result I am trying to achieve:
A CSS solution is preferred.

First change:
#redStripes{
position: relative;
top:60px;
right:280px;
z-index: 2;
}
If you want to overlap elements, divs, you need to specify position absolute or relative to something, otherwise the z-index will not work.
https://jsfiddle.net/scorpio777/mx0zdpvm/3/
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: relative;
top:50px;
right:280px;
z-index: 2;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -150px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>

You cannot overlap elements if you don't set the position to absolute or relative.

This will sort the overlapping out. I set the position to relative and a z-index of 1 to the blue triangle, and 2 to the red strips, then adjusted the positioning with top and right. I will leave you to sort out the rest :)
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: relative;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
right: 0px;
top:-100px;
z-index:1;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
z-index:2;
left: -100px;
}

Categories