Develop Reference

How to combine dynamic Javascript div height resizing with in-page anchor hyperlinks?

Ok, this is an unusual question, but I've been playing around with it for hours and haven't had any progress - hoping the SO community can help! 🤓
Here's the webpage in question: https://pifornerds.io/
We're using this code to dynamically set the background (the digits of pi that you see in grey) height based on the foreground content length:
<script>
// Dynamically set base height based on container contents
var containerHeight = document.getElementById("container").offsetHeight;
var baseHeight = document.getElementById("base").offsetHeight;
if (baseHeight > containerHeight) {
document.getElementById("base").style.height = containerHeight + "px";
}
</script>
CSS snippet:
.layered {
display: grid;
justify-items: left;
background-color: #222222;
max-width: 1000px;
margin: auto;
height: auto;
min-height: 100px;
overflow: hidden;
}
.layered > * {
grid-column-start: 1;
grid-row-start: 1;
}
.base {
font-family: "DejaVuSansMonoBold", courier;
color: white;
opacity: 0.1;
max-width: 100%;
height: 100%;
word-break: break-all;
margin-top: -3px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
position: static;
z-index: 1;
overflow: hidden;
}
.container {
display: block;
height: max-content;
overflow: hidden;
}
We wanted to do this so there wouldn't be a bunch of pi digits in the footer area. We think it looks "cleaner" this way.
However, the menu at the top uses anchor links to jump to content lower on the page, for example:
Roadmap
jumps to:
<a id="roadmap"></a>
Now here's the problem ...
After you click a menu anchor link, and then try to scroll back up the page to the top, you can't 🧐 ... because somehow the previous Javascript height update won't allow that.
This is as far up as I can scroll up now, after clicking "Roadmap":
Any ideas? Thanks in advance! 😀
EDIT: Here's a Fiddle: https://jsfiddle.net/imkane/kof83msy/4/
Of course it works properly there 😖

You need to remove the overflow: hidden; from .layered div.
It will probably be better to add overflow: hidden; to .base div, which is the one you set the height on.

How to put an element in hover state when scrolled down using javascript

I am trying to make a div element which when scrolled down will change properties drastically. Here is the codepen example of how I want it to work.
Instead of hover I want it so that when scrolled down, the page wide div will turn into that little circle div which when clicked will function as a back to the top button. It doesn't matter if more classes are added or anything of that sort. I am very new to js and I tried a few things and also googled about it, I got the scroll code from w3school's how to make a back to top button guide which specifies that when scrolled down by 20px the code would react, but I don't know how to turn the JavaScript to JS when scrolled down along with the transformation of the div.
Thanks in advance

I think you want to implement scroll to top functionality, very common these days in most of the web app.
You need to keep below things and design that feature.
There is one header, that should have a reference ID with hash to scroll back to top
Create a button that will always static position (JS) button, will show up when user scroll the window
Bind click event on the button that scroll back to top
Here is the you can see this implementation and use it.
.html
<h1 class="intro-copy">
Scroll down to use this simple back-to-top button made with modern vanilla javascript.
</h1>
<a class="top-link hide" href="" id="js-top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
<span class="screen-reader-text">Back to top</span>
</a>
.css
body {
height: 2000px;
position: relative;
}
.intro-copy {
padding: 1em;
margin: 50vh auto;
max-width: 15em;
font-family: Helvetica;
font-weight: lighter;
font-size: 2em;
line-height: 1.2;
text-align: center;
}
.top-link {
transition: all .25s ease-in-out;
position: fixed;
bottom: 0;
right: 0;
display: inline-flex;
cursor: pointer;
align-items: center;
justify-content: center;
margin: 0 3em 3em 0;
border-radius: 50%;
padding: .25em;
width: 80px;
height: 80px;
background-color: #F8F8F8;
&.show {
visibility: visible;
opacity: 1;
}
&.hide {
visibility: hidden;
opacity: 0;
}
svg {
fill: #000;
width: 24px;
height: 12px;
}
&:hover {
background-color: #E8E8E8;
svg {
fill: #000000;
}
}
}
// Text meant only for screen readers.
.screen-reader-text {
position: absolute;
clip-path: inset(50%);
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
word-wrap: normal !important;
clip: rect(1px, 1px, 1px, 1px);
&:focus {
display: block;
top: 5px;
left: 5px;
z-index: 100000; // Above WP toolbar
clip-path: none;
background-color: #eee;
padding: 15px 23px 14px;
width: auto;
height: auto;
text-decoration: none;
line-height: normal;
color: #444;
font-size: 1em;
clip: auto !important;
}
}
JS:
// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');
// Let's set up a function that shows our scroll-to-top button if we scroll beyond the height of the initial window.
const scrollFunc = () => {
// Get the current scroll value
let y = window.scrollY;
// If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
if (y > 0) {
scrollToTopButton.className = "top-link show";
} else {
scrollToTopButton.className = "top-link hide";
}
};
window.addEventListener("scroll", scrollFunc);
const scrollToTop = () => {
// Let's set a variable for the number of pixels we are from the top of the document.
const c = document.documentElement.scrollTop || document.body.scrollTop;
// If that number is greater than 0, we'll scroll back to 0, or the top of the document.
// We'll also animate that scroll with requestAnimationFrame:
// https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
// ScrollTo takes an x and a y coordinate.
// Increase the '10' value to get a smoother/slower scroll!
window.scrollTo(0, c - c / 10);
}
};
// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
e.preventDefault();
scrollToTop();
}

