Related
I found this while browsing and this plays and stops gifts on hover:
http://docs.embed.ly/docs/tutorial-play-and-stop-gifs
I would like to maintain this functionality but by playing only once, when user scrolls over that section. I believe jQuery waypoints can be combined with this to achieve this, but my JS expertise fails to combine the two.
jQuery Waypoints
https://github.com/imakewebthings/waypoints
I believe an example HTML structure for this to start out would be something like this:
<div class="gifs row small-up-4">
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
</div>
.gifs a {
position: relative;
display: block;
}
.gif-preload {
display: none;
}
.gif-loading {
position: absolute;
width: 40px;
height: 40px;
font-size: 40px;
color: #fff;
top: 0;
left: 0;
}
$.embedly.defaults.key = '1d5c48f7edc34c54bdae4c37b681ea2b';
$('.gifs a').embedly({
display: function(obj) {
if (obj.type === 'photo') {
var $this = $(this);
// Create the static image src with Embedly Display.
var src = $.embedly.display.display(obj.url, {
query: {
animate: false
}
});
// Add static gif placeholder to the parent
$this.html('<img class="gif-holder" src="' + src + '" />');
// Start preloading the actually gif.
$this.append('<img class="gif-preload" src="' + obj.url + '" />');
// Create a promise so we can keep track of state.
$this.data('promise', $.Deferred());
// Get the element we added.
var elem = $this.find('.gif-preload').get(0);
// If the image is not in cache then onload will fire when it is.
elem.onload = function() {
$this.data('promise').resolve();
};
// If the image is already in the browsers cache call the handler.
if (elem.complete) {
$this.data('promise').resolve();
}
// Set the static gif url so we can use it later.
$(this).data('static_url', src);
} else {
// remove li if it's not an image.
$(this).parent().remove();
}
}
}).on('mouseenter', function() {
var $this = $(this);
// Set the hover state to true so that the load function knows to run.
$this.data('hover', true);
// Create a function to load the gif into the image.
var load = function() {
if ($this.data('hover') === true) {
// Remove the loading image if there is one
$this.find('.gif-loading').remove();
// Swap out the static src for the actually gif.
$this.find('img.gif-holder').attr('src', $this.data('embedly').url);
}
};
// Add the load function to the done callback. If it's already resolved
// this will fire immediately.
$this.data('promise').done(load);
// Add a spinner if it's not going to play right away.
if ($this.data('promise').state() === 'pending') {
// Add a loading spinner.
$this.append('<i class="gif-loading fa fa-spinner fa fa-spin"></i>');
// we need to center it over the image.
$this.find('.gif-loading').css({
top: $this.height() / 2 - 20,
left: $this.width() / 2 - 20
});
}
}).on('mouseleave', function() {
var $this = $(this);
// Make sure the load function knows we are no longer in a hover state.
$this.data('hover', false);
// Remove the spiner if it's there.
$this.find('.gif-loading').remove();
// Set the src to the static url.
$this.find('img.gif-holder').attr('src', $(this).data('static_url'));
});
This is not a perfect answer, but it will guide you a bit on how to implement.
Solution: everytime you scroll, check GIFS in screen an play them and stop those who aren't in screen.
1) everytime you scroll...
Simply using
$(document).scroll(onScroll);
onScroll function is gonna be called everytime you scroll.
2) check GIFS in screen an play them and stop those who aren't in screen
To know when a HTML element is in the screen, you can head to "Check if element is visible after scrolling" question.
So for example, based on this answer we could use:
/**
* Is element within visible region of a scrollable container
* #param {HTMLElement} el - element to test
* #returns {boolean} true if within visible region, otherwise false
*/
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
}
Final Solution
Combining your code, with the above, you can use this:
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
}
function animateGifsInScreen() {
$('.gifs a').each(function(index, el) {
if(isScrolledIntoView(el)) {
$(el).trigger('mouseenter');
} else {
$(el).trigger('mouseleave');
}
});
}
$(document).scroll(animateGifsInScreen);
What I'm doing: every time you scroll, I iterate over all gifs and play/stop them depending if they are on screen or not. For play/stop, I just trigger mouseenter/mouseleave respectively.
This may not be the ideal solution for your case but I'm pretty sure it will guide you to the correct answer.
There is a sample: https://jsfiddle.net/e8av59g2/ (it has a bug, you have to scroll at least once to made it work hehe).
Sorry if I'm completely missing with the title, I'm not entirely sure how to word what it is I'm trying to achieve. Any help would be great!!
Over the past few months in my free time I've been setting myself tasks to help myself understand and learn javascript / jQuery. So far all is going well but I've hit a bit of a bump in the road!
Essentially what I've created is a pretty simple set of tabbed content with a changing banner. When you click a tab, the relevant banner fades in and the previous banner fades out
Here's a fiddle: http://jsfiddle.net/unn9s4yf/
So what I'd like to do and where I'm kind of stuck is I'd like the banners to automatically "rotate", by fading in and out in the tabbed order every 10 seconds or so.
So kind of like a trigger click, but I feel as if that'd be the wrong way to go?
$('.thumb' + idAttr).trigger("click");
With a timeout attached? I'm not sure? I'm also not sure how to increment it each time so if this was the chosen method, how would it start at thumb 1, then click 2, 3, 4 & so on?
I've got the number of thumbs inside the div using
var thumbCount = $('#thumbs a').length;
Which returns 15 which is correct. So I guess it'd be something like when idAttr = .length start over from 1 again?
I'd also like to be able to pause the "auto click" function when I hover overthe main banner or thumbnails, I don't know if this is achievable though?
I know I'm asking a lot here.... At least I think I am. But any help or guidance on any part of this would be massively appreciated.
Thank you for your time!
I forked your jsfiddle and tried to do what you asked.
http://jsfiddle.net/OxyDesign/2g5Lav12/
It changes every 3 seconds, comes back to first thumb after the last thumb, stops on mouseenter & plays on mouseleave (on thumbs & banners), and stops on click & plays on second click on the same thumb.
HTML
<div id="container">
<div id="thumbs">
<a class="thumb active"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
</div>
<div id="banner">
<div class="banner active"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
</div>
</div>
CSS
#container {width: 960px; margin: 0 auto;}
div,
a {float: left; display: block;}
#thumbs {width: 600px;}
.thumb {width: 110px; height: 156px; margin: 0 10px 10px 0; cursor: pointer;}
.thumb:hover,
.thumb.active,
.thumb.clicked {opacity: 0.5;}
.thumb:nth-child(even) {background: #ccee44;}
.thumb:nth-child(odd) {background: #ff33dd;}
#banner {width: 360px;}
.banner {width: 360px; height: 488px; position: absolute; display: none;}
.banner.active {display: block;}
.banner:nth-child(even) {background: #ccee44;}
.banner:nth-child(odd) {background: #ff33dd;}
JS
$(document).ready(function() {
var thumbs = $('.thumb'),
firstThumb = thumbs.eq(0),
banners = $('.banner'),
all = thumbs.add(banners),
duration = 3000,
rotating = false,
intervalRotate;
function setAutoRotate(){
intervalRotate = setInterval(autoRotate,duration);
rotating = true;
}
function stopAutoRotate(){
clearInterval(intervalRotate);
rotating = false;
}
function autoRotate(){
var nextThumb = thumbs.filter('.active').next();
if(!nextThumb.length) nextThumb = firstThumb;
rotate(nextThumb);
}
function rotate(activeThumb){
thumbs.removeClass('active');
activeThumb.addClass('active');
banners.removeClass('active').eq(thumbs.index(activeThumb)).addClass('active');
}
thumbs.on('click',function(e){
e.preventDefault();
var thumb = $(this);
if(thumb.hasClass('clicked')){
thumb.removeClass('clicked');
}else{
stopAutoRotate();
thumbs.removeClass('clicked');
thumb.addClass('clicked');
rotate(thumb);
}
});
all.on('mouseenter',function(){
if(rotating) stopAutoRotate();
});
all.on('mouseleave',function(){
if(!thumbs.filter('.clicked').length) setAutoRotate();
});
setAutoRotate();
});
Is it the behaviour you wanted ?
Triggering a click with a timeout should work fine. You could even do it recursively if you never want it to end. Also, you can set a variable to decide when to stop the rotation
$(function() {
$('.thumb').click(function(event, isAutoClick){
//Is Not automatic click, set false
if (!isAutoClick) isRotationActive = false;
//Other Click Code
});
//If hover over banner, stop rotation
$("#banner").on("mouseover", function() {
isRotationActive = false;
});
rotate($(".thumb"), 0);
});
var isRotationActive = true;
function rotate($clickables, currentIndex) {
//Make sure currentIndex is valid
currentIndex = currentIndex % $clickables.length;
//Trigger current click
$clickables.eq(currentIndex).trigger("click", [true]); //Passes [true] for isAutoClick
//Call again in 1 second with the next index
setTimeout(function() {
isRotationActive && rotate($clickables, currentIndex + 1)
}, 1000);
}
Updated Fiddle here: http://jsfiddle.net/unn9s4yf/3/
An Additional Solution:
var thumbs = $('.thumb');
var currentThumb = 0;
var changingStopped = false;
var changeBanner = function() {
console.log(thumbs.eq(currentThumb));
thumbs.eq(currentThumb).click();
currentThumb >= thumbCount - 1 ? currentThumb = 0 : currentThumb++;
setTimeout(function() {
checkIfChange();
}, 1000);
}
// triggers 'changeBanner()' if the user isn't currently stopping it.
var checkIfChange = function() {
if (!changingStopped)
{
changeBanner();
}
}
// makes the rotation stop
$('.thumb').mouseenter(function() {
changingStopped = true;
$(this).trigger('click'); // Assuming you want the hovered-over thumb to be displayed in the banner.
currentThumb = $(this).index() + 1; // Additional Option to make the rotation begin again from the current thumb.
});
// makes the rotation start again
$('.thumb').mouseleave(function() {
changingStopped = false;
checkIfChange();
});
checkIfChange();
See JSFiddle. Cheers!
I have a very odd problem that i cant seem to crack, I have sliding divs like in y previous question. Now I am trying to implement a auto height feature, so far it works perfectly, the only problem i am facing is that it only animate the height of the wrapper after the first initial click.
So Basically, if you click any link the first time, the height just kind of snaps in place, but after that anything you click animates the height perfectly.
And finally IE8 is a browser i have to unfortunately support, and then when clicked the div expands super high and then just snaps back to where its meant to be.
JSFIDDLE DEMO
And here is the code:
HTML:
<nav>
page 1
page 2
page 3
</nav>
<div class="wrapper">
<div id="page-1" class="page">
<div class="page-container">
<h3>page 1</h3>
<div>Simulated content heigher than 100%</div>
</div>
</div>
<div id="page-2" class="page">
<div class="page-container">
<h3>page 2</h3>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
<div>Simulated content heigher than 100%</div>
</div>
</div>
<div id="page-3" class="page">
<div class="page-container">
<h3>page 3</h3>
<div>Simulated content heigher than 100%</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
overflow-x:hidden;
position:relative;
}
nav{
position:absolute;
top:0; left:0;
height:30px;
}
.wrapper {
background: #263729;
}
.page {
float:left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color:#FFF;
}
a.selected{
color: red;
}
JavaScript:
jQuery(document).ready(function () {
var pages = jQuery('.page'),
wrapper = jQuery('.wrapper'),
menuItems = jQuery('a.scrollitem'),
wrapperWidth = 100 * pages.length,
slideWidth = 100/pages.length;
jQuery.each(pages, function (index, value) {
var page = jQuery(this);
var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
pageContainer.data('originHeight', page.outerHeight());
});
wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
pages.width(slideWidth + '%');
menuItems.click(function(){
var menuItem = jQuery(this),
page = jQuery(menuItem.attr('href')),
pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
height = pageContainer.data('originHeight'),
slideNumber = page.index('.page'),
margin = slideNumber * -100 + '%';
menuItems.removeClass('selected');
menuItem.addClass('selected');
wrapper.animate({marginLeft: margin, height: height},{
duration: 1000,
start: function () {
page.animate({height:height},1000);
},
complete: function () {
pages.css({height:1,overflow:'hidden'});
jQuery(this).css({height:'auto'});
page.css({height:'auto',overflow:''});
}
});
return false;
});
});
Any Help Would be Fantastic.
Cracked:
http://jsfiddle.net/ugZST/2/
Just add
page.css("height", 1);
before animating the page
jQuery(document).ready(function () {
var pages = jQuery('.page'),
wrapper = jQuery('.wrapper'),
menuItems = jQuery('a.scrollitem'),
wrapperWidth = 100 * pages.length,
slideWidth = 100/pages.length;
jQuery.each(pages, function (index, value) {
var page = jQuery(this);
var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
pageContainer.data('originHeight', page.outerHeight());
});
wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
pages.width(slideWidth + '%');
menuItems.click(function(){
var menuItem = jQuery(this),
page = jQuery(menuItem.attr('href')),
pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
height = pageContainer.data('originHeight'),
slideNumber = page.index('.page'),
margin = slideNumber * -100 + '%';
menuItems.removeClass('selected');
menuItem.addClass('selected');
page.css("height", 1);
wrapper.animate({marginLeft: margin, height: height},{
duration: 1000,
start: function () {
page.animate({height:height},1000);
},
complete: function () {
pages.css({height:1,overflow:'hidden'});
jQuery(this).css({height:'auto'});
page.css({height:'auto',overflow:''});
}
});
return false;
});
});
Try this Fiddle
I just added this line during the init:
pages.css({height: $(pages[0]).height()});
Update
Just set the height of the inactive pages to 1 as the complete does: Fiddle
if (!$('a.scrollitem[href="' + '#' + page.attr('id') + '"]').hasClass('selected'))
page.css({height: 1});
I think what's happening is that the 2nd div seems to "pop" open when clicking a nav link because the height of this div is not being set explicitly at the outset, and the rendered content in this div simply takes up that amount of height, making the div that tall. Once you explicitly set the height of this div via your animation, that problem no longer exists because the explicit CSS height declaration on the div overrides this issue. For example, notice that when you click "page 3" you see the 2nd div "pop" open, but the then the height animation seems to work on the page 3 div. I think you will need to explicitly set the height on your page-container divs ahead of time, either via CSS, or at the beginning of your click handler (maybe use some overflow-y: hidden?), and potentially fix any issues this may cause in your JS height calculations.
Your js initialisation for wrapper's css seems to be wrong. Replace it with
wrapper.css({width:wrapperWidth + '%', marginLeft:0,height:pages.first().outerHeight()});
That works for me.
Add in your css
.wrapper {
background: #263729;
overflow-y: hidden
}
And that works smoothly
This is my HTML code:
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
</div>
And I want to show .menu on click on #showmenu sliding from left to right (with animate). On click again on #showmenu or anywhere in site page, .menu will hide (slide back to left).
I use JQuery 2.0.3
I've tried this, but it doesn't do what I want.
$(document).ready(function() {
$('#showmenu').toggle(
function() {
$('.menu').slideDown("fast");
},
function() {
$('.menu').slideUp("fast");
}
);
});
That .toggle() method was removed from jQuery in version 1.9. You can do this instead:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').slideToggle("fast");
});
});
Demo: http://jsfiddle.net/APA2S/1/
...but as with the code in your question that would slide up or down. To slide left or right you can do the following:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').toggle("slide");
});
});
Demo: http://jsfiddle.net/APA2S/2/
Noting that this requires jQuery-UI's slide effect, but you added that tag to your question so I assume that is OK.
Of course slideDown and slideUp don't do what you want, you said you want it to be left/right, not top/down.
If your edit to your question adding the jquery-ui tag means you're using jQuery UI, I'd go with nnnnnn's solution, using jQuery UI's slide effect.
If not:
Assuming the menu starts out visible (edit: oops, I see that isn't a valid assumption; see note below), if you want it to slide out to the left and then later slide back in from the left, you could do this: Live Example | Live Source
$(document).ready(function() {
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().animate({left: 0});
}
});
});
You'll need to put position: relative on the menu element.
Note that I replaced your toggle with click, because that form of toggle was removed from jQuery.
If you want the menu to start out hidden, you can adjust the above. You want to know the element's width, basically, when putting it off-page.
This version doesn't care whether the menu is initially-visible or not: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
<script>
$(document).ready(function() {
var first = true;
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
}
});
});
</script>
</body>
</html>
I would do something like this
DEMO in JsBin: http://jsbin.com/ofiqur/1/
Click Here
<div class="menu">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
</div>
and in jQuery as simple as
var min = "-100px", // remember to set in css the same value
max = "0px";
$(function() {
$("#showmenu").click(function() {
if($(".menu").css("marginLeft") == min) // is it left?
$(".menu").animate({ marginLeft: max }); // move right
else
$(".menu").animate({ marginLeft: min }); // move left
});
});
Try this:
<script type="text/javascript">
$.fn.toggleFuncs = function() {
var functions = Array.prototype.slice.call(arguments),
_this = this.click(function(){
var i = _this.data('func_count') || 0;
functions[i%functions.length]();
_this.data('func_count', i+1);
});
}
$('$showmenu').toggleFuncs(
function() {
$( ".menu" ).toggle( "drop" );
},
function() {
$( ".menu" ).toggle( "drop" );
}
);
</script>
First fuction is an alternative to JQuery deprecated toggle :) . Works good with JQuery 2.0.3 and JQuery UI 1.10.3
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".click-header").click(function(){
$(this).next(".hidden-content").slideToggle("slow");
$(this).toggleClass("expanded-header");
});
});
</script>
.demo-container {
margin:0 auto;
width: 600px;
text-align:center;
}
.click-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-down.png) no-repeat 50% 50%;
}
.expanded-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-up.png) no-repeat 50% 50%;
}
.hidden-content {
display:none;
border: 1px solid #d7dbd8;
padding: 20px;
text-align: center;
}
<div class="demo-container">
<div class="click-header"> </div>
<div class="hidden-content">Lorem Ipsum.</div>
</div>
Use slideToggle(500) function with a duration in milliseconds for getting a better effect.
Sample Html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
In your js file, if you need child propagation for the animation then remove the second click event function and its codes.
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
//for stoping child to manipulate the animation
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});
I have a scrolled div and I want to have an event when I click on it, it will force this div to scroll to view an element inside.
I wrote its JavasSript like this:
document.getElementById(chr).scrollIntoView(true);
but this scrolls all the page while scrolling the div itself.
How to fix that?
I want to say it like this:
MyContainerDiv.getElementById(chr).scrollIntoView(true);
You need to get the top offset of the element you'd like to scroll into view, relative to its parent (the scrolling div container):
var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;
The variable topPos is now set to the distance between the top of the scrolling div and the element you wish to have visible (in pixels).
Now we tell the div to scroll to that position using scrollTop:
document.getElementById('scrolling_div').scrollTop = topPos;
If you're using the prototype JS framework, you'd do the same thing like this:
var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];
Again, this will scroll the div so that the element you wish to see is exactly at the top (or if that's not possible, scrolled as far down as it can so it's visible).
You would have to find the position of the element in the DIV you want to scroll to, and set the scrollTop property.
divElem.scrollTop = 0;
Update:
Sample code to move up or down
function move_up() {
document.getElementById('divElem').scrollTop += 10;
}
function move_down() {
document.getElementById('divElem').scrollTop -= 10;
}
Method 1 - Smooth scrolling to an element inside an element
var box = document.querySelector('.box'),
targetElm = document.querySelector('.boxChild'); // <-- Scroll to here within ".box"
document.querySelector('button').addEventListener('click', function(){
scrollToElm( box, targetElm , 600 );
});
/////////////
function scrollToElm(container, elm, duration){
var pos = getRelativePos(elm);
scrollTo( container, pos.top , 2); // duration in seconds
}
function getRelativePos(elm){
var pPos = elm.parentNode.getBoundingClientRect(), // parent pos
cPos = elm.getBoundingClientRect(), // target pos
pos = {};
pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop,
pos.right = cPos.right - pPos.right,
pos.bottom = cPos.bottom - pPos.bottom,
pos.left = cPos.left - pPos.left;
return pos;
}
function scrollTo(element, to, duration, onDone) {
var start = element.scrollTop,
change = to - start,
startTime = performance.now(),
val, now, elapsed, t;
function animateScroll(){
now = performance.now();
elapsed = (now - startTime)/1000;
t = (elapsed/duration);
element.scrollTop = start + change * easeInOutQuad(t);
if( t < 1 )
window.requestAnimationFrame(animateScroll);
else
onDone && onDone();
};
animateScroll();
}
function easeInOutQuad(t){ return t<.5 ? 2*t*t : -1+(4-2*t)*t };
.box{ width:80%; border:2px dashed; height:180px; overflow:auto; }
.boxChild{
margin:600px 0 300px;
width: 40px;
height:40px;
background:green;
}
<button>Scroll to element</button>
<div class='box'>
<div class='boxChild'></div>
</div>
Method 2 - Using Element.scrollIntoView:
Note that browser support isn't great for this one
var targetElm = document.querySelector('.boxChild'), // reference to scroll target
button = document.querySelector('button'); // button that triggers the scroll
// bind "click" event to a button
button.addEventListener('click', function(){
targetElm.scrollIntoView()
})
.box {
width: 80%;
border: 2px dashed;
height: 180px;
overflow: auto;
scroll-behavior: smooth; /* <-- for smooth scroll */
}
.boxChild {
margin: 600px 0 300px;
width: 40px;
height: 40px;
background: green;
}
<button>Scroll to element</button>
<div class='box'>
<div class='boxChild'></div>
</div>
Method 3 - Using CSS scroll-behavior:
.box {
width: 80%;
border: 2px dashed;
height: 180px;
overflow-y: scroll;
scroll-behavior: smooth; /* <--- */
}
#boxChild {
margin: 600px 0 300px;
width: 40px;
height: 40px;
background: green;
}
<a href='#boxChild'>Scroll to element</a>
<div class='box'>
<div id='boxChild'></div>
</div>
Native JS, Cross Browser, Smooth Scroll (Update 2020)
Setting ScrollTop does give the desired result but the scroll is very abrupt. Using jquery to have smooth scroll was not an option. So here's a native way to get the job done that supports all major browsers. Reference - caniuse
// get the "Div" inside which you wish to scroll (i.e. the container element)
const El = document.getElementById('xyz');
// Lets say you wish to scroll by 100px,
El.scrollTo({top: 100, behavior: 'smooth'});
// If you wish to scroll until the end of the container
El.scrollTo({top: El.scrollHeight, behavior: 'smooth'});
That's it!
And here's a working snippet for the doubtful -
document.getElementById('btn').addEventListener('click', e => {
e.preventDefault();
// smooth scroll
document.getElementById('container').scrollTo({top: 175, behavior: 'smooth'});
});
/* just some styling for you to ignore */
.scrollContainer {
overflow-y: auto;
max-height: 100px;
position: relative;
border: 1px solid red;
width: 120px;
}
body {
padding: 10px;
}
.box {
margin: 5px;
background-color: yellow;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
#goose {
background-color: lime;
}
<!-- Dummy html to be ignored -->
<div id="container" class="scrollContainer">
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div id="goose" class="box">goose</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
</div>
<button id="btn">goose</button>
Update: As you can perceive in the comments, it seems that Element.scrollTo() is not supported in IE11. So if you don't care about IE11 (you really shouldn't, Microsoft is retiring IE11 in June 2022), feel free to use this in all your projects. Note that support exists for Edge! So you're not really leaving your Edge/Windows users behind ;)
Reference
To scroll an element into view of a div, only if needed, you can use this scrollIfNeeded function:
function scrollIfNeeded(element, container) {
if (element.offsetTop < container.scrollTop) {
container.scrollTop = element.offsetTop;
} else {
const offsetBottom = element.offsetTop + element.offsetHeight;
const scrollBottom = container.scrollTop + container.offsetHeight;
if (offsetBottom > scrollBottom) {
container.scrollTop = offsetBottom - container.offsetHeight;
}
}
}
document.getElementById('btn').addEventListener('click', ev => {
ev.preventDefault();
scrollIfNeeded(document.getElementById('goose'), document.getElementById('container'));
});
.scrollContainer {
overflow-y: auto;
max-height: 100px;
position: relative;
border: 1px solid red;
width: 120px;
}
body {
padding: 10px;
}
.box {
margin: 5px;
background-color: yellow;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
#goose {
background-color: lime;
}
<div id="container" class="scrollContainer">
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div id="goose" class="box">goose</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
</div>
<button id="btn">scroll to goose</button>
Code should be:
var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;
You want to scroll the difference between child top position and div's top position.
Get access to child elements using:
var divElem = document.getElementById('scrolling_div');
var numChildren = divElem.childNodes.length;
and so on....
If you are using jQuery, you could scroll with an animation using the following:
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});
The animation is optional: you could also take the scrollTop value calculated above and put it directly in the container's scrollTop property.
We can resolve this problem without using JQuery and other libs.
I wrote following code for this purpose:
You have similar structure ->
<div class="parent">
<div class="child-one">
</div>
<div class="child-two">
</div>
</div>
JS:
scrollToElement() {
var parentElement = document.querySelector('.parent');
var childElement = document.querySelector('.child-two');
parentElement.scrollTop = childElement.offsetTop - parentElement.offsetTop;
}
We can easily rewrite this method for passing parent and child as an arguments
Another example of using jQuery and animate.
var container = $('#container');
var element = $('#element');
container.animate({
scrollTop: container.scrollTop = container.scrollTop() + element.offset().top - container.offset().top
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function (e) {
console.log("animation completed");
}
});
None of other answer fixed my issue.
I played around with scrollIntoView arguments and managed to found a solution. Setting inline to start and block to nearest prevents parent element (or entire page) to scroll:
document.getElementById(chr).scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start'
});
There are two facts :
1) Component scrollIntoView is not supported by safari.
2) JS framework jQuery can do the job like this:
parent = 'some parent div has css position==="fixed"' || 'html, body';
$(parent).animate({scrollTop: $(child).offset().top}, duration)
Here's a simple pure JavaScript solution that works for a target Number (value for scrollTop), target DOM element, or some special String cases:
/**
* target - target to scroll to (DOM element, scrollTop Number, 'top', or 'bottom'
* containerEl - DOM element for the container with scrollbars
*/
var scrollToTarget = function(target, containerEl) {
// Moved up here for readability:
var isElement = target && target.nodeType === 1,
isNumber = Object.prototype.toString.call(target) === '[object Number]';
if (isElement) {
containerEl.scrollTop = target.offsetTop;
} else if (isNumber) {
containerEl.scrollTop = target;
} else if (target === 'bottom') {
containerEl.scrollTop = containerEl.scrollHeight - containerEl.offsetHeight;
} else if (target === 'top') {
containerEl.scrollTop = 0;
}
};
And here are some examples of usage:
// Scroll to the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget('top', scrollableDiv);
or
// Scroll to 200px from the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget(200, scrollableDiv);
or
// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);
given you have a div element you need to scroll inside, try this piece of code
document.querySelector('div').scroll(x,y)
this works with me inside a div with a scroll, this should work with you in case you pointed the mouse over this element and then tried to scroll down or up. If it manually works, it should work too
User Animated Scrolling
Here's an example of how to programmatically scroll a <div> horizontally, without JQuery. To scroll vertically, you would replace JavaScript's writes to scrollLeft with scrollTop, instead.
JSFiddle
https://jsfiddle.net/fNPvf/38536/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onmousedown="scroll('scroller',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onmousedown="scroll('scroller',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll function.
#param id Unique id of element to scroll.
#param d Amount of pixels to scroll per sleep.
#param del Size of the sleep (ms).*/
function scroll(id, d, del){
// Scroll the element.
document.getElementById(id).scrollLeft += d;
// Perform a delay before recursing this function again.
TIMER_SCROLL = setTimeout("scroll('"+id+"',"+d+", "+del+");", del);
}
Credit to Dux.
Auto Animated Scrolling
In addition, here are functions for scrolling a <div> fully to the left and right. The only thing we change here is we make a check to see if the full extension of the scroll has been utilised before making a recursive call to scroll again.
JSFiddle
https://jsfiddle.net/0nLc2fhh/1/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft('scroller',3, 10);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight('scroller',3, 10);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll fully left function; completely scrolls a <div> to the left, as far as it will go.
#param id Unique id of element to scroll.
#param d Amount of pixels to scroll per sleep.
#param del Size of the sleep (ms).*/
function scrollFullyLeft(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft += d;
// Have we not finished scrolling yet?
if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) {
TIMER_SCROLL = setTimeout("scrollFullyLeft('"+id+"',"+d+", "+del+");", del);
}
}
/**
Scroll fully right function; completely scrolls a <div> to the right, as far as it will go.
#param id Unique id of element to scroll.
#param d Amount of pixels to scroll per sleep.
#param del Size of the sleep (ms).*/
function scrollFullyRight(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft -= d;
// Have we not finished scrolling yet?
if(el.scrollLeft > 0) {
TIMER_SCROLL = setTimeout("scrollFullyRight('"+id+"',"+d+", "+del+");", del);
}
}
This is what has finally served me
/** Set parent scroll to show element
* #param element {object} The HTML object to show
* #param parent {object} The HTML object where the element is shown */
var scrollToView = function(element, parent) {
//Algorithm: Accumulate the height of the previous elements and add half the height of the parent
var offsetAccumulator = 0;
parent = $(parent);
parent.children().each(function() {
if(this == element) {
return false; //brake each loop
}
offsetAccumulator += $(this).innerHeight();
});
parent.scrollTop(offsetAccumulator - parent.innerHeight()/2);
}
I needed to scroll a dynamically loading element on a page so my solution was a little more involved.
This will work on static elements that are not lazy loading data and data being dynamically loaded.
const smoothScrollElement = async (selector: string, scrollBy = 12, prevCurrPos = 0) => {
const wait = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout));
const el = document.querySelector(selector) as HTMLElement;
let positionToScrollTo = el.scrollHeight;
let currentPosition = Math.floor(el.scrollTop) || 0;
let pageYOffset = (el.clientHeight + currentPosition);
if (positionToScrollTo == pageYOffset) {
await wait(1000);
}
if ((prevCurrPos > 0 && currentPosition <= prevCurrPos) !== true) {
setTimeout(async () => {
el.scrollBy(0, scrollBy);
await smoothScrollElement(selector, scrollBy, currentPosition);
}, scrollBy);
}
};
browser does scrolling automatically to an element that gets focus, so what you can also do it to wrap the element that you need to be scrolled to into <a>...</a> and then when you need scroll just set the focus on that a