Develop Reference

Scroll to top button visible only on desktop (no mobile)

I made a scroll to top button that appears when the user scrolls down 25px from the top of the document (otherwise it's not visible) thanks to JavaScript following a tutorial because I still don't know anything about this programming language.
However, I would like it to be visible only on desktop websites and not also on mobile.
I tried using media queries but they don't work since JavaScript has control over the visibility of the button.
What function can I integrate to manage everything with JS?
Here is the code I'm using.
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>

There is a JS way to detect if a media query is matched: this is done by using window.matchMedia(). Then it is a matter of adding the appropriate media query to matchMedia() function, and then checking the .matches property in your if block:
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
const matchesMediaQuery = window.matchMedia('(min-width: 600px)');
if (matchesMediaQuery.matches && (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25)) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
scrollFunction();
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Just Add this css in your css file or if you are using bootstrap then add bootstrap media query to disable display in mobile
#media only screen and (max-width: 600px) {
#to-top-container {
display: none;
}
}

You don't need javaScript to do it, you should have used the "a" tag to jump to other pages. But the "a" tag can also jump to an element on the same page.
As defined in the HTML specification, you can use href="#top" or href="#" to link to the top of the current page.
The #media query is set to max-width: 600px - adjust the max-width to fit your needs.
html {
scroll-behavior:smooth;
}
body {
position: relative;
}
.section {
height: 100vh;
background: #dedede;
margin-bottom: 20px;
font-size: 100px;
}
.scroll-container {
position: absolute;
top: 0;
right:0;
height: 100%;
}
.scroll-container:before {
content: '';
display: block;
height: 100vh;
pointer-events: none;
}
.scroll-container a {
position: sticky;
top: 88vh;
cursor: pointer;
font-size: 20px;
}
#media (max-width: 600px) {
.scroll-container a {
display: none;
}
}
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="scroll-container">
To Top
</div>

How to count pageX, pageY for divs with same classes separately from each other

I'm trying to make hover effect like here: https://andstudio.lt/work/
So when user hover on title of project there is image appear which pinned to cursor.
I found some code in internet and created in codepen, here https://codepen.io/ChicagoJostik/pen/abzqXOv
It's actually working, but not properly.
First of all, I got problem here:
function moveCircle(e) {
TweenMax.to(".cursor", 0.5, {
css: {
left: e.pageX,
top: e.pageY
},
});
}
So when I hover on any project all "cursor's" pageX and pageY will be count.
How can I make count only for that "cursor" in which project I hovered?
I don't know maybe it's the problem that makes code working not properly,
but if you have any advice, you can write courageously.
Thanks in advance and sorry for my English.

