Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

"Clickable" Links and Text Inputs in canvas-powered Page Flip demo

"Clickable" Links and Text Inputs in canvas-powered Page Flip demo

Problem

I'm using the Page Flip Demo (tutorial here and demo here) from Google's HTML5-based web app, 20 Things I Learned about Browsers and the Web as a base for a website I am creating.

In short, the Book works by putting the content directly in the DOM (search-engine friendly) and manipulating it using javascript. The page flip animation is drawn onto an overlaid canvas element.

I ran into problems when I started adding links and a contact form to my book. For some reason the links and input elements aren't "clickable".

I've created a jsFiddle here to demonstrate.

I thought it might be a z-index issue: The overlaid canvas z-index is set to 100. Page z-indices start at 0 and work their way up to the front of the book. What if I brought the links/inputs to the front with a higher z-index?

But changing the z-index of the offending elements didn't solve the problem. And anyway, the pages themselves are layered using z-indices so even if bringing the links/inputs to the top layer did work, it wouldn't be a workable solution because then the links wouldn't be layered correctly with their respective pages.

How do I solve this issue: make links and input elements "clickable" under/through a canvas?


HTML:

    
        

Test Page

This demo is fantastic! ...apart from the fact that link and input elements aren't supported. The canvas element and JS on which the entire magic relies, renders both "unclickable" - a major drawback. See below:

Click me!

History

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and Opera and standardized by the WHATWG on new proposed specifications for next generation web technologies.


CSS:

    body, h2, p {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #444;
        color: #333;
        font-family: Helvetica, sans-serif;
    }

    #book {
        background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/book.png") no-repeat;
        position: absolute;
        width: 830px;
        height: 260px;
        left: 50%;
        top: 50%;
        margin-left: -400px;
        margin-top: -125px;
    }

    #pages section {
        background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/paper.png") no-repeat;
        display: block;
        width: 400px;
        height: 250px;
        position: absolute;
        left: 415px;
        top: 5px;
        overflow: hidden;
    }
        #pages section>div {
            display: block;
            width: 400px;
            height: 250px;
            font-size: 12px;
        }
        #pages section p,
        #pages section h2 {
            padding: 3px 35px;
            line-height: 1.4em;
            text-align: justify;
        }
        #pages section h2{
            margin: 15px 0 10px;
        }

    #pageflip-canvas {
        position: absolute;
        z-index: 100;
    }

jQuery:

(function() {

// Dimensions of the whole book
var BOOK_WIDTH = 830;
var BOOK_HEIGHT = 260;

// Dimensions of one page in the book
var PAGE_WIDTH = 400;
var PAGE_HEIGHT = 250;

// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;

// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 60;

var page = 0;

var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );

var mouse = { x: 0, y: 0 };

var flips = [];

var book = document.getElementById( "book" );

// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );

// Organize the depth of our pages and create the flip definitions
for( var i = 0, len = pages.length; i = 0) {
            // We are on the left side, drag the previous page
            flips[page - 1].dragging = true;
        }
        else if (mouse.x > 0 && page + 1 

})();

Problem courtesy of: Luke

Solution

I eventually discovered a 2-fold solution requiring changes to both the CSS and jQuery (as well as a 3rd requirement to "fix" some of the resulting changes).

Step 1: Making the Links Click-able

In order to make links click-able the CSS attribute pointer-events (with a value of none) must be applied to the canvas element.

CSS:

    canvas {
        pointer-events: none;
    }

Demo here showing link now click-able.

Note that the following conditional CSS statement is required for compatibility with IE:



Step 2: Making the Text Inputs Click-able

But as you can see, this does not solve the issue for the text input element, which remains un-click-able. (Interestingly radio buttons work after implementing Step 1 - not included in demo).

The solution for this lies in the jQuery (line 82 of the original demo files): the method event.preventDefault();

This method is in place to prevent default text selection when the mouse is dragged over the page. The mouse drag action is used to turn the page and text-selection makes the animation less attractive.

Removing or commenting out this method re-enabled text input.

jQuery:

    // event.preventDefault(); // comment out this beast

Demo here showing text input element now click-able.


Step 3: Disable Text-Selection using CSS

So now the 2 issues - un-click-able links and un-click-able input elements - are resolved, but the fallout of this is that default text-selection is now re-enabled, making the page flip animation less attractive.

Solution: disable text selection by applying -webkit-touch-callout and user-select (both with value none) to the content div for each "page".

CSS:

    #page-content-div {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: moz-none;
        -ms-user-select: none;
        user-select: none;
    }

Demo here showing completed book with click-able link and text input and no text selection on page turn.

Solution courtesy of: Luke

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

"Clickable" Links and Text Inputs in canvas-powered Page Flip demo

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×