JavaScript CSS Progress bar for a VoIP test

I basically have two divs, one being absolutely placed over the other. I also have a variable from an application that represents the percent of a VoIP test completeness. Now I need to have the progress bar call the percent variable using JavaScript.
I have been told I need an asynchronously update the progress bar but im unsure how to do that. im aware there are many ways to do this. I am still learning JavaScript and need an example to work with. I have tried a number of what I would assume would work but what I post here is just the most recent attempt.
I am referencing this YouTube example/tutorial, but obviously I am not using setInterval() because I want the width based on the variable. I have the test run on a button's click and felt that it was unnecessary to include.
//Variable for the test's percent. it provides just a number in increments of 5
<param name="js-prog" value="progress($PROGRESS$)">\
function progress(pRess) {
const pRessBar = document.getElementsByClassName('ressBar');
const computedStyle = getComputedStyle(pRessBar);
const styleWidth = parseFloat(computedStyle.getPropertyValue('pwidth')) || 0
pRessBar.style.setproperty('pwidth', styleWidth + pRess)
}
.ressBar {
position: relative;
width: 500px;
height: 3em;
background-color: #111;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
color: white;
}
.ressBar::before {
content: attr(data-label);
display: flex;
align-items: center;
position: absolute;
left: .5em;
top: .5em;
bottom: .5em;
width: calc(var(pwidth, 0) * 1%);
min-width: .1rem;
max-width: calc(100% - 1em);
background-color: #069;
border-radius: 15px;
padding: 1em;
}
`<div class="ressBar" Id="ressBar" style="pwidth: .1" data-label="Loading..."></div>

css variables should always have double dash at beginning of their names.
Personally, I find the example twisted on youtube,
for the same result, I see things like that:
const pRessBar = document.getElementById('ressBar')
function setRessBar_percent(val) { // 0 <= val <= 100
pRessBar.style.setProperty('--pwidth', `${val}%`)
pRessBar.dataset.label = (val<100)? 'Loading...' : 'Loading completed ;-)'
}
/* test part */
inSiz.oninput=_=>
{
inSiz.nextSibling.textContent = `${inSiz.value}%`
setRessBar_percent(inSiz.value)
}
#ressBar {
box-sizing: border-box;
position: relative;
width: 500px;
--pwidth: 50%;
height: 3em;
background-color: #111;
margin: 1em auto;
border-radius: 1.5em;
color: white;
border: .5em solid #111; ; /* try red color */
overflow: hidden;
}
#ressBar::before {
position: absolute;
top: 0;
left: calc( -100% + var(--pwidth) );
content: '';
width: 100%;
height: 100%;
background-color: #069;
border-radius: 1em;
}
#ressBar::after {
content: attr(data-label);
position: absolute;
left: 1em;
top: 0;
height: 2em;
line-height: 2em;
}
/* test part */
#inSiz {
margin : 1em;
width: 200px;
}
<div Id="ressBar" data-label="Loading..."></div>
<!-- test part -->
<hr>
<p>play with this range : <p>
<input id="inSiz" type="range" value="50" min="0" max="100" step="1"><span>50%</span> (supposed value for the progress bar)
<p> to test the appearance of the progress bar<p>
let me pick your brain and try to pick this apart.
no problemo amigo ;)
double dash makes sense but I thought that JavaScript doesn't like dashes or other certain symbols.
it's just in the doc, and for javascript it's not a symbol or anything but just a string
Using CSS custom properties (variables) ==doc== or for ==JS part==
so #ressBar::before is for the width that is being changed and #ressBar::after is for the text "Loading..."?
the text "Loading ..." is in the ::after,
while the progress bar is in the ::before, so that it appears below.
Putting the text and the progress bar together is a bad idea:
if the progress is zero then the text cannot be displayed in a null space
is there a reason why the calculation for the "width" is under left vs right?
in my code the blue bar is width: 100% of it's parent.
It just "moves" more or less to the right depending on the progress value requested.
the excess part is to the left in negative value of its parent element (#ressBar { which has as rule css: overflow: hidden;
two advantages:
1- you just make the size you want on the parent with no other css change
2- the blue bar has no css problems with the border-radius: 1em; when it size is less than 1em
I don't understand how the JavaScript portion is working. I understand pRessBar but I don't understand your comment referencing 0 <= val <= 0 OR the syntax for setProperty ``` '${val}%' ``
0 <= val <= 0 is a mistake and should be 0 <= val <= 100 that's say val argument should be between 0 and 100
${val}% it's a normal use of arguments in Template literals if val==45 it's made 45% (% is just a character like another)

