Scroll with JavaScript. Scroll rows of pictures on Flickr.

 

Saturday, December 15, 2012 7:15:45 AM

JavaScript, UserJS

• Scroll rows of pictures on Flickr
• Scroll websites in a different way each.
• Scroll to specific webpage element (e.g. comments section)

Scroll rows of pictures on Flickr (it works for two or three columns of pictures).
The script scrolls to the next picture which is not in full view on flickr.com and it scrolls page down on other websites.

Scroll = function(){
if(window.location.hostname.match('flickr.com'))
{function InFullView(el){var rect=el.getBoundingClientRect(); 
return(rect.top >= 0 && rect.top + el.clientHeight < window.innerHeight)};
var pics=document.getElementsByClassName('photo_container pc_m');
for(i=0;i<pics.length;i++)
{if(!InFullView(pics[i]) && pics[i].getBoundingClientRect().bottom >pics[i].clientHeight )
{pics[i].scrollIntoView(); break;}}}
else
{window.scrollBy(0,window.innerHeight - 30)}
}

It should be called by a mouse gesture or a keyboard shortcut

Space= Go to page,"javascript:Scroll()"

or with JavaScript off:

GestureLeft, GestureDown=Enable javascript & Delay, 10 & Go to page,"javascript:Scroll()" & Delay,100 & Disable javascript

The script can be used for scrolling differently on specific websites. For instance it can scroll on flickr as explained, it may scroll on other websites to "comments section" , etc..
Like this:

Scroll = function(){
if(window.location.hostname.match('sport.pl') 
|| window.location.hostname.match('gazeta.pl'))
{document.getElementById('opinions').scrollIntoView();}

else if(window.location.hostname.match('wordpress.com'))
{function InView(el){var rect=el.getBoundingClientRect(); 
return(rect.bottom >= 200 && rect.top <= window.innerHeight)};
var tags=document.getElementsByTagName('div');for(i=0;i<tags.length;i++)
{if(tags[i].className.search(/post-[0-9]+ post/gi)!=-1 && InView(tags[i]))
{var clas=tags[i].className;
 var x = document.getElementsByClassName(clas)[0].getElementsByClassName('entry')[0];
 window.scroll(0,x.offsetTop+x.clientHeight+60); break;}}} 

else if(window.location.hostname.match('blogspot.com') && !window.location.pathname.match('/[0-9]{4}/[0-9]{2}')) 
{function InView(el){var rect=el.getBoundingClientRect(); 
return(rect.bottom >= 200 && rect.top <= window.innerHeight)};
var posts=document.getElementsByClassName('post hentry');
for(var i=0;i<posts.length;i++)
{if(InView(posts[i]))
{posts[i+1].scrollIntoView();
break;}}} 

else if(window.location.hostname.match('flickr.com'))
{function InFullView(el){var rect=el.getBoundingClientRect(); 
return(rect.top >= 0 && rect.top <= window.innerHeight && rect.top + el.clientHeight < window.innerHeight)};
var pics=document.getElementsByClassName('photo_container pc_m');
for(i=0;i<pics.length;i++){
if(!InFullView(pics[i]) && pics[i].getBoundingClientRect().bottom >pics[i].clientHeight )
{pics[i].scrollIntoView(); break;}}}

else if(document.getElementsByClassName('comments')[0])
{document.getElementsByClassName('comments')[0].scrollIntoView()}
else if(document.getElementById('divComment'))
{document.getElementById('divComment').scrollIntoView()}
else if(document.getElementById('comments'))
{document.getElementById('comments').scrollIntoView()}
else if(document.getElementById('komentarze'))
{document.getElementById('komentarze').scrollIntoView()}
else if(document.getElementById('art-komentarze'))
{document.getElementById('art-komentarze').scrollIntoView()}
else if(document.getElementById('dsq-content'))
{document.getElementById('dsq-content').scrollIntoView()}
else if(document.getElementsByClassName('formcolor')[0])
{document.getElementsByClassName('formcolor')[0].scrollIntoView()}
else
{window.scrollBy(0,window.innerHeight - 30)}
}

The script scrolls rows on flickr.com, scrolls full blog posts on blogspot.com and on wordpress.com (not on every one), scrolls to some comment sections if they exist, otherwise it scrolls "Page Down".

Add scrolling to Google picture:

...
else if(window.location.hostname.match('google.com') && document.getElementsByClassName('rg_i')[0])
{function InView2(el){var rect=el.getBoundingClientRect(); 
return(rect.top >= 0 && rect.top <= window.innerHeight && rect.top + el.clientHeight < window.innerHeight)};
var pics=document.getElementsByClassName('rg_i');
for(i=0;i<pics.length;i++)
{if(!InView2(pics[i]) && pics[i].getBoundingClientRect().bottom >pics[i].clientHeight )
{pics[i].scrollIntoView(); break;}}}
...

===============

Fix for the Yahoo! bar on top of the screen that shows for free accounts on Flickr:

Scroll = function(){
if(window.location.hostname.match('flickr.com'))
{function InFullView(el){var rect=el.getBoundingClientRect(); 
return(rect.top >= 0 && rect.top + el.clientHeight < window.innerHeight)};
var pics=document.getElementsByClassName('photo_container pc_m');
for(i=0;i<pics.length;i++)
{if(!InFullView(pics[i]) && pics[i].getBoundingClientRect().bottom >pics[i].clientHeight )
{pics[i].scrollIntoView(); window.scrollBy(0,- 50);break;}}}
else
{window.scrollBy(0,window.innerHeight - 30)}
}

Simply add: window.scrollBy(0,- 50);

Or remove the bar altogether by adding this CSS code to the site's style sheet.

#global-nav{display:none !important}