Skip to content

Navigation Menu

Sign in
Sign up

Run javascript after annotations have been highlighted? #5046

tomcritchlow started this conversation in General
Discussion options

Hey, I have hypothesis embedded on my blog website. I'm trying to style the annotations so that they have a little comment icon next to them (to better signal to readers that yellow highlight = annotation).

I have some code like this:

var ps = document.getElementsByTagName("p");
for(var i = 0; i < ps.length; i++){
 if(ps[i].querySelector("hypothesis-highlight") !== null){
 var clone = commenticon.cloneNode(true);
 ps[i].prepend(clone);
 }
}

Which adds a commenticon div next to the annotation highlight.

My question: how do I run this function only after the highlights have finished loading? Is there a callback or something I can hook into?

Thanks

You must be logged in to vote

Replies: 2 comments

Comment options

My question: how do I run this function only after the highlights have finished loading? Is there a callback or something I can hook into?

MutationObserver should be of help.

You must be logged in to vote
0 replies
Comment options

style the annotations so that they have a little comment icon next to them (to better signal to readers that yellow highlight = annotation).

You could also use the CSS ::before pseudo-element with an emoji or a background image.

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /