I'm trying to scrape google play store page after search is done, i.e. this one:
https://play.google.com/store/search?q=stackoverflow&c=apps
As you can see, new apps load when you scroll to the end of page, and sometimes there appears an 'Show more' button also. I'm making an bookmarklet which needs to do all this scrolling, but I can't make it work. This is my current code:
var appContainerDiv = document.getElementsByClassName("card-list two-cards")[0];
var numberOfApps = appContainerDiv.childNodes.length;
var numberOfApps2 = numberOfApps;
do {
numberOfApps = numberOfApps2;
window.scrollTo(0, document.body.scrollHeight);
if (document.getElementById('show-more-button') !== null) {
document.getElementById('show-more-button').click();
}
numberOfApps2 = document.getElementsByClassName("card-list two-cards")[0].childNodes.length;
}
while (numberOfApps2 > numberOfApps);
appContainerDiv is div in which all apps are nested.
var delay = 2000;
var height = document.body.scrollHeight;
window.scrollTo(0, document.body.scrollHeight);
var interval = setInterval(function() {
window.scrollTo(0, document.body.scrollHeight);
if (document.getElementById('show-more-button') !== null) {
document.getElementById('show-more-button').click();
}
if (height == document.body.scrollHeight) {
clearInterval(interval);
}
} else {
height = document.body.scrollHeight;
}
}, delay);
Related
Is there any easy way how to set Y position of the screen by the element?
Tried to do with scrolling but didn't make wanted effect, so maybe setting screen view position would do the trick.
have a div with string:
Function is in use with elementor (wordpress) toggle tabs which generating anchor links for tabs and they making a trick which opens exact tab by link.
<script type="text/javascript">
jQuery(document).ready(function($){
setTimeout(function(){
var current = window.location.href;
var current = current.split('#tab');
if(current.length>1) {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-title[data-tab="'+current[1]+'"]').addClass('elementor-active');
$('.elementor-tab-content').hide();
$('.elementor-tab-content[data-tab="'+current[1]+'"]').show();
}
}, 200);
$('.elementor-tab-title[data-tab]').click(function(){
var current_location = window.location.href;
current_location = current_location.split('#');
window.location = current_location[0]+'#tab'+$(this).attr('data-tab');
})
})
jQuery(document).ready(function ($) {
setTimeout(function () {
var current = window.location.href
var current = current.split('#tab')
if (current.length > 1) {
showAndScrollToTab($, current)
}
}, 200);
// change the browser url according to selected tab
$('.elementor-tab-title[data-tab]').click(function () {
var current_location = window.location.href;
current_location = current_location.split('#')
window.location = current_location[0] + '#tab' + $(this).attr('data-tab')
})
// activate tab also from anchor link in the same page
$('a').on('click', function () {
var anchorUrl = $(this).attr('href')
var anchor = anchorUrl.split('#tab')
if (anchor.length > 1) {
showAndScrollToTab($, anchor)
}
})
})
function showAndScrollToTab($, current) {
// adding class
$('.elementor-tab-title').removeClass('elementor-active')
$('.elementor-tab-title[data-tab="' + current[1] + '"]').addClass('elementor-active')
// scroll to
var customOffset = '20';
$([document.documentElement, document.body]).animate({
scrollTop: $('.elementor-tab-title[data-tab="' + current[1] + '"]').closest('.elementor-widget-container').offset().top - customOffset }, 1000)
}</script>
Html in use for toggle tab headings:
<div class="elementor-toggle-item">
<div id="elementor-tab-title-2287" class="elementor-tab-title elementor-active" data-tab="7" role="tab" aria-controls="elementor-tab-content-2287">
How to modify the function for making device screen view top is 40px to the .elementor-tab-title[data-tab="' + current[1] + '"] div? Is it possible to adjust offset from div element to top by device (mobile, tablet, desktop)?
Any other solutions are welcome how to do that!
I used some code I found here: scroll a full page height up or down with jQuery/Javascript
From the link on answer 3. By setting the DIV ID to 'page1', 'page2' etc. it scrolls a full page at a time.
It works ok, but 'takes over' all scrolling. I need to be able to have the user press a CTA button, and it scroll down 3 pages. But it scrolls down 3 pages, then back up 2 (because that's 'current page + 1').
Here's the code for forcing a full page scroll:
var pages = 7;
var currentpage = 1;
if (document.location.hash) { currentpage = parseInt(document.location.hash.replace('#', '')); }
var nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; }
var prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; }
var animatingup = false;
var animatingdown = false;
jQuery(window).scroll(function(event) {
if (animatingup==true) { return; }
if (animatingdown==true) { return; }
nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; }
prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; }
if (animatingup == false) {
if (jQuery(window).scrollTop()+jQuery(window).height()>=jQuery("#page"+(nextpage)).offset().top+50) {
if (nextpage > currentpage) {
var p2 = jQuery( "#page"+(nextpage) );
var pageheight = p2.position().top;
animatingdown = true;
jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
return;
}
}
}
if (animatingdown == false) {
if (jQuery(window).scrollTop()<=jQuery("#page"+(currentpage)).offset().top-50) {
if (prevpage < currentpage) {
var p2 = jQuery( "#page"+(currentpage) );
var pageheight = p2.position().top-jQuery(window).height();
animatingup = true;
jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = prevpage; animatingup = false; document.location.hash = currentpage;});
return;
}
}
}
});
I thought I could just force the page/DIV ID number to change with this:
jQuery('#ctabut').click(function(){
currentpage = 6;
});
but it still scrolls to DIV ID 'page7' then back up. Any ideas on a) a better way to scroll full pages, b) how to override the scroll on button click c) how to implement the JS code ONLY on the home page (it's a wordpress site) - really appreciated.
It's only a dev site so can't point to it. My code skills are very limited - so feel free to speak to me like I'm simple :)
Well, as often happens, I resort to the forums and then work it out.
If I replace my 'button code' jQuery with this:
jQuery('#ctabut').click(function(){
var p2 = jQuery( "#page7" );
var pageheight = p2.position().top;
animatingup = true;
jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = 7; animatingup = false; document.location.hash = 7;});
});
it sets all the variables properly and prevents the 'bounce back'.
I post the answer in case anyone as noob as me wants to create their own simple 'whole page scroller' without using a big pre-made library like fullpage.js
I know the scrollBy functions but is it possible to scroll down a web page with a command typed in the JavaScript console, so that the page automatically scrolls with the passed parameters?
Typing the function
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
and then calling it does nothing in Chrome.
Give this a try; I use it myself often.
(function() {
var intervalObj = null;
var retry = 0;
var clickHandler = function() {
console.log("Clicked; stopping autoscroll");
clearInterval(intervalObj);
document.body.removeEventListener("click", clickHandler);
}
function scrollDown() {
var scrollHeight = document.body.scrollHeight,
scrollTop = document.body.scrollTop,
innerHeight = window.innerHeight,
difference = (scrollHeight - scrollTop) - innerHeight
if (difference > 0) {
window.scrollBy(0, difference);
if (retry > 0) {
retry = 0;
}
console.log("scrolling down more");
} else {
if (retry >= 3) {
console.log("reached bottom of page; stopping");
clearInterval(intervalObj);
document.body.removeEventListener("click", clickHandler);
} else {
console.log("[apparenty] hit bottom of page; retrying: " + (retry + 1));
retry++;
}
}
}
document.body.addEventListener("click", clickHandler);
intervalObj = setInterval(scrollDown, 1000);
})()
It might show you an error "too much recursion"
You should try setInterval() instead of setTimeout(). Check this sample code for that.
setInterval(function(){
window.scrollBy(0,50);
},100);
I have a "follow scroll" function, but I want it to turn off when it returns to a certain point. My code is as follows:
scrollSidebar: function(scroll) {
var elemPos = $('#bestvideos-2').offset().top,
scroll2 = scroll;
if(scroll2 >= elemPos) {
$('#bestvideos-2').animate({
'margin-top':(scroll - 315)+'px'
},0);
} else {
$('#bestvideos-2').css('margin-top','0');
}
}
$(window).scroll(function() {
var scrollHeight = $(window).scrollTop();
Scroll.scrollSidebar(scrollHeight);
})
The problem is - every time I get up, it goes way up, not following scroll. What I'm thinking is storing a variable elemPos somewhere and keep it static (now it's changing each time I scroll).
What can I do with this?
Pass the value to the scrollSidebar function - make sure that the var elemPos = $('#bestvideos-2').offset().top is executed on dom ready
scrollSidebar: function (elemPos, scroll) {
var scroll2 = scroll;
if (scroll2 >= elemPos) {
$('#bestvideos-2').animate({
'margin-top': (scroll - 315) + 'px'
}, 0);
} else {
$('#bestvideos-2').css('margin-top', '0');
}
}
var elemPos = $('#bestvideos-2').offset().top
$(window).scroll(function () {
var scrollHeight = $(window).scrollTop();
Scroll.scrollSidebar(elemPos, scrollHeight);
})
function yHandler () {
var show = document.getElementById('show');
var contentHeight = show.offsetHeight;
var yOffset = show.pageYOffset;
var y = yOffset + show.innerHeight;
if(y >= contentHeight) {
alert("ok")
}
}
show.onscroll = yHandler;
how to check if the scrollbar has reached the end of div?
Some code for you to work on:
var scroll = document.getElementById('scroll');
var content = document.getElementById('content');
scroll.onscroll = function(){
var total = scroll.scrollTop + scroll.clientHeight;
if(total == content.clientHeight)
alert('Reached bottom!');
}
http://jsfiddle.net/EY6qP/
Thor's method works perfectly well (+1), but you could also rely on scrollHeight.
(function(scroll){
scroll.onscroll = function(){
if (scroll.scrollTop + scroll.clientHeight == scroll.scrollHeight) {
console.log('hither!');
}
}
})(document.getElementById('scroll'));
Use scrollHeight, scrollTop and clientHeight attributes to detect the scroll bar reached bottom end or not.
function handleScroll() {
var div = document.getElementById("div-id");
if(Math.abs(Math.round(div.scrollHeight - div.scrollTop) - div.clientHeight) > 3) {
console.log("Scroll bar reached bottom end");
return true;
}
return false;
};