We Keep Coding

How to use javascript to automatically grab the height of elements to change the CSS style?

I am a javascript beginner, I have a question to ask everyone!
Today I have a project, such as the CSS setting of the gray block demo in the screen using position: fixed; fixed in the screen!
There are three blocks at the top, namely a, b, and c, but sometimes the a block will display: none; that is, it will disappear.
But my gray block always needs to be fixed below the c blue block!
The way I thought of was to use javascript to capture the height of the three blocks a, b, and c, and then change the top value in the demo!
I wonder if this idea is feasible?
But I wrote an example the way I know, but why didn’t the effect come out?
Is my CSS syntax wrong?
Hope to get your help, thank you.
let a = document.querySelector('.a').offsetHeight;
let b = document.querySelector('.b').offsetHeight;
let c = document.querySelector('.c').offsetHeight;
let demo = document.querySelector('.demo');
let all_height = a+b+c;
demo.style.top = all_height+"px";
body {
display: flex;
justify-content: center;
}
.wrap {
width: 100%;
background-color: #fff;
text-align: center;
border: 1px solid #222;
height: 800px;
}
.wrap .a {
left: 0px;
right: 0px;
height: 30px;
background-color: #ffdd00;
}
.wrap .b {
height: 80px;
background-color: #fbb034;
}
.wrap .c {
height: 100px;
background-color: #00a4e4;
}
.wrap .demo {
position: fixed;
top: 210px;
left: 0px;
right: 0px;
height: 60px;
line-height: 60px;
background-color: #ccc;
text-decoration: none;
color: #222;
font-size: 30px;
font-weight: 900;
}
.wrap .select {
position: absolute;
top: 260px;
}
<div class="wrap">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
Fixed block
</div>

The idea is I guess when you scroll down a fixed block to stand fixed at the top, I might be mistaken ..
First I want to mention that as a beginner it is good to follow good conventions. Use const instead of let, unless you re-assign value. Use CamelCase convention when declaring variables.
HTML
<div class="wrap">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
Fixed block
</div>
CSS
body {
display: flex;
justify-content: center;
}
.wrap {
width: 100%;
background-color: #fff;
text-align: center;
border: 1px solid #222;
height: 800px;
}
.wrap .a {
left: 0px;
right: 0px;
height: 30px;
background-color: #ffdd00;
}
.wrap .b {
height: 80px;
background-color: #fbb034;
}
.wrap .c {
height: 100px;
background-color: #00a4e4;
}
.wrap .demo {
display:block;
width:100%;
height: 60px;
line-height: 60px;
background-color: #ccc;
text-decoration: none;
color: #222;
font-size: 30px;
font-weight: 900;
}
.wrap .select {
position: absolute;
top: 260px;
}
.fixed-top{
position:fixed;
top:0;
}
JavaScript
const a = document.querySelector('.a').offsetHeight;
const b = document.querySelector('.b').offsetHeight;
const c = document.querySelector('.c').offsetHeight;
const demo = document.querySelector('.demo');
const allHeight = a+b+c;
window.addEventListener('scroll', function() {
const position = window.pageYOffset;
position> allHeight
? demo.classList.add('fixed-top')
: demo.classList.remove('fixed-top')
});
link to jsfiddle -> https://jsfiddle.net/Markov88/34dawz9k/36/

EDIT:
Here it is but you should make a js function that do a loop of elements with .d class and get the sum of their height. I will count automatically rather than a+b+c
But my gray block always needs to be fixed below the c blue block!
This way you can show C block
let a = document.querySelector('.a').offsetHeight;
let b = document.querySelector('.b').offsetHeight;
let c = document.querySelector('.c').offsetHeight;
let demo = document.querySelector('.demo');
let all_height = a+b+c;
demo.style.top = all_height+"px";
demo.innerText = all_height;
body {
display: flex;
justify-content: center;
}
.wrap {
width: 100%;
background-color: #fff;
text-align: center;
border: 1px solid #222;
height: 800px;
}
.wrap .a {
left: 0px;
right: 0px;
height: 20px;
background-color: #ffdd00;
}
.wrap .b {
height: 150px;
background-color: #fbb034;
}
.wrap .c {
height: 30px;
background-color: #00a4e4;
}
.wrap .demo {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 60px;
line-height: 60px;
background-color: #ccc;
text-decoration: none;
color: #222;
font-size: 30px;
font-weight: 900;
}
.wrap .select {
position: absolute;
top: 260px;
}
<div class="wrap">
<div class="a d">A</div>
<div class="b d">B</div>
<div class="c d">C</div>
Fixed block
</div>

