Ebook Reader HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Inspired by this awesome solution, I just released a new HTML5 Web Component, recreating the layout and controls of e-book readers. Enter the X-Reader.


The Markup

[sourcecode language=”html”]
<acidjs-xreader id="book-1" booktitle="A Clockwork Orange" author="Anthony Burgess" source="books/a-clockwork-orange.html"></acidjs-xreader>
<acidjs-xreader id="book-2" booktitle="Nineteen Eighty-Four" author="George Orwell" controls width="800" height="600" source="books/nineteen-eighty-four.html"></acidjs-xreader>
<acidjs-xreader id="book-3" width="320" height="240" defaultpage="1" source="books/lorem.html"></acidjs-xreader>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

JavaScript Methods, Getters, Setters and Custom Events

All standard JavaScript methods are supported, plus the component-specific:

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Categories and Tags

© 2006 - 2023 Martin Ivanov