I want to implement a page that continuously scrolls, such that when it gets to the bottom on the page, it goes back to the top and scrolls back to the end. So far I have implemented the page
$(document).ready(function() {
var scroll = setInterval(function() {
window.scrollBy(0, 1);
}, 20);
});
.content {
height: 500px;
width: 100%;
background-color: #cccccc;
}
.inner-content {
height: 80px;
width: 100%;
margin: 10px 0 10px 0;
background-color: #ff00ff;
}
h1 {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row content">
<div class="col-md-12 inner-content">
<h1>One</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Two</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Three</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Four</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Five</h1>
</div>
</div>
Now, what I am trying to figure out is how to listen in to JS to when it gets to the bottom of the page, so that I can reintialize the autoscrolling from top again. Kindly help.
You can test if the window is at the bottom with the following:
$(window).scroll(function() {
if ( $(window).scrollTop() + $(window).height() == $(document).height() ) {
$(window).scrollTop(0);
}
});
On scroll, we test if the page is at the bottom, then reset the scroll position to 0 (top)
https://jsfiddle.net/qjvkgx9t/
Related
I'm trying to create an information tree.
in my list there are some images and each one contains blocks of information,
the function I want to achieve is every time I move the mouse over one of the images its blocks of information that will be hidden appear and when I remove the mouse over the image the information disappears.
I don't have a lot of knowledge with programming logic so this is how far I've managed to go.
$("#beginner").mouseover(function () {
$(".base_beginner").css("display", "flex");
$(".patente-name").show();
});
$("#beginner").mouseleave(function () {
$(".base_beginner").css("display", "none");
$(".patente-name").hide();
});
let patentLength = $(".patente");
$(window).on("load", function () {
for (let i = 0; i < patentLength.length; i++) {
patentLength.mouseover(function () {
console.log($(".base_" + $(this).attr("id")));
})
}
});
.box-p {
width: 100%;
height: 199px;
background: url(https://i.imgur.com/pwIWOae.png) no-repeat center;
margin: 55px 0;
}
.base {
text-align: center;
display: none;
align-items: center;
}
.patente-name {
display: none;
}
/*/ Beginner Base /*/
.base_beginner {
width: 315px;
height: 179px;
background: url(https://i.imgur.com/OWJVG56.png) no-repeat;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="box-p d-flex align-items-center">
<div class="base_beginner base">
<div class="base-info mx-auto">
<p>0 ~ 50 Resets</p>
<p>Pontos por reset: 600</p>
<p>Nível para resetar: 400 | 380 | 370</p>
</div>
</div>
<div id="beginner" class="patente d-table mx-auto mt-3">
<div class="patente-name text-center text-uppercase font-weight-bold"></div>
<img src="https://i.imgur.com/mDU8frm.png" alt="">
</div>
<div class="base_beginner base">
<div class="base-info mx-auto">
<b>Recompensas</b>
<p>7 dias vip Godz</p>
<p>1 set +9 excelent por 3 dias</p>
<p>1 panda 3 dias</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
You can achieve this effect with CSS alone. No code needed.
In your stylesheet try something like this.
.elementToHide {
display: none;
}
.showHiddenChildOnHover:hover .elementToHide {
display: block;
}
And in your HTML, use classes to mark which elements you want to hover/hide.
<div class="showHiddenChildOnHover">
Mouse Over This Element To Show Hidden Child
<div class="toHide">Hidden Content</div>
</div>
And in fact if you are using bootstrap, this can be accomplished even easier with a collapse component: https://getbootstrap.com/docs/5.0/components/collapse/
I have two div elements:
When a user scrolls div #element-A and #header-one-target reaches the top of the containing div the last element (#animate-hd-b) in #element-B should scroll to the top of the containing div with a nice animation .
Here's the code that I'm working with to start. The code below does something when the window is scrolled not the div.
$(window).scroll(function() {
var offsetTop = $('#animate-hd-b').offset().top,
outerHeight = $('#animate-hd-b').outerHeight(),
windowHeight = $(window).height(),
scrollTop = $(this).scrollTop();
console.log((offsetTop-windowHeight) , scrollTop);
if (scrollTop > (offsetTop+outerHeight-windowHeight)){
alert('you have scrolled to the top!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element-A" style="background: orange; overflow: auto;">
<div class="content" style="padding-bottom: 300px;">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<h1 id="header-one-target">Header One</h1>
</div>
</div>
<div id="element-B" style="background: yellow; overflow: auto;">
<div class="content" style="padding-bottom: 300px;">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<h1 id="animate-hd-b">Animate This Header</h1>
</div>
</div>
Is there a way to do this in jQuery?
This is really pretty simple. You just keep track of #header-one-target and animate
#animate-hd-b when #header-one-target reaches at the top.
(function($) {
let $elementA = $('#element-A');
let $elementB = $('#element-B');
let $headerOneTarget = $('#header-one-target');
let $animateHdB = $('#animate-hd-b');
let isScrollAtTop = true;
$elementA.scroll(function() {
if (isScrollAtTop && $headerOneTarget.offset().top < 5) {
isScrollAtTop = false;
$elementB.animate({
scrollTop: $elementB.scrollTop() + $animateHdB.offset().top
});
} else if ($elementA.scrollTop() < 5) {
isScrollAtTop = true;
$elementB.animate({
scrollTop: 0
});
}
});
})(jQuery);
#element-A {
background: orange;
overflow: auto;
height: 100vh;
width: 60vw;
position: fixed;
top: 0;
left: 0;
}
#element-B {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 40vw;
background: yellow;
overflow: auto;
}
.content {
padding: 10px;
}
.content-vh100 {
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element-A">
<div class="content">
<p>Scroll</p>
<p>to</p>
<p>header</p>
<p>one</p>
<h1 id="header-one-target">Header One</h1>
<div class="content-vh100"></div>
</div>
</div>
<div id="element-B">
<div class="content">
<p>to</p>
<p>animate</p>
<p>following</p>
<p>content</p>
<h1 id="animate-hd-b">Animate This Header</h1>
<div class="content-vh100"></div>
</div>
</div>
Some conditions were added that should prevent unnecessary animations and queueing (which tends to happen when listening for scroll and animating scrollTop). It keeps track of the scroll direction and won't start animating when the element on the right has already reached its position.
Codepen demo
var sin = $('#element-A'),
dex = $('#element-B'),
peg = sin.scrollTop();
sin.scroll(function() {
var way = sin.scrollTop(),
rate = Math.round(sin.find('h1').position().top),
area = dex.scrollTop(),
turf = Math.round(dex.find('h1').position().top),
down = way > peg;
peg = way;
// conditions for scrolling down
if (rate < 0 && down && turf) {
dex.not(':animated').animate({scrollTop: area+turf}, 700);
}
// scrolling up
if (!down && area) {
dex.not(':animated').animate({scrollTop: 0}, 700);
}
});
body {
margin: 0;
}
body > div {
width: 50%;
height: 100vh;
float: left;
overflow: auto;
}
#element-A {
background: orange;
}
#element-B {
background: yellow;
}
.content {
padding-bottom: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element-A">
<div class="content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<h1 id="header-one-target">Header One</h1>
</div>
</div>
<div id="element-B">
<div class="content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<h1 id="animate-hd-b">Animate This Header</h1>
</div>
</div>
In case the elements are differently positioned in the target environment, using position() is a more straightforward approach than offset() because the latter is relative to the document. The former (used here) is relative to its own parent element and should work independent of its position.
So I have this sidebar:
<div class="col-md-3">
<h4 style="color: #404040; font-weight: bold;">
Guides:
</h4>
<div class="sidebar">
<!--auto-generated <ul>...-->
</div>
</div>
And I want it to follow the user as he scrolls down. I know that you can do it with position: fixed; in the styles. But I have a header, so if the div is fixed it remains in that height even if I scroll down.
But if I scroll down, it remains at that fixed point. Here's how it looks like when I scroll down it would look like this:
I want it to remain at the top. I read that I'm supposed to use javascript scroll functions, but I have no clue how, exactly.
You can use position: sticky for an easy "sticky" element. It's a new property, so it doesn't have the best browser support, but easy to use and works well.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row {
height: 200vh;
}
.row:nth-child(odd) {
background: #eee;
}
.sticky-column {
position: sticky;
top: 1em;
}
</style>
<div class="container">
<div class="row">
<div class="col-lg-12">
scroll down
</div>
</div>
<div class="row">
<div class="col-md-3 sticky-column">
<h4 style="color: #404040; font-weight: bold;">
Guides: (look it's sticky!)
</h4>
<div class="sidebar">
<!--auto-generated <ul>...-->
</div>
</div>
</div>
<div class="row"></div>
</div>
try using position: fixed; in style as well as margin-top: -30px; or what ever amount away from top you want:
something like this
<body>
<div class="sidebar" onscroll="dynamicheight()">
</div>
<script>
function dynamicheight() {
var sidebar = document.getElementById("sidebar");
var y = sidebar.scrollTop;
document.getElementById('random').style.height = y;
}
</script>
try something like this
var yOffset = $("#sidebar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > yOffset) {
$("#sidebar").css({
'top': 0,
'position': 'fixed'
});
} else {
$("#sidebar").css({
'top': yOffset + 'px',
'position': 'absolute'
});
}
});
Try this too
position:sticky;
I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.
If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
I have a 3 divs which are relatively positioned on the right side of my page inside an absolute parent div. I want them fade in and out as they scroll outside of they view (parent div). The fade feature was working before I set my parent divs positioning. How do I fix this? Thanks in advance for any help!
Here is a Codepen
<div class="container">
<div class="row">
<div class="col-sm-6" id="left_content">
<img src="buffalo.png">
</div>
<div class="col-sm-6" id="content">
<div class="right_content" id="box1">
<h4>Hi. My name is Jack.</h4>
<p>Scroll down for more info</p>
</div>
<div class="right_content" id="box2">
<h4>I'm a 21 year old developer living in Buffalo, Ny.</h4>
</div>
<div class="right_content" id="box3">
<h4>Hi. My name is Jack.</h4>
<p>Scroll down for more info</p>
</div>
</div>
</div>
JS:
$(window).scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, .5);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
CSS:
#left_content {
position: fixed;
}
.right_content {
position: relative;
}
::-webkit-scrollbar {
display: none;
}
#content {
width: 45%;
height: 400px;
overflow: scroll;
position: absolute;
right: 0;
}
h4, p {
margin-left: 10%;
}
#box1 {
top: 250px;
}
#box2 {
top: 650px;
}
#box3 {
top: 1050px;
margin-bottom: 600px;
}
Your .scroll() is not on the proper area. Because you are actually scrolling your <div id="content"> and not the window itself, so adjust your script like so:
<script type="text/javascript">
$('#content').scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0.5);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
</script>