PDF jQuery Flip book plugins - javascript

I have been surfing the net for hours now, there are many jquery flip book plugins that works using content in HTML or with images. But I need a plugin that can use PDF to load pages in the flip book & it has to work on IE 8 as well so no HTML5.
If anyone know such a plugin please let me know, I don't want to use flash as it isn't flexible enough for my work.

Take a look here, pdfjs + turnjs:
http://www.maxims6n.bget.ru/pdf_books/demo_21.html

You can use this library to convert PDF to flipbook with jquery. You just need to include the library and call the plugin like this:
<a title="Demo" subtitle="Test" showdownload href="https://heyzine.com/files/uploaded/bf8cb8abcd9f0c6da8680e6bdf1b7bf0cfb7ca51.pdf">example</a>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://heyzine.com/release/jquery.pdfflipbook.1.js"></script>
<script type="text/javascript">
$('a').pdfFlipbook();</script>
</script>
You can also check the demo here: https://heyzine.com/site/demo

There are some PDF to flipbook converters/software available which offers Flash and HTML5 both. If anyone tries to access the digital edition on a cell phone or any other platform which do not support flash, then the digital edition automatically serves HTML5 for the best flipping effect.
Not sure if you have tried some of the followings.
http://smashfreakz.com/2012/09/jquery-page-flip-book-plugins/
http://www.enough.pro/best-5-jquery-flipbook-plugins/
I hope you can customize the code if need additional functionality.

You could do that with DFlip jQuery Plugin which supports PDF, even in as low as IE8.
It can used very easily with just HTML
<div class="_df_book" source="books/dflip manual.pdf" id="df_test_book"></div>
Or if needed, it can be further customized with JavaScript options.

A project called "PDF Flipbook" on GitHub uses jQuery with the turnjs and pdfjs libraries to display PDF files in a flipbook style. https://github.com/erayakartuna/pdf-flipbook

The FlexPaper Zine viewer does precisely what you're after. It also degrades gracefully when it is not able to use HTML5 so that older browsers also have a chance of viewing your publication
You can have a look at it here:
http://devaldi.com/zine/NZ_Tourism_2007.php?ro=html5,flash
Here's more info on licensing etc:
http://flexpaper.devaldi.com/flexpaper_flip_zine.jsp

Related

Is there any Javascript document viewer engine with text highlighting API?

I need a javascript doc viewing engine with some text highlighting API.
Can you advise anything?
give try to WebODF it is a JavaScript library that add Open Edit Document Format (ODF) support to your website and to your mobile or desktop application. It uses HTML and CSS to display ODF documents.
and opensource also :)
http://webodf.org/

PDF.js not working on IE9

Does anyone have any clue how to get PDF.js to work on IE 9? I have tried everything I can think of to get it to work and no go. I have downloaded the hack.js file and tried adding it before and after pdf.js and before and after viewer.js. That didn't work.
I then tried downloading compatability.js, viewer.js and pdf.js from their Demo (Which I can confirm is working 100% in IE9) and put them into my HTML page, no go. I am using their PDF file, which some sites say that some PDFs work and others don't. So I figured if it worked on their site it must work on mine--but no go.
The Demo of theirs works fine, but anytime I try to get mine to work in IE9, whether I use their files or my compiled version, it doesn't work.
Try to load compatibility.js before pdf.js. Something like this:
<script type="text/javascript" src="/js/compatibility.js"></script>
<script type="text/javascript" src="/js/pdf_compr.js"></script>
Browser support in their FAQs - check this as since the question was asked IE9 could have be supported: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#what-browsers-are-supported
PDF.JS and IE9 doesn't play too well together and I wouldn't rely on it if you want to support IE 9. Some of the rendering features in PDF.JS are not well progressed enough to be useable in IE9
There are ways to get around this, you can use FlexPaper which can be used in combination with PDF.js and a HTML4 version for browsers without HTML5 support
http://flexpaper.devaldi.com/demo/
(note; I am affiliated with FlexPaper product)

Document Previews in Browser