JQuery issue with a back to top function

I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});

You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>

Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});

Changing a div opacity on scroll

I have looked through various pages, but have not managed to find a working solution. I want the text in my div to get more transparent gradually when I scroll. Please, can anybody help? Here is my code:
<script src = "/js/titleScroll.js"></script>
<div class = "header-title">
<h1>Title</h1>
</div>
and:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('header-title').css('opacity', 0.8);
} else {
$('header-title').css('opacity', 1);
}
});
});
and here is my css:
.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
position: relative;
max-width: 100%;
background-attachment: fixed;
position: float;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
Thank you.

Problem is, currently you are just triggering 0.8 opacity when user is not at top of the page. Try to get top offset each time scroll is executed and then apply opacity based on that offset, it can be linear function, or more complex ones - it's up to you how it's gonna fade in/out.
Here's very quick working example:
<head>
<style>
body {
min-height: 4000px;
}
.header-title {
position: fixed;
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
max-width: 100%;
background-attachment: fixed;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1000);
if (opacity >= 0) {
$('.header-title').css('opacity', opacity);
}
});
});
</script>
<div class = "header-title">
<h1>Title</h1>
</div>
</body>
https://jsfiddle.net/un2bdvfm/

Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

I've a problem that I wasn't able to solve for a while now, even looking to other Q/A on SO.
I would like to switch from a button to another one with an ng-show.
When ng-mouseovertriggers, I would like to hide the current button, button-db, and show a second one, button-shout
When ng-mouseleave triggers, I would like to do the opposite, hiding button-shout and showing button-db.
I'm already able to make this work with the following code:
HTML:
<div class="footer">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<span class="shout-value">200</span>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="icon-over" ng-src="./assets/css/img/logo-white-m.png"
style="width: 29px; height: 21px;"></div>
</div>
<div class="half button-action">
<span class="icon-cart" ng-src="./assets/css/img/icon-cart.png"
style="width: 29px; height: 21px;"></span>
</div>
</div>
JS:
$scope.hoverEdit = true;
$scope.hoverIn = function(){
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
};
With the code above I'm able to get the following starter situation:
button-db on the left and button-action on the right
And I would like that, when ng-mouseover triggers, button-db (The Purple Rectangle) gets hidden while button-shout (~Green Rectangle with another image) gets shown and vice-versa (this is actually working), like in the following image:
What I'm trying to achieve -> button-shout on the left at button-db's place
But, instead, I get the following result:
What I get instead, when I go over button-db I get this uknown blank div instead of button-shout
button-shout doesn't get shown and it is not present in the DOM and it does not have height and width even if I managed to build it like I did with the other buttons.
I'm using the following CSS classes:
half gives dimensions to the buttons and sets their position
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
button-db has both :before and :after with a little images and shout-value to handle the int number between them
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-image: url("./assets/css/img/shout-megaphone-white.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: url("./assets/css/img/shout-db-white.svg");
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
button-shout button to get shown when ng-mouseover triggers; It does not need any :before and :after, it only has 1 image and no values
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
button-action cart button, button-shout would look pretty much like it but for the color and the image
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
The functionalities I implemented using both ng-mouseover and ng-mouseleave work perfectly as I want. I don't get why button-shout has no dimensions and does not get shown at button-db's place when doing ng-mouseover.
I already tried using ng-if, adding and removing classes, using z-index and display: none & display: block but I always get this problem.
I noticed that button-shout inherits nothing except for half's placement.
Here is a little Plunker I put up with only two buttons to let you understand how it should work. It works on the Plunker but not in my application.
When mouseover triggers, one button hides and the other one is shown and when mouseleave triggers, the old one is shown back.
1) Have you any idea on why it doesn't get shown properly?
2) How can I fix this?
I hope I've been as much clear as possible, Thanks in advance.

