Greasy Fork

Help with making a hovering element that scrolls with you+with attaching to infinite scrolling event

I want to make a script (for instagram) that shows how many images out of total are currently visible when viewing a profile page (example).

So I'd like to ask your help about 2 things:

1. I'd like to display the info inside some hovering element/panel.
   It would appear on the upper right corner of the screen and it would scroll with you
   i.e it would be in the form of the "Thread Watcher" feature of 4chan's native extension -with it's setting "Pin Thread Watcher to the page" enabled-,
   in other words something that's subtle (screenshot), therefore it shouldn't be a popup, but hovering/overlay.
   How can I do that? I tried examing 4chan's extension code but couldn't understand how it's done.

2. Instagram's new layout offers infinite scrolling.
   So, I'd like my script -while viewing profiles- whenever infinite scrolling works(ie. when you scroll to the bottom of the page, and more images are automatically loaded) to re-calculate how many images are visible.
   Therefore, I think I should attach a mutationobserver to a page element.
   But, to what element should I attach it to?

1. element.style.position = "fixed" pins to screen and "absolute" pins to page, there are many examples on the net.
2. document.body for example

Thanks a lot for the reply.

Here is my completed userscript:

// @name        Instagram - visible images counter
// @include     https://instagram.com/*/
// @grant       none

var p = document.getElementsByClassName('-cx-PRIVATE-PostsGridItem__root');
var m = document.getElementsByClassName('-cx-PRIVATE-PostsStatistic__count');
var ww = m[0].innerHTML.replace(/(\d+),(?=\d{3}(\D|$))/g, "$1");                       // // Regex to strip the thousand comma seperator from the posts number
var z = (p.length/ww)*100;

var counter = p.length+' / '+m[0].innerHTML +' that is ' +z.toFixed(1) + '%';



var div = document.createElement("div");

div.style.top = "1px";
div.style.right = "1px";
div.style.position = "fixed";


document.body.appendChild(div);

div.id="mycounter";

mycounter = document.getElementById('mycounter');
mycounter.innerHTML = counter;
mycounter.style.top = "1px";
mycounter.style.right = "1px";
mycounter.style.position = "fixed";



/// ---------------------------------
/// mutation observer -monitors the Posts grid for infinite scrolling event- 
/// ---------------------------------
var target1 = document.querySelector('.-cx-PRIVATE-PostsGrid__root');

var observer1 = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    p=document.getElementsByClassName('-cx-PRIVATE-PostsGridItem__root');
    m = document.getElementsByClassName('-cx-PRIVATE-PostsStatistic__count');
    ww = m[0].innerHTML.replace(/(\d+),(?=\d{3}(\D|$))/g, "$1");
    z = (p.length/ww)*100;
    counter = p.length+' / '+m[0].innerHTML +' that is ' +z.toFixed(1) + '%';    
    mycounter.innerHTML = counter;
  });
})

var config = { attributes: true, childList: true, characterData: true }

observer1.observe(target1, config);

It works ok, but I have this issue:

the script doesn't work when opening a profile URL in the same tab while in my timeline (https://instagram.com).
It only works when I open the profile in a new tab.
How can I fix this?

Instagram probably uses single-page application workflow and changes page address through js without actually reloading the page.

1. Try an event handler for some event fired by the Instagram site like pjax:end on github, for example.
2. Use a mutation observer that waits a profile-specific html element.
3. Or use setInterval to check location.href periodically.

3 Or use setInterval to check location.href periodically

Sorry, about your 3rd suggestion:
what should I do after checking the current page URL periodically?
What do you mean?
(Note that with // @include https://instagram.com/*/ my script only works on profile URLs, not in timeline too)

Well, then you should use @include https://instagram.com/*

Ok. Thank you very much.

I'll keep trying.