This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

What do you call those thingies that pop-up and scroll with you as you scroll down?

more options

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?

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)

more options

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...

more options

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.

more options

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.

more options

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?

more options

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.

more options

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.

more options

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?

more options

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.

more options

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.

more options

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.

more options

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