Is there some way to preview documents in browser? Specifically in say an iframe within a page, as opposed to opening the doc in a new tab? I have a list of files of any type and when a user clicks on one, want to open it in a readonly format. If that file is a video or audio file, that's easy enough, but I'd like to be able to also do pdfs, word docs, maybe excel. Preferably it would be in a cross browser friendly way but if I need to do detection for a plugin (I've seen Google Docs Viewer for FF) I can live with that.
UPDATE:
ShaneC's answer is great and will work well in general. The one hitch I see is that for html5 devices (think ipad), I need to convert the document into a series of images. Is there any way for me to do this in an automated fashion? I need to be able to do this automatically when a new document is uploaded.
You'll want to integrate a cross-browser cross-type document viewer. Google will give you some good sites, personally I've had good experiences with Flex Paper.
For demos, see here: http://flexpaper.devaldi.com/demo/
There is another approach that can be used to view images/pdf/xlsx/docx etc.
You can use iframe and google's gview in the following way:
const YOUR_URL = https://calibre-ebook.com/downloads/demos/demo.docx;
<iframe
className="doc"
src={`https://docs.google.com/gview?url=${YOUR_URL}&embedded=true`}
/>
There is the Javascript ViewerJs. An open source tool which allows a website to display PDF and open standard for office documents. It will display the documents inline and without browser plugins.

How can I target jQuery mobile capable phones?

I've made a web-app using the jQuery Mobile framework for which I would like to provide a fall-back, for lower-spec phones.
My question is... what is the best way to target JQM-capablephones? I saw a similar question posted on the jquery forum. One of the answers suggested http://detectmobilebrowser.com/ which provides a long list of handsets.
Is this the best way, or should I be testing for browser-capabilities rather than actually targeting handsets. If it is the latter what feaures are considered to be 'Grade-A' featues?
Cheers
Progressive enhancement is what you should aim for, jQuery allows you to have a single codebase and have it work across the range of devices.
Consider this:
All links to other pages are regular html links, links will still work without AJAX support because they'd just send you to the location of the required page
All major framework elements are built around lists, links, and a few divs. No HTML5 required for rendering content
At the bare minimum, all phones can display a good amount of styling, allowing you to display the content no matter how capable
Do you have custom interfaces which wouldn't work at all without full support for jQuery mobile?
I agree that graceful degradation is the best solution. I would add that using the noscript tags is also a good way to provide graceful degradation by adding adding functionality via HTML for phones that have no support for JS.
I think it will be difficult to find a browser-capability (or even a set) that defines whether the phone will work with JQM. In my own experience I have used WURFL, an open source device detection library, that provides capability information. However I used it to target specific devices to include device specific CSS and remove all JS for other devices that I know do not support it (to remove the overhead of the JS being downloaded).
WURFL: http://wurfl.sourceforge.net/
JQM advertises that it provides graceful degradation:
Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don’t consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they’ll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.
I have also tested multiple JQM pages in a single mobile page which work great (very speedy) in JQM but suffer from the same problem mentioned (all pages show up when javascript is turned off in the browser of a smart phone). To work around this issue, only use a single page per JQM page (you give up speed and uniform page transitioning though). In regards to the NOSCRIPT tag option, that tag is NOT universally recognized in all browsers. To work around that issue, you could try something like the following:
<div id="no-js">
<!-- Place HTML without javascript here -->
</div>
<div id="js">
<script language="javascript">
// place javascript here which would be ignored by browsers not support javascript or with
// javascript turned off
document.getElementById("no-js").style.display = "none"; // be sure to hide the non javascript
// div
</script>
</div>
The above logic would work in either NOSCRIPT tag type browsers as well as those that do not recognize NOSCRIPT.
dlausch

What is the code behind this javascript?

I'm trying to find out how they were able to create this site. http://www.cpeople.ru, i am trying to build my portfolio to look something like it. Particularly, I want the slider effect of the menu. Please help me out. Thanks. :)
Look at the source code, it's quite open. They're using jQuery with the jCarousel and Mousewheel plugins. On top they have two custom scripts called f.js and portfolio.js, which are plainly readable as is.
Look into free JavaScript frameworks, particularly jQuery UI. jQuery can do plenty of special effects, and it's quite easy to use.
If you look at the source of the linked webpage, you can see it uses jQuery and two jQuery plugins, jCarousel and mousewheel.
Be sure not to copy swathes of code from existing websites (unless it is expressly permitted, as is the case with jQuery), as that would be copyright infringement.
Try chrome sniffer if you use google chrome.

Categories

Resources