Skip to content
DearFlip JS Flipbook
  • Plugins
    • WordPress Flipbook
    • Joomla Flipbook
    • Javascript Flipbook
  • Demos
    • Embedded Example
    • Popup Examples
    • Online PDF Viewer
  • Pricing
  • Docs
  • Support
  • Account
  • Blog
DearFlip JS Flipbook
  • Plugins
    • WordPress Flipbook
    • Joomla Flipbook
    • Javascript Flipbook
  • Demos
    • Embedded Example
    • Popup Examples
    • Online PDF Viewer
  • Pricing
  • Docs
  • Support
  • Account
  • Blog

Getting Started

  • Getting started
  • File Structure & Template
  • Basic Usages
  • Options List

FAQs

  • Support and FAQs
  • License Activation
  • Why are there PHP files in download zip file?

Examples

  • Examples
  • Basic – Flipbook using HTML
  • Basic – Using options
  • Adding Outline/Table of Content
  • Adding Search

Customizations

  • onPageChanged
  • Customizations
  • Open flipbook in full-screen
  • onReady Function
  • PDF links custom class and usages
  • Update URL hash on the address bar when a page flips
  • How to add custom share button?

Advanced Customizations

  • Add Close button to ToolBar
  • Advanced Customizations
  • Store last viewed flipbook page
  • Add Custom Button to Flipbook
  • Add Custom Download button to Flipbook
  • Add print button to flipbook
  • Add Custom Zoom Reset button to Flipbook
  • Thumb animation on page scroll
  • Load more button for lightboxes
  • Reset flipbook zoom on flip
View Categories
  • Home
  • Documentation
  • Customizations
  • PDF links custom class and usages

PDF links custom class and usages

PDF links created by dFlip have their own click function. But can be somewhat intercepted and customized based on the requirement.
A custom function can be launched based on the URL of the link. Works best with a link with external URLs.

Note: This customization feature can be included in the core in future – if a proper solution emerges without confusing the user.

Open Book

Final Result: #


What is expected: #

Clicking on links on Page 2 leads to an external URL which is intercepted. Best criteria for customization.
Clicking on links on Page 3 leads to internal URLs and is not intercepted properly. Once the value is cached by PDF.js, it no longer checks the value from the element and cannot be intercepted.


How to customize: #

Create a flipbook with custom id so that it can be extended with option variable.

<div class="_df_book" id="test_book" source="https://js.dearflip.com/wp-content/uploads/2020/09/dFlip-Manual-old.pdf"></div>

<script>
var option_test_book = {annotationClass:"pdf-link-class",openPage:2};
</script>

We use jQuery dynamic selector so that it works on elements created dynamically even after the code is registered.

<script>
jQuery('body').on("click",".pdf-link-class a",function(e){
    
    var link = jQuery(this);
    //make actions based on the href
    var href = link.attr("href");
    console.log(href);
    //Internal Link href is blank and has "internalLink" class added.
    //but cannot be intercepted if the link links to different page and flipbook flips. Works if the links were created on load. not after flip.

    console.log("Is internal Link? " + link.hasClass("internalLink"));

    if(href.startsWith("http") || href.indexOf("www")>-1){
        var check = confirm("You clicked on a link for: " + href + "\r Go to the link?" );
        if(check=== false){
            e.preventDefault();
            e.stopPropagation();
        }

        //add your logic here with custom urls that begin with http:
        //example: http://test/popup2
        //if(href.indexOf("popup2")>-1){};
    }
    else{
        alert("You clicked on an internal link. Going there!");
    }
});
</script>

Note: Further fine-tuning and code changes might be added as per need.

Updated on September 12, 2023

More Inquiry/Info & COMMENTS:

All DearFlip comments and discussion have been moved to
https://github.com/dearhive/dearflip-js-flipbook/discussions

Table of Contents
  • Final Result:
  • What is expected:
  • How to customize:

Links

  • Terms and Conditions
  • License Terms
  • Privacy Policy

Recent Posts

  • Best Flipbook Javascript Plugins with Pros and Cons
  • PDF Partial Loading – What, How and Why?
  • PDF Hyper Links are not working? What is the issue?
  • How flipbook size works? How to make it bigger?
  • Customizing Buttons

Products

  • DearFlip WordPress Flipbook
  • DearFlip 3D Flipbook JS Plugin
  • Online PDF Viewer
  • DearFlip PDF Flipbook for Chrome
© 2025 | A product of DearHive.com