I am currently switching a header class based on the scrollTop and wrapping the logic in
if(scroll_start >= 600) {...}
but it doesn't work ideally because obviously the screen resolution changes.
Ideally I would want to do this (in pseudo code)
if (first section (with an id) is scrolled past) {...}
but I'm not sure how to achieve this? Any suggestions?
Thanks
Get the height of the element, then add it to the position of the element from top
var elementPosition = $([element]).position().top + $([element]).height()
$(document).on('scroll', function() {
if($(this).scrollTop() > elementPosition){
// actions
}
})
Here is an example:
window.addEventListener("scroll", function(){
var two = document.getElementById("One");
if (window.scrollY > two.offsetTop + two.offsetHeight){
console.log("You got it!");
}
})
#One{
height:50px;
width:100%;
background-color:lightblue;
}
#Two{
height:1000px;
width:100%;
}
<!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>
</head>
<body>
<div id="One">Goto: HERE</div>
<div id="SCROLL">HERE:</div>
<div id ="Two"></div>
</body>
</html>
Related
Hi i tried to make the div smaller wqhen scrolling. however i found some article that the div is small then when scroll it make bigger. i wanted the opposite. when run the image is 100% then when scroll it will be smaller. can someone help me please? i am new to this
This is the code:
https://codesandbox.io/s/sharp-lewin-to1o2b?file=/index.html
Html:
<!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>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
min-width: 20%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
var scrollSlow = scrollVal / 4;
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
I did it with my math logic
<!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>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
width: 100%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
( (100 - (scrollVal*100/1500)) ) <= 10 ? aDiv.style.width = "10%" : aDiv.style.width = (100 - (scrollVal*100/1500)) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.
Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.
Question is how do i display the top propert of an element using .style.top
CSS
img {
width: 100px;
position: absolute;
top: 100px;
left: 10px;
}
HTML
<!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>Coin Game Starter</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
<img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
<script src="app.js"></script>
</body>
</html>
JS
let player = document.querySelector("#player").style.top
console.log(player)
To get the CSS properties to Javascript.
var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px
I am building some test split screen layouts and would like to show / hide content based on scroll position. As I have built layouts in VH set scroll position in VH too? (although im switching text I would like to learn how to show and hide by class/id so I can switch other content in the future.
Here is the codepen
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y < 0) {
$(".test1").hide();
} else {
$(".test1").show();
}
});
$(function() {
var element =$("#it");
var element1 =$("#it1");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
element.hide();
element1.show();
} else {
element.show();
element1.hide();
}
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body style="height :2000px;">
<div id="it" style="background-color:red;height :1000px;">TEST</div>
<div id="it" style="background-color:yellow;height :1000px;">TEST2</div>
</body>
</html>
I need to know how can i toggle an event listener that works when the screen is less than 700px and when the screen is more than 700px the event listener gets removed
function myFunction(x) {
if (x.matches) { // If media query matches
document.getElementById("resources").addEventListener("click", function() {
alert("media worked")
})
} else {
document.getElementById("resources").removeEventListener("click", function() {
alert("media worked")
})
}
}
var x = window.matchMedia("(max-width: 979px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
h1 {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>
</head>
<body>
<h1 id="title">abrir y cerrar</h1>
<button id="resources">click to toggle</button>
</body>
</html>
You need to use named functions if you want to use removeEventListener, since the function that you remove has to be the same one you added.
function clickHandler() {
alert("media worked");
}
function myFunction(x) {
if (x.matches) { // If media query matches
document.getElementById("resources").addEventListener("click", clickHandler)
} else {
document.getElementById("resources").removeEventListener("click", clickHandler)
}
}
var x = window.matchMedia("(max-width: 979px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
h1 {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>
</head>
<body>
<h1 id="title">abrir y cerrar</h1>
<button id="resources">click to toggle</button>
</body>
</html>
Barmar has given the correct answer to the problem of your code. But I still wanted to add this to show that it's a possibility.
You could use CSS to, for example, disable a click on an element uing the pointer-events property.
var links = document.querySelectorAll('a');
function onClick(event) {
console.log(event);
event.preventDefault();
}
links.forEach(function(link) {
link.addEventListener('click', onClick);
});
.events-none {
pointer-events: none;
}
Without pointer-events: none
With pointer-events: none
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX