Javascript - Detect when the style changes are reflected?

Question

I have a browser extension that takes a screenshot of the visible page (using the browser's API).

The user initiate the process by a custom context menu, injected into webpages.

wrapper.addEventListener("contextmenu", function(e) {
    //prevent default context menu
    e.preventDefault();
    menu.style.display = "block";
});

menu.addEventListener("click", function click(e) {
    e.preventDefault();
    e.stopPropagation();
    //prevent the appearance of the menu in the screenshot
    menu.style.display = "none";
    capture();
}, false);

The problem is that the menu is still visible in the screen capture. Is there a way to detect when the style changes are reflected ?

Thanks.

Why not use a print stylesheet, and just `display: none` the relevant element? — David Thomas, May 13 '13 at 22:53
The element I hide is the context menu itself, I change it between visible/hidden via code because how else can a user click on it, if it was already hidden. (i.e. I hide it only when the user clicks on it) — Red John, May 13 '13 at 22:58
possible duplicate of [How can I force WebKit to redraw/repaint to propagate style changes?](http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes) or [Force DOM redraw/refresh on Chrome/Mac](http://stackoverflow.com/q/8840580/1048572)? — Bergi, May 13 '13 at 23:02
It's not the same. The changes to the element's style is applied fine, I just want to be able to know when it has completed. For example (http://i.imgur.com/3yTIKVU.png) Notice the element is visible while taking the screenshot. But after few milliseconds it will be hidden normally. — Red John, May 13 '13 at 23:15

score 0 · Accepted Answer · answered May 14 '13 at 01:19

I solved it by attaching an extra listener to the parent element (dunno why it works though)

wrapper.addEventListener("contextmenu", function(e) {
    //prevent default context menu
    e.preventDefault();
    menu.style.display = "block";
});

wrapper.addEventListener("mousedown", function(e) {
    //can't use "display: none" before mouseup
    menu.style.opacity = 0;
}, false);

menu.addEventListener("click", function click(e) {
    e.preventDefault();
    e.stopPropagation();
    //prevent the appearance of the menu in the screenshot
    menu.style.display = "none";
    capture();
}, false);

score 0 · Answer 2 · answered May 14 '13 at 06:51

0

Most likely putting the call to capture inside a setTimeout with a suitable delay will do the trick for you.

answered May 14 '13 at 06:51

Javascript - Detect when the style changes are reflected?

2 Answers2