• Portfolio
  • About
  • Blog
  • Music
  • Links
  • Contact
  • Ebook Reader HTML5 Web Component

    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

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

    • source – Required. Book source.
    • booktitle – Optional. Book title.
    • author – Optional. Book author.
    • controls – Optional. If set, the paging controls will be displayed by default.
    • width – Optional width in pixels of the component. Default: 640.
    • height – Optional height in pixels of the component. Default: 480.
    • defaultpage – Optional default page. Default: 0.

    JavaScript Methods, Getters, Setters and Custom Events

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

    • getData() – Returns the data object, associated with the queried component.

    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.