1. Home
  2. Docs
  3. DearFlip jQuery Flipbook Plugin
  4. Customizations
  5. 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.

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://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.

How can we help?

Leave a Comment