make div bigger and animate bigger section upwards on hover

I am trying to animate a div upwards when a user hovers on the div.
I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.
See jsfiddle here which demonstrates what my code is currently doing.
Please see code below:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}
.content:hover {
height: 110%;
}
<div class="box">
<div class="content">TEST</div>
</div>

You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. Also you can use transition to make the scale smoother
You also need to scale back the text.
See here: jsfiddle
You need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. You need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3
In this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66
Code:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top: 300px;
transition:0.3s;
}
.content:hover p {
transform: scaleY(0.66)
}
.content:hover {
transform: scaleY(1.5);
transform-origin: bottom;
}
<div class="box">
<div class="content">
<p>
TEST
</p>
</div>
</div>

Try it like this (I have no other idea...): You can give to the class "box" a bigger height (I put a red border around, so you can see it) than the class "content". After that, you can use flexbox, to put the class "content" on the bottom. After that, you can do it with hover to change your heigth upwards and fill it. With transition you can make a nice animation. I hope this is good enough. Perhaps there is also a way with jQUery at the moment I havn't got an idea. Let me know, if this helps you (I'm not sure if I understanded the question well) - Cheers. (Important: This heights and so on are just random values for testing)
.box {
display: flex;
justify-content: flex-end;
flex-direction: column;
height: 100px;
border: 1px solid red;
}
.content {
background-color: #e3e4e6;
height: 50px;
width: 100%;
text-align: center;
-webkit-transition: height 1s;
/* Safari */
transition: height 1s;
}
.content:hover {
height: 100%;
}
<div class="box">
<div class="content">TEST</div>
</div>

If you just want to use css, just use:
.content:hover {
margin-top: -50px;
height: 110%;
}
See jsFiddle

since there isn't any space at top to expand, you may give an extra margin initially and remove it on hover like this JsFiddle -
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top:25px;
}
.content:hover {
height: 110%;
margin-top:0;
}

Set top property with the value of height - 100 * -1
https://jsfiddle.net/x3cL1cpt/7/
.content:hover {
height: 110%;
top: -10%;
position: relative;
}
Why position relative? It's because I move the box, but without modifying the space that the box occuped. If you need to modify that space, change top with margin-top.

Replace this CSS with your current, needed to add transition:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
transition: 1s all ease;
}
.content:hover {
transform: scaleY(1.2);
transform-origin: bottom right;
}

Controlling JQuery Animate Function

