CODEWITHSUNDEEP
jquerypdfjquery-selectors
codef0rmer
codef0rmer

Reputation: 10530

How to overlay an image on top of a pdfviewer embeded into html page?

I'm using http://pdfobject.com/ jquery library to load the external pdf files into an html page. What I want to do is to overlay an Image at a specific position but I am struggling to fetch exact position of particular text inside the embedded pdf.

I'm going with not-so-valid solution using .mousemove() jquery function to track the mouse positions inside a div tag but the positions (pageX,pageY) remain the same even after scrolling the div.

http://jsfiddle.net/2rZw9/

How to achieve this?

As I know this solution is not viable in case of zoom in/out within a pdfviewer, Is there any other alternative available to overlay any object/element over a pdf viewer as accurately as possible?

Upvotes: 0

Views: 1567

Answers (2)

user1306338
user1306338

Reputation:

You can put the higher z-index to an element you want to overlay on an iframe. For IE, bgiframe is a great jquery plugin.

More details: http://docs.jquery.com/Plugins/bgiframe

Upvotes: 1

scessor
scessor

Reputation: 16115

You can get the vertical scroll offset with jQuery scrollTop():

$('#coord').html(e.pageX + ' ' + ($(this).scrollTop() + e.pageY));

Also see the updated example.

Upvotes: 1

Related Questions