Here is a working example to play around with.
Snippet:
$(".hoverme a").mouseenter(function() {
img = $(this).attr("data-image");
$(".image-placeholder").attr("style","background:url(" + img + ") no-repeat center center");
$(".image-placeholder").addClass("close");
$(document).on("mousemove", function(e) {
$(".image-placeholder").css({
left: e.pageX,
top: e.pageY
});
});
});
$(".hoverme").mouseleave(function() {
$(".image-placeholder").removeClass("close");
});
body {
background-color: #8f8d8d;
}
.container {
padding: 75px;
position: relative;
z-index: 10;
}
.hoverme {
padding-bottom: 20px;
}
.hoverme a {
opacity: 0.5;
display: inline-block;
font-size: 20px;
color: #fff;
transition: 0.2s;
}
.hoverme a:hover {
opacity: 1;
}
.image-placeholder {
visibility: hidden;
opacity: 0;
width: 30%;
padding-bottom: 21%;
position: absolute;
transform: translate(-50%, -50%) scale(0.7);
z-index: 9;
background-size: cover !important;
transition: opacity 0.1s, visibility 0.1s, transform 0.2s;
left: -100%;
top: -100%;
}
.image-placeholder.close {
display: block;
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-placeholder"></div>
<div class="container">
<div class="hoverme">
<a data-image="https://i.imgur.com/kuqQfXB.jpg">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
<div class="hoverme">
<a data-image="https://i.imgur.com/UVP46pV.jpg">
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
<div class="hoverme">
<a data-image="https://i.imgur.com/8YLDZ4B.jpg">
3. Lorem ipsum dolor sit amet, consectetur adipiscing eli</a>
</div>
<div class="hoverme">
<a data-image="https://i.imgur.com/9uAL5Oh.jpg">
4. Donec et velit volutpat, posuere orci pulvinar lobortis</a>
</div>
</div>

loop through array of items to see if one before is taller in height

I have a 2x2 grid and i'm trying to set a min-height based on if one of them is larger in height than the other. so that left and right will have the same height. I'm looking for CSS here just js.
I have this on a resize event.
const updateSize = () => {
const group = Array.from(document.querySelectorAll('.items'));
const heights = group.map(item => item.clientHeight);
group.forEach((item, index) => {
const count = index % 2;
if (count === 1) {
const h = heights[index - 1];
item.style.minHeight = `${h}px`;
}
});
};
The above works but the only problem is it's only checking the last item and won't work if the current item is larger in height than the first.
I need a way to check against the last and update the corresponding items.
Here is the layout. Note that the gray boxes at the bottom are misaligned:
body {
background: #20262E;
font-family: Helvetica;
width: 100%;
}
.component {
width: 100%;
}
.grid {
display: grid;
width: 100%;
grid-template-columns: repeat(2, 50%);
}
.item {
border: 1px solid green;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.images-collection {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image {
width: 100px;
height: 100px;
border: 1px solid white;
}
.textWrapper {
border: 1px solid blue;
display: flex;
justify-content: center;
align-content: flex-end;
background-color: gray;
}
.text {
text-align: center;
color: white;
width: 300px;
}
<div class="component">
<div class="grid">
<div class="item">
<div class="images-collection">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<div class="textWrapper">
<div class="text">
<p>This is my title</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
<div class="item">
<div class="images-collection">
<div class="image"></div>
</div>
<div class="textWrapper">
<div class="text">
<p>This is my title</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>

try:
const updateSize = () => {
const Allitem = document.querySelectorAll('.item')
, MaxHeight = 0
Allitem.forEach(item=>{ item.style.minHeight = '' }) // remove values
MaxHeight = Array.from(Allitem).reduce((a,c)=>a<c.clientHeight?c.clientHeight:a,0)
Allitem.forEach(item=>{ item.style.minHeight = `${MaxHeight}px` })
}
For the case where only the cells of the same line must be of the same height:
const updateSize = () => {
const Allitems = document.querySelectorAll('.item')
let ItemsOnLine = []
, topPos = -99999
, MaxHeight = 0
const setHeights = h => ItemsOnLine.forEach(item=>{ item.style.minHeight = `${h}px` })
Allitems.forEach(item=>{ item.style.minHeight = '' }) // remove values
Allitems.forEach(item=>{
if (item.offsetTop != topPos)
{
setHeights(MaxHeight)
MaxHeight = 0
ItemsOnLine.length = 0
topPos = item.offsetTop
}
MaxHeight = Math.max(MaxHeight, item.clientHeight )
ItemsOnLine.push( item )
})
setHeights(MaxHeight)
}

Fadein/Fadeout a text inside a div

I would like to know how could I make my div that contains text fade in from bottom to top when scrolling down the page? i will be grateful for your help. Here is my Code:
var $text = $('.textBlock');
$(window).on('scroll', function(event, element) {
$text.each(function(event, element) {
if ($(this).visible()) {
$(this).children('p').stop().fadeIn();
} else {
$(this).siblings('.textBlock p').stop().fadeOut();
}
});
});
.textBlock {
text-align: center;
width: 100%;
height: 118px;
float: left;
display: block;
}
.textBlock p {
font-size: 24px;
padding: 30px 0;
line-height: 25px;
letter-spacing: 0.1em;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>

You need to use a timer function for this. Check this out:
$(function () {
$(".textBlock").hide();
$("#blockOne").show();
$(window).scroll(function () {
numTextBlocks = $(".textBlock").length;
$(".textBlock:visible").fadeOut(400, function () {
console.log(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")");
$(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")").fadeIn(400);
});
});
});
html, body {
height: 150%;
}
.textBlock {
position: fixed;
text-align: center;
width: 100%;
height: 118px;
}
.textBlock p {
font-size: 24px;
padding: 30px 0;
line-height: 25px;
letter-spacing: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
<p>One Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
<p>Two Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
<p>Three Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>

This is what I used:
$(document).on("mousewheel", function () {
$(".textBlock:not(:visible)").first().fadeIn("slow")
});
Here is the JSFiddle demo

Let me know if this code works with you.
Fiddle
$(window).on("load",function() {
function fade() {
$('.fade').each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
/* If the object is completely visible in the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
}
});
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll
});

showing a div content after scrolling down

hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.

If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/