How to display pdf content in web page using html5 and jquery? - javascript

How to display pdf document inside my div. I am using HTML5 and jquery to build my mobile site. I need to display my pdf document inside a Turnjs div
need to flip pages and go to specific page

<div>
<object data="test.pdf" type="application/pdf" width="300" height="200">
alt : test.pdf
</object>
</div>
Read this thread - http://www.webdeveloper.com/forum/showthread.php?152923-PDF-within-a-DIV

You can use this code:
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Or use Google Docs embeddable PDF viewer:
<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>

Dare I speak it's name for fear of being castigated, but you could use an iframe and allow the browser to provide the navigation.

What I do is drag the pdf to google drive. Then, click on the new pdf (it will usually be upper left in google drive), click the share icon at the top, go to advanced, then click change and make sure the "Public" radio button is clicked. Click SAVE, then click DONE.
Now go back to google drive, click on the pdf to open it, then click the Pop-out icon (upper right, next to the X close icon). Once the pdf is now full screen, click the : more actions icon (three vertical dots) There you will find an "Embed" opportunity. Click that and you get the embed code. Voila!!
Note: The pdf gotten this way will be ready to paste into your blog or HTML website, AND any links in the document will work!! AND, there will be a little Pop-out icon in the upper right, upon hover, that makes the pdf full screen. And, you can pop it into a div if you want to put more than one on the page. Some examples are up at http://internetpdf.com.
John Burch

Related

Jumping toward text of CTRL-F inside iframe (pdf) embedded in page (js)

for a project I'm working on I have extracted certain sentences from a pdf (uploaded by a user) and I now embedded this pdf inside my page:
<iframe seamless
id="PDFdisplay"
src="pdfURL"
type="application/pdf"
height="1000px"
width="100%"></iframe>
Now when I press CTRL-F and enter one of the sentences I extracted, it does find this sentence back in the pdf (it gets selected) but it does not jump towards this section of the HTML page like it normally does (and like I want it to). I presume it has something to do with the iframe being a different 'window' but unsure. Does anyone know of a way I can search inside the iframe (using js/ts) or to embed the pdf inside the page in a way such that the page will jump to the results of the CTRL-F event (also enabled using js/ts)?
Thanks in advance!

Using Remodal JS with a Gallery in Expression Engine

Hope someone out there can possibly help - I'm using Expression Engine as the platform, and I am using Remodal (as a modal) to work alongside a gallery. The gallery page consists of multiple images in a masonry-style format, and what I am wanting is basically when the user clicks an image, the Remodal popup kicks in and shows the image in the popup. With the code below, the popup functionality is working no problem, however, the issue is, what ever image on the page you click, the first image and title displays in the popup, and not the image you expect to see (the one you click on).
From what I understand, I need to now use some Javascript in order to popup the image you click on, but I am no good at Javascript to be honest, so any help would be great.
This is the modal HTML:
{exp:channel:entries
channel="gallery"
dynamic="off"
limit="1"
url_title="{segment_3}"
}
<img src="{cf_gallery_image}" alt="{title}" />
<div class="gallery__title">{title}</div>
{if cf_gallery_copy != ""}
<div class="gallery__subtitle">{cf_gallery_copy}</div>
{/if}
{/exp:channel:entries}
So when you click any image on the gallery page, the code above displays a popup but of the first image on the page only, and not the image you expect to see.
The gallery HTML:
{exp:ce_img:pair
src="{cf_gallery_image}"
fallback_src="static/images/fabric-no-image.png"
width="360"
crop="no"
}
{/exp:ce_img:pair}
Thank you.
Mike

auto click a specific location on an iframe using javascript/html

I'm fairly new to html so basically I have an Iframe and I want it to auto click a specific location when a user enters a website. I want it physically click the google search button Is it possible to give a location for a click? If so it would be helpful to display some code. This is what i got so far.
<html>
<iframe src="http://www.google.com" width="700" height="500" frameborder="1">
<p>Your browser does not support iframes.</p>
</iframe>
</html>
Assuming you can load www.google.com into an iframe, you might try adding a query string onto the end of the URL.
Something like https://www.google.com/#q=my+search+criteria
The user doesn't click anything, but search results are loaded (assuming Google will let you load its website in an iframe).

how to get control over dowload button while viewing pdf in Iframe in jsp

I am using iframes in my Jsp page to display Pdf. It's working perfectly and showing pdf correctly .
Now I need to add an entry to database while downloading or take print using the icons shown in pdf. Is there any way in jquery or javascript to get the click event of that icons, so that i can insert an entry into database?
this is my jsp page,
<div class="m6" >
<iframe src="test.pdf" width="875" height="95%" id="iframe" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>
I am using servlet(pdfServlet) to display pdf. Any help will be appreciated.
The PDF is loaded into an application that is separate from the browser (although embedded in the browser) and there is no communication between the PDF application and the browser. So any events that occur in the PDF are not 'transmitted' to the browser and therefore cannot be captured.
I suggest that you redesign it so that the buttons are in the web page and therefore the click events are detectable.

Trigger click on embedded PDF

I have a PDF embedded in a web page using the following code:
<object id="pdfviewer" data='test_full.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='500px'
height='350px'>
The PDF itself is set to open in full screen mode which shows no controls. The user can advance the slides by clicking on the view.
What I'd like to have is some way to trigger that click so that I can advance 2 similar PDF:s side-by-side (one for the actual slideshow and one for the speaker notes). Is this possible to do in javascript and/or jQuery? I have tried using the click()-method but it doesn't get through to the embedded PDF.
Update: Can't find any info on it, so I guess I'm out of luck and have to try a workaround. Am currently juggling 3 embeds of the same pdf (current page, next page and previous page), hiding and showing them and loading more pages as the user clicks around.
I doubt it. Allowing web page scripts to pass input events to the PDF viewer could be a security risk (since the viewer generally has access to system file dialogues via things like Save As).

Categories