DearFlip jQuery Flipbook Plugin

  2. Home
  4. Docs
  6. DearFlip jQuery Flipbook Plugin
  8. Support and FAQs

Support and FAQs

How do I get faster support and help?

We recommend using the contact form on our support page. You can leave a comment in the comment section too, But that will be a bit slower and has a limitation with sharing extra info like screenshots and private information like website URL.

Before contacting us, please make sure that you:

  1. Read the documentation carefully,
  2. See this Support FAQs

If you didn’t find the answer to your problem, please ask your question on the item discussion page or send us a private message from our support page and we will reply via email.

IMPORTANT! 
For fast troubleshooting, please send us detailed information about the issue. Also, make sure that you don’t forget to send us your site URL where you are using/want to use the item. Please note, that we cannot troubleshoot efficiently from screen-shots.
Please take some time until we respond (usually in 24 – 48 hours).

Contents hide
1 How do I get faster support and help?
2 PDF and FlipBook Loading issues:
2.1 Why is PDF loading slowly?
2.2 There is a CORS (Cross-Origin) issue and PDF is not loading!
2.3 Amazon S3 CORS:
2.4 Make PDF optimized for web purpose:
3 Customization
3.1 How to change thumb size for lightbox popups?
3.2 How to change the color of Bookmark / Outline?
3.3 How to change the color of links in the flipbook?
3.4 How to remove Shadow from the middle of the book?

PDF and FlipBook Loading issues:

Why is PDF loading slowly?

By default, the plugin supports partial loading inbuilt. but for that, you need to make sure partial loading is not disabled. Normally, as default, partial loading is supported out of the box. But, in cases where gzip is enabled for PDF then the partial loading won’t work.

Disable gzip for PDF in .htaccess file.

<IfModule mod_headers.c>
    <FilesMatch "\.pdf$">
        RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=no-brotli:1,E=dont-vary:1]
    </FilesMatch>
</IfModule>

Further Reading at StackOverFlow https://stackoverflow.com/questions/9249243/how-to-disable-apache-gzip-compression-for-some-media-files-in-htaccess-file

Also Make sure your PDF is Web optimized. 50MB for 10 pages is not good for web use.. Optimize the PDF and make it as small as 5MB or less. Maybe this can be useful: https://www.iskysoft.com/edit-pdf/optimize-pdf-mac.html

 

There is a CORS (Cross-Origin) issue and PDF is not loading!

This occurs when the file and page are in HTTP and https mixed protocol. This is a result of improper https redirection. We recommend using a proper setup to redirect every HTTP request to https to avoid any conflict.

If you are using the file from another domain, make sure you have a proper CORS setup done in another domain. For Apache Server, add following lines in .htaccess file

Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Headers "Range" 
Header set Access-Control-Expose-Headers: "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

More Info: https://enable-cors.org/server.html

 

Amazon S3 CORS:

For anyone wanting to use a static AWS S3 bucket to serve up a PDF flipbook, it works great.  You need to configure CORS on your bucket permissions as follows:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>Accept-Ranges</ExposeHeader>
    <ExposeHeader>Content-Encoding</ExposeHeader>
    <ExposeHeader>Content-Length</ExposeHeader>
    <ExposeHeader>Content-Range</ExposeHeader>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>Range</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Official Link: https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

 

 

Make PDF optimized for web purpose:

Make sure your PDF is Web optimized. PDFs are normally exported for printing and are of high quality, around 300-600dpi, which a printer requires. But for reading purposes on-screen 72-100dpi is enough. 50MB for 10 pages is not good for web use. Optimize the PDF and make per page average as max as 500KB or less. Maybe this can be useful: https://www.iskysoft.com/edit-pdf/optimize-pdf-mac.html

 

 

Customization

How to change thumb size for lightbox popups?

You can change the thumb size by using Custom CSS.

._df_thumb{
    width:240px;
    height:360px;
}

How to change the color of Bookmark / Outline?

You can use Custom CSS to change the color of the outline/bookmark
.df-outline-item {
    color: red;
}

 

How to change the color of links in the flipbook?

The links in the PDF are auto-detected and highlighted in yellow as default. To change the color you can either make the highlight transparent to hide the yellow highlight or change the color to another.
/* Make the highlight transparent - no color */

section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{
    opacity:0; 
}
 
/* Make the highlight color red */

section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{ 
    background-color: red; 
}
 
/* Make the hover color red */

section.linkAnnotation:hover a, a.linkAnnotation:hover, a.customLinkAnnotation:hover, .customHtmlAnnotation:hover, .customVideoAnnotation:hover{ 
    opacity:0.4;
    background-color: red; 
}

How to remove Shadow from the middle of the book?

In the case of 2D Flipbook use custom CSS. and set opacity as desired, 0 for no shadow.

.df-page-front:before, .df-page-back:before {
    opacity: 0;
}

In the case of a 3D flipbook, use the stiffness setting. Stiffness defines the curve on the page. 0 is absolute flat – close to hard page flat; value 1 is curvy,2 is less curvy, default is 3. higher value will result in flatter look like setting the value to 0

var book_option = {stiffness:0};

If you want that for all book on the page, then use default settings.

DFLIP.defaults.stiffness = 0;

 

Articles

