What do you call those thingies that pop-up and scroll with you as you scroll down?
For example: https://news.yahoo.com/california-holds-cruise-ship-offshore-075705456.html
As you scroll down the page, the video positioned at the top of the page appears as a pop-up in the lower right of the screen and stays there as you scroll down. This is annoying to me for several reasons. First, it seems like every time there is a FireFox update, they change how you stop video autoplay. So, many times when I scroll, that pop-up video starts playing and I don't want it to autoplay. Second, many times I click on the "X" to close the thingie, scroll down some more, and, it pops up again - some times playing again. Third, I seem to have no control of this type of thingie and I don't know what possible damage it can do to my computer. And, yes, you will see this thingie on certain types of web sites where the semi-naked girl rolls up from the bottom, dances, and, then rolls away.
I am a novice/intermediate web developer, so, I am familiar with what HTML and Javascript can do. I use ADBlock Plus in Firefox, but, when I try to block that element, it doesn't seem to be able to identify it. I am guessing that this type of thingie is a Javascript script, but, looking at the page's source code, I can't identify what is producing this effect.
Other than calling it a generic "pop-up", does this type of thingie have a name (so that I can research further with Google)? How is it generated? How can I identify it in the source code? What can I do to control, stop, or, block it?
All Replies (11)
I don't know the generic name of those little videos, but maybe pop-out or overlay?
On that page, the critical class is vp-docked, this is why it doesn't scroll out of view:
.vp-docked {
position: fixed !important;
z-index: 9999;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
Since fixed position is "!important" you might not be able to override that, but if you aren't set on putting it back in its place, you could completely suppress it with something like this:
.vp-docked {
display: none !important;
}
Until they change the class name...
By the way, I discovered that by using right-click > Inspect Element, then moving up through the HTML tree and looking for the highest level element surrounding that video.
You can also try to unset the z-index: 9999; => z-index: unset !important; to prevent the pop-up from staying on top.
I'm seeing this differently for the Yahoo Video Player if I check this in the Inspector.
jscher2000 said
I don't know the generic name of those little videos, but maybe pop-out or overlay? On that page, the critical class is vp-docked, this is why it doesn't scroll out of view:.vp-docked { position: fixed !important; z-index: 9999; box-shadow: 0 0 10px rgba(0,0,0,0.2); }Since fixed position is "!important" you might not be able to override that, but if you aren't set on putting it back in its place, you could completely suppress it with something like this:
.vp-docked { display: none !important; }Until they change the class name...
I don't follow you. How can I suppress a web page on somebody else's site with what you presented here?
cor-el said
You can also try to unset the z-index: 9999; => z-index: unset !important; to prevent the pop-up from staying on top. I'm seeing this differently for the Yahoo Video Player if I check this in the Inspector.
Again, I don't think I follow. This is happening as a browse somebody else's site.
Have you heard of Stylus? It inject your style rules into pages as you browse.
https://addons.mozilla.org/firefox/addon/styl-us/
Alternately, there are ways to create filter rules for ad blocking extensions that works similarly.
jscher2000 said
Have you heard of Stylus? It inject your style rules into pages as you browse. https://addons.mozilla.org/firefox/addon/styl-us/ Alternately, there are ways to create filter rules for ad blocking extensions that works similarly.
OK, I will look into this. But, if I follow correctly, you looked at the specific page I linked to and found that it used ".vp-docked". I would assume that class name is not used on every page where I have seen this thingie. So, if I deal with ".vp-docked" for that page, it may not work on other pages - right?
I am looking for a way to deal with these thingies in a broader way. Like, how did you figure out that ".vp-docked" was the culprit? Yes, I know how to do "Inspect Element", but, then what specifically do I look for and how will I know when I have found it?
I'm sure there is a huge variation and it changes all the time. That's the adventure of it.
With respect to the CSS class vp-docked, I could see it had a position:fixed rule which sticks that element to a particular spot in the viewport of the browser regardless of scroll position. That was the tip-off.
https://developer.mozilla.org/docs/Web/CSS/position
By the way, if certain sites are too annoying, you could look for alternatives.
jscher2000 said
I'm sure there is a huge variation and it changes all the time. That's the adventure of it. With respect to the CSS class vp-docked, I could see it had a position:fixed rule which sticks that element to a particular spot in the viewport of the browser regardless of scroll position. That was the tip-off.
OK, that is a good tip of what to look for.
https://developer.mozilla.org/docs/Web/CSS/position By the way, if certain sites are too annoying, you could look for alternatives.
Well, it seems to be showing up more and more on different sites. My guess is that is because those web developers have found a way to get around the ad blockers and that people like us have not found a way to block them yet. That is why I made my original post - to see if there was a known way to deal with these thingies.
Thanks for your help.
jscher2000 said
By the way, if certain sites are too annoying, you could look for alternatives.
I think that the first place I noticed these thingies (other than the dancing woman) is Yahoo.com which is where I go a lot to see a range of stories. Given your identification of "position: fixed", I Googled that and ran across a forum thread from 2011 where they linked to this:
https://help.eyeo.com/en/adblockplus/how-to-write-filters#elemhide
It seems that the approach with AdBlock is to work with "element hiding". I kinda skimmed through that page, but, it looks a bit more advanced than where I am at right now. It looks like I could set up a filter for Yahoo.com, so, maybe you or somebody else can figure it out.
the_steve_randolph said
It seems that the approach with AdBlock is to work with "element hiding". I kinda skimmed through that page, but, it looks a bit more advanced than where I am at right now. It looks like I could set up a filter for Yahoo.com, so, maybe you or somebody else can figure it out.
They have a forum: https://adblockplus.org/forum/viewforum.php?f=1