Hi how can i active my scroll indicator to stay orange whenever i press?
Current result : When i press it still remain gray
Expected result: When i press the specify dot stay orange
I try to use ::after,::before % visited and it still not working
Does anyone know how can i solve this?
Expected result:
Whenever i click on the dot it still active with orange color and scroll to the section
<style>
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step:active {
background-color: #FF761F;
}
<div class="scroll" >
</div>
<section id="1" class="section">
Hello
</section>
<section id="2" class="section">
Good Morning
</section>
<section id="3" class="section">
Good Night
</section>
`your text`
$(function(){
$(".scroll a").on('click',function(){
$("step").addClass('active');
$("html,body").animate({
scrollTop: $($.attr(this,'href')).offset().top
},300);
});
});
that thread is for browsing. With three javascript functions, we have made it so that when the first, second, and third buttons are clicked, they will be orange. another piece of code already deals with scrolling. below we have a comment, when we remove that comment and scroll, we will see that certain numbers appear in the console, we enter those numbers as if value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.scroll{
position: fixed;
background-color: rgb(183, 255, 251);
}
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.active {
height: 15px;
width: 15px;
margin: 0 2px;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
background-color: #FF761F;
}
</style>
<div class="scroll">
</div>
<section id="1" class="section">
<br><br>
Hello
</section>
<section id="2" class="section">
<br><br>
Good Morning
</section>
<section id="3" class="section">
<br><br>
Good Night
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<script>
function fun1() {
document.getElementById("a1").className = "active";
document.getElementById("a2").className = "step";
document.getElementById("a3").className = "step";
}
function fun2() {
document.getElementById("a2").className = "active";
document.getElementById("a1").className = "step";
document.getElementById("a3").className = "step";
}
function fun3() {
document.getElementById("a3").className = "active";
document.getElementById("a1").className = "step";
document.getElementById("a2").className = "step";
}
window.addEventListener('scroll', () => {
const scrolled=window.scrollY;
if ( scrolled >1){
document.getElementById("a1").className="active";
document.getElementById("a2").className="step";
document.getElementById("a3").className="step";
}
if ( scrolled >45){
document.getElementById("a2").className="active";
document.getElementById("a1").className="step";
document.getElementById("a3").className="step";
}
if ( scrolled >105){
document.getElementById("a3").className="active";
document.getElementById("a1").className="step";
document.getElementById("a2").className="step";
}
//console.log(scrolled)
});
</script>
</body>
</html>
Related
I have a fullpage.js imported into my code and a progress bar indicator (div class="progress-section"). My question is, how do I change the progress bar indicator depending on the background color of a section? (E.g. progress indicator in black when section background color is white, and indicator in white when section bg is black.) I appreciate you all so much :)
I have added the code below:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Aaron</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>
<body>
<!-- Navigation -->
<!-- <header>
<h4 class="logo">LIGHT</h4>
</a>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li> CONTACT</li>
</ul>
</nav>
</header> -->
<div class="progress-section">
<div class="progress-bar-wrap" data-bg="fuchsia">
<div class="progress-bar" ></div>
</div>
<div class="progress-num"></div>
</div>
<div>
<div id="fullpage">
<div class="section one">
Section ONE
</div>
<div class="section two">
Section TWO
</div>
<div class="section three">
Section THREE
</div>
<div class="section four">
Section FOUR
</div>
</div>
</div>
<!-- Main Container Ends -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="scripts.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color:#111111;
color: white;
}
body::-webkit-scrollbar {
display: none;
}
.progress-section {
position: fixed;
right: 50px;
top: 40%;
width: 60px;
height: 20%;
display: flex;
justify-content: space-between;
will-change: transform;
transition: 0.3s ease-out;
z-index: 1;
}
.progress-bar-wrap {
position: relative;
width: 1px;
border: 0;
border-radius: 10px;
overflow: hidden;
background-color: rgb(70, 70, 70);
}
.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 0%;
background-color: rgb(189, 189, 189);
}
.white {
background: white;
}
.one {
background: gray;
}
.two {
background: green;
}
.three {
background: blue;
}
.four {
background: purple;
}
#fullpage {
height: 1000px;
}
JAVASCRIPT
let progressSection = document.querySelector('.progress-section');
let progressBar = document.querySelector('.progress-bar');
let progressNum = document.querySelector('.progress-num');
let x, y;
function updateProgressBar() {
progressBar.style.height = `${getScrollPercentage()}%`;
progressNum.innerText = `${Math.ceil(getScrollPercentage())}%`
requestAnimationFrame(updateProgressBar)
}
function getScrollPercentage() {
return ((window.scrollY) / (document.body.scrollHeight - window.innerHeight) * 100)
};
updateProgressBar()
new fullpage('#fullpage', {
licenseKey: 'LICENSE',
autoScrolling: true,
scrollBar: true,
})
You can use fullpage.js state classes for that.
For example:
/* On section 2 slide 0 */
.fp-viewing-page2-0 #nav{
color: red
}
Here's a working example:
https://codepen.io/alvarotrigo/pen/VwbxbYR
I have a demo which is working fine (button click is working fine and it moves to next slide). But when I apply direction property on body it stops working fine. My button click handler is not working. My slide does not change.
function handler() {
document.querySelector(".p").scroll({
left: 100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false)
.rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
left: 0;
}
.bl {
background-color: blue;
left: 100px;
}
.g {
background-color: green;
left: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>
when you comment the class rtl then button click wors. why?
When you use right-to-left, all horizontal positioning is reversed. You need to use right instead of left in all the CSS styles. And the scroll amount should be negative to scroll in the opposite direction.
function handler() {
document.querySelector(".p").scroll({
left: -100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false)
.rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
right: 0;
}
.bl {
background-color: blue;
right: 100px;
}
.g {
background-color: green;
right: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>
In the below code snippet, on clicking the <div class="inner">Some Text</div> will show up a overlay element. Inside overlay element, on clicking the span element with class popoutTerm will show up the popoutDialog element.
The issue is popoutDialog element is not fully visible, only partially portion of what ever it can display inside the overlay element is visible. I understood that the issue is due to overflow property applied to overlay element. But the requirement is overlay element should be scrollable if it has more content and popoutDialog element should be relative to popoutTerm element.
Please help me to understand and resolve it. Thanks in advance.
HTML Code
<body>
<div style="height:300px;border:1px solid red">Sample Content</div>
<div class="outer">
<div> A </div>
<div> B </div>
<div> C </div>
<div class="inner">Some Text</div>
<div class="overlay">Overlay <span class="popoutTerm">Content <div class="popoutDialog"> popout content </div></span> to display</div>
<div>D</div>
</div>
</div>
<script>
let outerElement = document.querySelector('.outer');
let innerElement = document.querySelector('.inner');
let overlayElement = document.querySelector('.overlay');
let popoutTermElement = document.querySelector('.popoutTerm');
let popoutDialogElement = document.querySelector('.popoutDialog');
innerElement.onclick = function (e) {
console.log('click called');
overlayElement.style.display = 'block';
overlayElement.style.position = 'absolute';
overlayElement.style.top = '50px';
overlayElement.style.left = '50px';
e.stopPropagation();
}
popoutTermElement.onclick = function () {
popoutDialogElement.style.display = 'block';
}
</script>
</body>
CSS Code
.outer {
height: 700px;
border: 1px solid black;
position: relative;
}
.inner {
cursor: pointer;
border: 1px solid blue;
height: 200px;
}
.overlay {
display:none;
height: 500px;
width: 300px;
background-color: green;
color: white;
overflow: auto;
}
.popoutTerm {
color: orange;
cursor: pointer;
position: relative;
}
.popoutDialog {
background-color: red;
color: white;
height: 100px;
width: 100px;
display: none;
position: absolute;
top: -50px;
left: 50px;
}
https://jsfiddle.net/a6v04bLr/
Issue is due to top: -50px; change the value as -10px
.outer {
height: 700px;
border: 1px solid black;
position: relative;
}
.inner {
cursor: pointer;
border: 1px solid blue;
height: 200px;
}
.overlay {
display:flex;
height: 500px;
width: auto;
background-color: green;
color: white;
overflow: auto;
}
.popoutTerm {
color: orange;
cursor: pointer;
position: relative;
}
.popoutDialog {
background-color: red;
color: white;
height: 100px;
width: 100px;
display: none;
position: absolute;
top: -10px;
left: 40px;
}
<!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" />
<title>WonderWoman</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div style="height:300px;border:1px solid red">Sample Content</div>
<div class="outer">
<div> A </div>
<div> B </div>
<div> C </div>
<div class="inner">Some Text</div>
<div class="overlay">Overlay <span class="popoutTerm">Content <div class="popoutDialog"> popout content </div></span> to display</div>
<div>D</div>
</div>
</div>
<script>
let outerElement = document.querySelector('.outer');
let innerElement = document.querySelector('.inner');
let overlayElement = document.querySelector('.overlay');
let popoutTermElement = document.querySelector('.popoutTerm');
let popoutDialogElement = document.querySelector('.popoutDialog');
innerElement.onclick = function (e) {
console.log('click called');
overlayElement.style.display = 'block';
overlayElement.style.position = 'absolute';
overlayElement.style.top = '50px';
overlayElement.style.left = '50px';
e.stopPropagation();
}
popoutTermElement.onclick = function () {
popoutDialogElement.style.display = 'block';
}
</script>
</body>
</html>
When mouse pointer enters link, onmouseenter calls function that works, but when mouse pointer leaves link, and it leaves very fast, onmouseleave does not fully execute the function, otherwise if going out slowly, it executes like it should
I have tried with onmouseover and onmouseout, functions execute fully, but there is constant flickering
function menuSlideOn(element) {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.height = '24px';
document.getElementById(element).style.margin = '0px 6px 0px 0px';
setTimeout(function delay() {
document.getElementById(element).style.width = '120px';
document.getElementById(element).style.transform = 'skew(-30deg)';
},
120);
}
function menuSlideOf(element) {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.width = '6px'
setTimeout(function delay() {
document.getElementById(element).style.height = '10px';
document.getElementById(element).style.margin = '5px 6px 0px 0px';
document.getElementById(element).style.transform = 'skew(0deg)';
},
120);
}
ul {
list-style-type: none;
margin: 10px;
}
li {
margin: 10px;
padding: 10px;
}
ul a {
color: #333;
text-decoration: none;
text-indent: 20px;
font-weight: bold;
position: fixed;
}
.bullet {
width: 6px;
height: 10px;
background: gray;
float: left;
margin-top: 5px;
position: absolute;
}
<ul>
<li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
<div id="d1" class="bullet"> </div>
HTML
</li>
<li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
<div id="d2" class="bullet"> </div>
CSS
</li>
<li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
<div id="d3" class="bullet"> </div>
JavaScript
</li>
<li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
<div id="d4" class="bullet"> </div>
Java
</li>
</ul>
I expect that the code should return the div to initial state after hovering the link, disregarding movement speed of mouse pointer
Actual results are dependent to speed of mouse pointer leaving the link
Another solution is that if you add all the code in setTimeout() then this problem will not occur ;
function menuSlideOn(element) {
setTimeout(function delay() {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.height = '24px';
document.getElementById(element).style.margin = '0px 6px 0px 0px';
document.getElementById(element).style.width = '120px';
document.getElementById(element).style.transform = 'skew(-30deg)';
},
150);
}
function menuSlideOf(element) {
setTimeout(function delay() {
document.getElementById(element).style.transition = 'all 0.1s';
document.getElementById(element).style.width = '6px'
document.getElementById(element).style.height = '10px';
document.getElementById(element).style.margin = '5px 6px 0px 0px';
document.getElementById(element).style.transform = 'skew(0deg)';
},
150);
}
ul {
list-style-type: none;
margin: 10px;
}
li {
margin: 10px;
padding: 10px;
}
ul a {
color: #333;
text-decoration: none;
text-indent: 20px;
font-weight: bold;
position: fixed;
}
.bullet {
width: 6px;
height: 10px;
background: gray;
float: left;
margin-top: 5px;
position: absolute;
}
<!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">
<title>Document</title>
<script src="mouse_out.js"></script>
<link rel="stylesheet" href="mouse_out.css">
</head>
<body>
<ul>
<li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
<div id="d1" class="bullet"> </div>
HTML
</li>
<li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
<div id="d2" class="bullet"> </div>
CSS
</li>
<li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
<div id="d3" class="bullet"> </div>
JavaScript
</li>
<li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
<div id="d4" class="bullet"> </div>
Java
</li>
</ul>
</body>
</html>
Please give me a clue how to achieve that with pure css?
I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. The page automatically resizes then, but these 2 divs heights stays unchanged. Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script?
Or maybe there's another way to make such a layout with a div added by script?
Let me show it in the fiddle:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Thank you!
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. It's very strange behavior even for the css/html
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? It will make it so the div won't expand to include that addition...
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
overflow: hidden;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
If you don't need scrolling - try position:fixed instead of absolute.
You don't need all this CSS, all you need to do is to set their height in CSS explicitely:
first to height: 100vh
after you add new element, to height: calc(100vh + X) where X is distance from initial divs bottom to bottom of the added element.
EDIT: Another solution with removed position: absolute:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html {
height: 100%;
}
body
{
display: flex;
min-height: 100%;
margin: 0 5rem 0 0;
}
div#col1
{
background: #eee;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
width: calc(100vw - 10rem);
}
div#dd
{
background: #f99;
border: 2px solid red;
margin-top: 2000px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>