51 thoughts on “Support and FAQs”

    • Make sure the required files are getting loaded and the files are accessible. You can check if there are any issues in Browser Console with CTRL + SHIFT + I

      Reply

    • Hi,
      Such a button is added through custom code – where the source of the PDF is changed and then passed to a hidden thumb flipbook.

      You can check the code of that page to get some ideas. But that feature is not part of the plugin.

      Reply

  6. Hello, I’m really interested in the jquery dearflip plugin but there’s one thing I really need to know before purchasing it.
    Is it possible to customize the language of the controls? By changing the code, can I actually replace the label of the “Goto first page” button to be some other text?

    Reply

    • We don’t recommend opening in fullscreen directly,
      Yet you can use the callback onReady(flipbook) to trigger fullscreen by triggering the fullscreen button on behalf of the user.

      Reply

    • Please contact using the premium contact form and we can insert some ideas on how this can be achieved or we will add a flag for you.
      From where did you purchase the jQuery Plugin?

      Reply

  9. Hey, I actually managed to find a way around it: I added a mouseover and a mouseenter and mouseout event listener to the container housing the the stage (to show and hide the navigation controls), and this prevents the tap triggering the switch until the controls are up (which is better behaviour in my opinion).

    One bug I spotted though, is that the fullscreen control button isn’t rendered on tablet sized devices (even in my Chrome browser if I set the size to iPad). Maybe this is intentional, but I’ve had to get around it by building in a custom Fullscreen button (on WordPress), which triggers `df_xxxx.ui.switchFullscreen()`.

    Reply

  10. Hey there,
    How to disable “autoEnableThumbnail: true” for mobile using

    var option_noScroll = {scrollWheel: false, autoEnableThumbnail: true}

    Note: autoEnableThumbnail’s value doesn’t change in mobile using matchmedia javascript too.

    Any help or suggestion?

    Reply

    • Try this:
      DFLIP.utils.isMobile
      Example:
      var option_noScroll = {scrollWheel: false, autoEnableThumbnail: !DFLIP.utils.isMobile}

      Reply

  13. I want to buy a single version for my costumer but before i buy a license i have to know if an PDF indexpage also navigates to the correct page in a flip magazine?

    Kind Regards,

    Jessica Bitter
    Het Schoolvoorbeeld.nl

    Reply

  14. Hi, I would like to buy 3D Flipbook jQuery Plugin and I’d like to know what $34/year means? Does that mean I won’t be able to use plugin after a year?

    Thanks.

    Best regards,
    Cesar

    Reply

    • Hi,

      The plugin will continue to function. It won’t stop.
      The updates and support won’t be available after license expires.

      Best,
      DearFlip Team

      Reply

  16. Hi,
    I wonder if I buy single site $34/year , what “single site” means?
    Because besides official site I need to development on development site.
    thanks.

    Reply

  17. Thanks for your reply.
    But I’d like to buy jQuery Flipbook Plugin, not WordPress Flipbook Plugin.
    I shouldn’t need to use WordPress installation, right?

    Reply

    • Hi, You can purchase the product and an account will be created for ou using the mail address you provide during purchase.

      Reply

  21. Hi, what are the conditions for getting back the money?
    I want to purchase it for a trial to see if it fits our project’s purpose.
    Will I get the money back if I don’t want to continue after certain days?

    Reply

  22. I am unable to do two things with the JS Method (purchased):

    1. On Mobile I cannot make the full screen button appear (have it in both allControls and have fullscreenEnabled: true) no matter what I do.

    2. Is there any way to disable the side arrows? Since this is a mobile implementation, I don’t need the click capability and I would like to reclaim the space on the sides.

    Reply

    • Hi,

      1. Fullscreen wont be there in iPhone since IOS doesn’t provide fullscreen API for application to use, It appears in other devices.
      2. Side arrows don’t restrict the area. You can increase/decrease the padding size on left/right with Padding left and Padding right settings in Global settings. They are by default set to 20px wide. Change them to 0 see the affect.

      Reply

  23. Hello,
    Could you please tell me if there’s a way to initialize the plugin in order to start from a certain page? I couldn’t find anything inside the documentation. Is there a method such as “onLoad” or “onInit” I could exploit?
    Thank you in advance.

    Reply

  25. Hover blue color red css codes do not work when hovering. I’ve tried all sorts of combinations but it doesn’t work. Can you add this to the settings section in the next update..

    Reply

  26. Hi,

    I have tested the jquery library that I got from your platform . Everything works great but it looks like the PDF is not using partial loading. The whole pdf is downloaded at the start. Is this a limitation of the free trial version? Will the premium version be able to do partial loading?

    Reply

  27. hey.. my name is Fatima and I’ve been trying to use this plugin with ruby on rails application but something doesn’t seem to work. It’s showing me dFlipLocation and MOCKUP.defaults, as undefined, can you please help because I’ve been stuck on this problem since last week

    Reply

    • Hi,

      Can you share the link to your site. It can be faster to look at the issue.

      dFlipLocationis auto-determined by looking at the source of dflip.js
      So it’s not always required.
      Yet, you can set it to the folder where the dflip.js file is.
      This has to be a absolute URL for better results.

      We suggest you to contact from related platform for better support.
      https://dearflip.com/support/#contact

      Reply

  28. Hi, I’ve been trying to get in contact with you but I couldn’t find another mean. I work at a reseller company and wanted to know if you allow resellers to work with, since we currently have a customer who’s interested in purchasing DearFlip jQuery Flipbook.

    Reply

  29. Hi, what is your refund policy? My client is willing to buy the lifetime license but wants to make sure links work on the PDF beforehand. If we buy a lifetime license and it does not work, would you offer a refund?

    Thanks!

    Reply

Leave a Comment