To be honest i'm not really sure of what the problem is so i'll post here a snippet that try to reproduce what you currently have. Feel free to tell us if this snippet reproduces your problem and for answeres to use it as a base for an answer.
Note : in your HTML i removed the ng-mouseleave on 1st element and ng-mouseenter on 2nd because they were conflicting each other and throw duplicate events.
angular.module("app", []).controller("ctrl", ['$scope', function($scope){
$scope.hoverEdit = true;
$scope.hoverIn = function(){
console.log("HOVER IN");
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
console.log("HOVER OUT");
};
}]);
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-color: black;/*url("./assets/css/img/shout-megaphone-white.svg");*/
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: white;/*url("./assets/css/img/shout-db-white.svg");*/
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div class="pod">
<div class="footer" ng-app="app" ng-controller="ctrl">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()">
<button class="shout-value">100</button>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseleave="hoverOut()">
<button class="shout-value">200</button>
</div>
<div class="half button-action">
<button class="shout-value">300</button>
</div>
</div>
</div>
Of course since i don't have the images, i changed them to black and white background. What i can see is that i have a black crap that seems to not be in the right place, however this doesn't seems to be what your problem is.

Check if mouseover trigger the function or not. Mouseover should change value on ng-show value from false to true in your html.

I may be mis-reading, but why are any functions needed here? If you are just trying to toggle a class, how about this? it will not require any controller functions.
https://plnkr.co/edit/HMACVKTlLzbkfWhy4v1S?p=preview
<div class="half"
ng-init="hover = false"
ng-class="hover ? 'button-shout' : 'button-db'"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
<div class="icon-over">300</div>

Fading in an object when hovering over another one

I'd like to slide down a tooltip element when hovering on another element.
I tried using jQuery, but i'm experiencing that nothing will be faded in if I hover on countbox1. countbox1 is a timer made with javascript.
I don't think the script is wrong. I think it doesn't detect jQuery for some reason.
I also tried to download jQuery and put this in the "src:" directly.
$(document).ready(function(){
$("#countbox1").onmouseover(function(){
$("#tooltip").fadeIn();
});
$("#countbox1").onmouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
<div id="countbox1"></div>
<hr style="width: 500px;">
</div>

If all you want is the tooltip to enter the screen on hover of something else, I'd suggest using CSS transition.
If you nest the <p id="tooltip"> within the #countbox1 and put a :hover-event on that, you can get exactly the thing you want.
HTML
<div id=home>
<div id="countbox1">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
</div>
<hr style="width: 500px;">
</div>
CSS
#home {
height: 50%;
background: red;
}
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
height: 50px;
background: #f4f4f4;
}
#countbox1:hover #tooltip {
opacity: 1;
}
#tooltip {
width: 500px;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
height: 30px;
background: #0000ff;
position: absolute;
left: 50%;
margin-left: -250px;
top: -15px;
opacity: 0;
transition: all 1s;
}
Here's a working demo. Hover over the grey area for the tooltip to enter the view.
Here's a working demo where the tooltip enters the screen from the top.

You might be using deprecated methods.
Replace your code for the one below, and try again:
$(document).on('ready',function(){
$("#countbox1").on('mouseover',function(){
$("#tooltip").stop(true).fadeIn();
});
$("#countbox1").on('mouseout',function(){
$("#tooltip").stop(true).fadeOut();
});
});

You should use mouseover instead of onmouseover:
$(document).ready(function(){
$("#home").mouseover(function(){
$("#tooltip").fadeIn();
});
$("#home").mouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id=home>
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p><div id="countbox1"></div>
<hr style="width: 500px;">
</div>
</body>
Check it out also on this JSFiddle.