Im trying to make autoscroll when user cursor reach almost end of viewport.
I wrote the code below but it works only once, meaning the first time the user close to the bottom it autoscroll 300px down and stop.
how can I make it go down as long as the user is at the end of viewport?
and why it only works once?
$(window).mousemove(function (e) {
var currposition = currentYPosition() + 800;
var MouseY = event.clientY;
if (MouseY > currposition-100) {
//Down
$('html, body').animate({
scrollTop: 300 // adjust number of px to scroll down
}, 1000);
}
});
You can use this simple code
$(".autoScrollBox").mousemove(function(e){
var clientY = e.clientY;
var boxHeight = $(this).height();
var contentHeight = $(".autoScrollBox")[0].scrollHeight;
var mousePositionProportion = clientY / boxHeight;
var scrollTop = mousePositionProportion * (contentHeight - boxHeight);
//// Top
if (clientY < boxHeight / 2)
scrollTop -= 50;
//// Bottom
else if (clientY > boxHeight - (boxHeight / 2))
scrollTop += 50;
$(".autoScrollBox").scrollTop(scrollTop);
});
.autoScrollBox {
height: 150px;
overflow-y: hidden;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="autoScrollBox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
</div>
See better example in JSFiddle
Related
I want to hide all elements but the first one so I use $(".item:not(:eq(0))").fadeOut();
I have elements with the same class "item":
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth Item</div>
Then when I scroll to the next element which could be "second , third,fourth item" , I want to show it
I tried using :
function isScrolledIntoView(elem)
{
var centerY = Math.max(0,((jQuery(window).height()-
jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
jQuery(window).on("scroll resize", function() {
jQuery(".news:not(:eq(0))").each(function(index, element) {
if (isScrolledIntoView(element)) {
jQuery(element).fadeIn(10000);
}
});
});
But it doesn't work with my method because the height of the body changes on showing the next item "Second Item" , So All the items are shown when I scroll to the "Second Item" or any other item.
How to hide the items but the first one and then fadIn() each on scrolling to it ?
This is using offset() in jquery. This demo will trigger function if
your element is completely in your viewport.
Tip:You need to take care of inner as well as outer height of element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
height:200vh;
}
#test {
top: 100vh;
padding: 10px;
width: 300px;
position: relative;
border: 1px solid black;
height:100;
}
</style>
</head>
<body>
<p>scroll to test</p>
<div id="test">
<p>Click the button to get offsetTop for the test div.</p>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var x = $("#test").offset();
var height1 = $("#test").outerHeight();
var y = document.documentElement.scrollTop;
var z = (x.top + height1) - y;
if(z < $(window).height()){
alert("fumction");
}
});
});
</script>
</body>
</html>
It will be more easy to use the combination of waypoint.js and animate.css.
Add animated class to every element to be animated. You can use any of the animate.css effects.
Change the offset { offset: '80%' } to control when the animation can start.
<div class="animated waypoint-slideup">
</div>
$('.waypoint-slideup').waypoint(function () {
$(this).addClass('slideInUp');
}, { offset: '80%' });
Use this in the css file
.waypoint-slideup{
opacity:0;}
.waypoint-slideup.slideInUp{
opacity:1;}
I have parent divs named - "main" and "sq" , they have same name child called "s" which both are designed (width and height) using javascript, so I want to make the both div named "s" different width and height according to their parent with
both child div ( class - "s") height and width should be in ratio to 1.5 to their parent div
the main's child is success to get the div in ratio but sq's not.
and I've found the problem in ( e.parentNode.clientWidth & e.parentNode.clientHeight ) which is only taking the main's width and height not the sq's.
Simply , the the black div inside orange is in ratio to 1.5 but green's not ?
check here -http://www.w3schools.com/code/tryit.asp?filename=FAO5SWY5KETB
HTML
<div class="row">
<div class="main" style="width:400px;height:500px;background-color:orange">
<div class="s" style="background-color:black">xfgx</div>
</div>
<div class="sq" style="width:250px;height:500px;background-color:green;">
<div class="s" style="background-color:black;">xfgx</div>
</div>
</div>
CSS
body{
margin:0px;
}
.row {
clear:both;
width:100pc;
}
.main,.sq{
float:left;
position:relative;
}
JS
var sms = [].slice.call(document.getElementsByClassName("s"), 0);
sms.forEach(function(e) {
var w = window.innerWidth - e.parentNode.clientWidth ;
var h = window.innerHeight - e.parentNode.clientHeight ;
var MW = w - ( w / 1.5 );
var MH = h - ( h / 1.5 );
e.style.width = MW + 'px';
e.style.height = MH + 'px';
document.getElementById('d').innerHTML= e.parentNode.clientWidth ;
});
You just need the parent width that you can get either with clientWidth or with getBoundingClientRect() depending on how want width and height calculation relatively to padding/scrollbars:
With getBoundingClientRect():
var sms = [].slice.call(document.getElementsByClassName("s"), 0);
sms.forEach(function(e) {
var parentRect = e.parentNode.getBoundingClientRect();
var MW = parentRect.width - (parentRect.width / 1.5);
var MH = parentRect.height - (parentRect.height / 1.5);
e.style.width = MW + 'px';
e.style.height = MH + 'px';
});
body {
margin: 0px;
}
.row {
clear: both;
width: 100pc;
}
.main,
.sq {
float: left;
position: relative;
}
<div class="row">
<div class="main" style="width:400px;height:500px;background-color:orange">
<div class="s" style="background-color:black">xfgx</div>
</div>
<div class="sq" style="width:250px;height:500px;background-color:green;">
<div class="s" style="background-color:black;">xfgx</div>
</div>
</div>
With clientWidth:
var sms = [].slice.call(document.getElementsByClassName("s"), 0);
sms.forEach(function(e) {
var w = e.parentNode.clientWidth;
var h = e.parentNode.clientHeight;
var MW = w - (w / 1.5);
var MH = h - (h / 1.5);
e.style.width = MW + 'px';
e.style.height = MH + 'px';
});
body {
margin: 0px;
}
.row {
clear: both;
width: 100pc;
}
.main,
.sq {
float: left;
position: relative;
}
<div class="row">
<div class="main" style="width:400px;height:500px;background-color:orange">
<div class="s" style="background-color:black">xfgx</div>
</div>
<div class="sq" style="width:250px;height:500px;background-color:green;">
<div class="s" style="background-color:black;">xfgx</div>
</div>
</div>
If you simply need to calculate the children's width with respect to the parent's width then there is no need to include the window.innerWidth & window.innerHeight.
The window.innerWidth has a constant value of say 945px, which you are subtracting from the parent's width using this line below
var w = window.innerWidth - e.parentNode.clientWidth;
but why?? This will mess up your calculations.
Just use
var w = e.parentNode.clientWidth;
var h = e.parentNode.clientHeight;
This should fix your problem & calculate ONLY as per your parent width & height.
I have different sections on my page like this:
<div class="red" data-section="Section Red"></div>
<div class="blue" data-section="Section Blue"></div>
<div class="yellow" data-section="Section Yellow"></div>
<div class="green" data-section="Section Green"></div>
And a separate div like this:
<div class="current_div"></div>
That div is always at the top of the page. How do I make it so that when the user has scrolled to the blue (or any of the other) div, the current_div will change to this:
<div class="current_div">Section Blue</div>
Here is a fiddle with my markup: https://jsfiddle.net/wb7L954v/1/
There must be a simply way to get the data-section part and simply put it inside that div?
The steps:
get all elements with the data-section attribute
on scroll event do
iterate over all elements (starting with the last one)
if the current scrollTop is larger than that element's offsetTop, that's the element we are looking for
write that element's data-section attribute's value in the appropriate header element
See: https://jsfiddle.net/Leydfd5b/
This is a example that works for every scrolling direction.
HTML:
<div class="current_div">current div</div>
<div class="red" data-section="Section Red">red</div>
<div class="blue" data-section="Section Blue">blue</div>
<div class="yellow" data-section="Section Yellow">yellow</div>
<div class="green" data-section="Section Green">green</div>
CSS (for test):
*{margin: 0;}
.current_div{position: fixed;background: #ccc;top: 0;width: 100%;}
.red, .blue, .yellow, .green{height: 500px;}
.red{background: red;}
.blue{background: blue;}
.yellow{background: yellow;}
.green{background: green;}
jQuery:
$.fn.isOnScreen = function () {
var win = $(window);
var viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
var currentDiv = $('.current_div');
$(window).scroll(function () {
if ($('.red').isOnScreen() == true) {
currentDiv.text($('.red').data('section'));
}
else if($('.blue').isOnScreen() == true){
currentDiv.text($('.blue').data('section'));
}
else if($('.yellow').isOnScreen() == true){
currentDiv.text($('.yellow').data('section'));
}
else if($('.green').isOnScreen() == true){
currentDiv.text($('.green').data('section'));
}
});
Working example: https://jsfiddle.net/1aakar8s/1/
If you need up and down scroll so you can use this jQuery code:
$.fn.isOnScreen = function () {
var win = $(window);
var viewport = {
top: win.scrollTop(),
bottom: this.top + win.height()
};
var bounds = this.offset();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
You need to compare the offSet Top of each colored section with the main div.
$( window ).scroll(function() {
var $div = $(".current_div").offset().top;
if($div >= $(".red").offset().top)
$(".current_div").text("Section Red");
if($div >= $(".blue").offset().top)
$(".current_div").text("Section Blue");
if($div >= $(".yellow").offset().top)
$(".current_div").text("Section Yellow");
if($div >= $(".green").offset().top)
$(".current_div").text("Section Green");
});
Example : https://jsfiddle.net/DinoMyte/wb7L954v/2/
$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$("#maincontainer").mousemove(function() {
// $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
$('#DivToShow').html("Y " + mouseY + " --- " + "X " + mouseX);
if (mouseY > 230) {
$('html, body').animate({
scrollBottom: $elem.height()
}, 800);
}
});
});
pls help, I am trying to make a auto page up and down scroll based on pointer position. when pointer coming to bottom of browser, page need to scroll down 60px ++. not a single scroll to end of page.
Try this solution.
On mousemove, get the clientY and the window height. If the difference is less than 60, then scroll 60 more than the current scrollTop:
$(document).on('mousemove', function(e) {
var y = e.clientY;
var h = $(window).height();
var n = h - y;
if (n < 60) {
var t = parseFloat($(window).scrollTop());
console.log(t);
$('html,body').animate({scrollTop:t + 60 + 'px'},200);
} else {
$('html,body').stop();
}
});
#wrapper,
.section {
width:100%;
float:left;
}
.section {
height:80px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
I have this markup.
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
With .col-md-4 has relative position, when I try to attach mouseover event to the .col-md-4 and get position of its offset it's return wrong offset for second .col-md-4 in second row. Here is the script
$('.col-md-4').hover(function(){
var offset = $(this).position();
var height = $(this).height();
console.log(offset); // this gives the wrong offset when hovering over second col-md-4 in second row
$('#shadow2').stop(true, true).animate({
'left': offset.left,
'top': offset.top + height + 10
});
}, function(){
$('#shadow2').animate({
'left': '-350px'
});
});
try using .offset(), it gives position of element relative to document, change
var offset = $(this).position();
to
var offset = $(this).offset();
Update::
$('.col-md-4').hover(function(){
var childPosition = $(this).offset();
var parentPosition = $(this).parent().offset();
var actualOffset = {
top: childPosition.top - parentPosition.top,
left: childPosition.left - parentPosition.left
}
var height = $(this).height();
console.log(offset);
$('#shadow2').stop(true, true).animate({
'left': actualOffset.left,
'top': actualOffset.top + height + 10
});
....