Sticky notes on top of any page?

[Nazik us]

Hi,

I'm trying to develop a browser extension with your sticky notes plugin. I'm struggling to have a sticky note appear on top of any page.

I have tried to add a <div> on top of the page (position:absolute), and then add sitcky note to it. But the problem in such case is that the page content is unaccesible anymore (<div> is not click through, although is visually transparent). So I've tried to add pointer-events:none attribute to get a 'click-through' <div> but then StickyNote is not responding to clicks neither.

Any ideas how to work around this issue?

Here is the code I've used.

To add <div>:

var tree = $(document.createElement('div')).attr({

id: 'notes'

}).css({

position: 'absolute',

top: '10px',

width:  '800px',

height: '600px',

'pointer-events':'none',

'z-index': '10000'

}).appendTo(document.body);

To add sticky note:

var options = {notes:[{"id":1,

"text":"My Sticky note",

"pos_x": 50,

"pos_y": 50,

"width": 200,

"height": 200,

}]}

jQuery("#notes").stickyNotes(options);

Thanks