Customizing the Notes Panel

Skip to first unread message

Matt Parizeau

Oct 28, 2016, 7:26:14 PM10/28/16
to PDFTron WebViewer

I would like to be able to update the notes in the notes panel so that each user has their own color. Is it possible to do this? I would also like to have a down arrow at the bottom of the notes panel if there are annotations on the following pages.


If you want to customize the notes in the panel you can listen to the noteCreated event which will give you access to the note DOM element. For example:

$(document).on('noteCreated', function(e, annotation, element) {
var userName = element.find('.noteAuthor').text();

Depending on what you want to do exactly the implementation might be different but the following code should get you started. Basically it will return true if there is a note outside of the view. You'll probably want to update it to take into account the current scroll position of the notes panel [e.g. $('#notesPanel').scrollTop()] depending on how you want to use it:

function shouldShowArrow() {
var showArrow = false;
var panelElements = $('#notesPanel').find('.panelElement');
var viewportHeight = $('#DocumentViewer').height();

if (panelElements.length > 0) {
.each(function(index, ele) {
if (parseFloat( > viewportHeight) {
= true;
return false;
return showArrow;

Reply all
Reply to author
0 new messages