I've been playing with "marginLeft: "100%"" but that only moves the div off the screen entirely. I want the div, onClick, to float:right against the edge of the right side of the screen.
JSFiddle:
https://jsfiddle.net/487r8qza/
HTML
<div id="footer">
<one id="one">
</one>
<two id="two">
</two>
<three id="three">
</three>
</div>
JavaScript
$("#footer").click(function(){
$("#one").animate({
marginLeft: "+=900px",
}, 2000 );
$("#two").animate({
marginLeft: "+=900px",
}, 800 );
$("#three").animate({
marginLeft: "+=900px",
}, 333 );
});
$("#three").click(function() {
$("#three").animate({
marginLeft: "100%"} , 1000
);
});
CSS
#footer {
margin: 0;
padding: 0;
float: left;
width: 100%;
max-width: 100%;
height: 115px;
background-color: #4a4a4a;
}
one {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #070707;
height: 115px;
margin-left: -900px;
}
one,two,three {
text-align: center;
color: white;
font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 115px;
}
one:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
three:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #1a1a1a;
height: 115px;
margin-left: -900px;
}
three {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #2c2c2c;
height: 115px;
margin-left: -900px;
}

Sorry if it took this long, something came up. Right, so I got it working. Hope this helps
JSFIDDLE
As for CSS, I kept it as simple as possible. The trick here is to make your DIVs display inline-block, so that at the very start, they are neatly stacked next to each other. You will also want to have them all be float right.
CSS:
.box-container{
width: 100%;
height: 115px;
position: relative;
overflow: hidden;
}
.box-item{
width: 300px;
height: 115px;
position: relative;
display: inline-block;
float: right;
cursor: pointer;
}
.b0{
background: #7888D9;
}
.b1{
background: #76D54E;
}
.b2{
background: #DF7B41;
}
Next, in your HTML, you need to give each DIVs the same classname, which will simplify the Jquery click event. Finally, we will also give our first DIV a classname of "current". This will control which DIV must move and which DIV must wait and stay idle as long as the one beside him hasn't moved. You'll understand soon enough.
HTML:
<div class="box-container">
<div class="box-item b0 current">
Box 1
</div>
<div class="box-item b1">
Box 2
</div>
<div class="box-item b2">
Box 3
</div>
</div>
Finally, as for the Jquery, this is where it gets a bit complicated, I'll try to explain the best I can. Bare in mind that math is not quite my forte. Since our DIVS all float right in the CSS, well, they will all be stacked to the right (of course). To counter that and position them to the left, we need to give each DIV a right position. This position will be some kind of offset. To get this number, we need to multiply the width of a DIV by the total number of DIVs. After that, we must subtract this number to the total width of our DIVs' container (basically the browser width).
As for the click event, we must first check if the DIV we clicked has our "current" classname. If it does, we move it, if not, we don't. The easy part is moving them. By resetting a DIV's right value to 0, each one will slide accordingly to the right with our animate event. Once this is done, we switch the "current" classname to the next DIV. We then increment a counter. This will help to see if all DIVs has been moved.
Once all DIVs have been moved to the right, there is an IF statement that will check our counter and see if it is greater than our total number of DIVs. If it is, the sliding motion is inverted and all DIV's will return to the left. In the same manner, if the clicked element is not the current DIV, it will not move. if it is, it will move back to the left. When all DIV's have been move back in default position, ou counter is reset and our "current" classname is reassigned to the very first DIV.
The resize function is not optimal, but it deals with any responsive issue you could face. It will reset all DIVs to the left and recalculate the offset, so that each DIV never slide offscreen. Needs a little work, but it's better than nothing for now.
JQUERY:
var $boxWidth;
var $screenWidth;
var $offsetRight;
var $count = 0;
$(function () {
$boxWidth = $('.box-item').width();
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').css('right',$offsetRight);
$('.box-item').click(function(event) {
if($(this).hasClass('current')){
if($count < $('.box-item').length){
$(this).animate({
right: "0px",
}, 2000, function(){
$count++;
$(this).removeClass('current');
if($count < $('.box-item').length){
$(this).next().addClass('current');
}
else{
$(this).addClass('current');
}
});
}
else{
$(this).animate({
right: $offsetRight,
}, 2000, function(){
$count++;
$(this).removeClass('current');
console.log($count);
if($count < ($('.box-item').length*2)){
$(this).prev().addClass('current');
}
else{
$(this).addClass('current');
$count = 0;
}
});
}
}
});
window.onresize = myResize;
myResize();
});
function myResize(){
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').each(function(){
$(this).css('right',$offsetRight);
});
$('.box-item').eq(0).addClass('current');
$count = 0;
}