Tag Archives: html5 web components

Corporate BS Generator HTML5 WebComponent

Nothing serious this time, just a small fun HTML5 WebComponent, inspired by BS Generator, stitching-up (bullshit) sentences out of random buzzwords:

thumb

Usage:

<acidjs-xbsgenerator></acidjs-xbsgenerator>

The component does not have it’s own methods, setters, getters or styles. Just use the tag wherever you want.

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.

EU Cookie Consent HTML5 Web Component

AcidJs.XCookieConsent is a ready-made, fully customizable solution to the EU Cookie Law, wrapped as a custom HTML5 Web Component.

thumb

The component is being used on this blog as well. If you have dismissed the cookie consent bar, click the button below to open show it again:

Using the Tag *

First, go to the demo page and download the sample project, then try one of the following (you need just one instance of the tag on your page).

<acidjs-xcookie-consent>
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent position="top" dismiss-button-text="Understood">
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent dir="rtl"></acidjs-xcookie-consent>

* The message should be set between the <acidjs-xcookie-consent></acidjs-xcookie-consent> tag and HTML is supported. If no content is set, the default text will be “This website uses cookies to ensure you get the best experience“.

HTML Attributes of the Tag

Apart from the standard HTML attributes, the following component-specific ones are supported:

  • position – optional position of the cookie consent bar. By default, position is "bottom", the possible value is "top".
  • dismiss-button-text – optional custom text for the dismiss button. If not set, the default value is "Got it!"

Direction is also supported – you could try dir="rtl" or dir="ltr" (default).

JavaScript Methods of the Tag

Apart from the standard JavaScript methods, getters and setters, the following component specific methods are also supported:

  • show() – to programmatically show the cookie consent bar. Calling this method will, however not delete the _acidjs_xcookie_consent_dismissed cookie.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").show();
    // jQuery
    $("acidjs-xcookie-consent").get(0).show();
  • hide() –  to programmatically hide the cookie consent bar. This will, however not set the _acidjs_xcookie_consent_dismissed cookie.  Cookie will be set only if user clicks the button to dismiss the message.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").hide();
    // jQuery
    $("acidjs-xcookie-consent").get(0).hide();
    

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.

Google AdSense HTML5 Web Component

The HTML5 Web Component for today is a wrapper for Google AdSense ad blocks as a custom tag with a few HTML attributes, methods and accessors.

thumb

Before you Start Using It

  1. This demo page should be deployed on a web server. HTML5 WebComponents do not work from the local file system.
  2. Your ad blocker should be disabled.
  3. You need to be registered with Google AdSense and have a valid client ID for their service.
  4. You need to create ads in Google AdSense.
  5. In the code below replace the client="XX-XXX-XXXXXXXXXXXXXXXX" with your Google AdSense ID (the value of the data-ad-client attribute in the conventional AdSense tag).
  6. In the code below replace the slot="XXXXXXXXXXXX" with your Google AdSense ID (the value of the data-ad-slot attribute in the conventional AdSense tag).
  7. Make sure you are connected to the Internet.
  8. Reload the page to see your ads.
  9. Proceed to the documentation included in the distribution.

Demo and Download

Check and download AcidJs.XAdsByGoogle here.

The HTML

<acidjs-xadsbygoogle width="320" height="100" client="YOUR_ADSENSE_PUBLISHER_ID" slot="SLOT_ID"></acidjs-xadsbygoogle>
<acidjs-xadsbygoogle width="728" height="90" client="YOUR_ADSENSE_PUBLISHER_ID" slot="SLOT_ID"></acidjs-xadsbygoogle>
<acidjs-xadsbygoogle width="300" height="250" client="YOUR_ADSENSE_PUBLISHER_ID" slot="SLOT_ID"></acidjs-xadsbygoogle>

Attributes

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

  • width – Required attribute. Width of the ad block in pixels.
  • height – Required attribute. Height of the ad block in pixels.
  • client – Required attribute. Your AdSense Publisher ID (the value of the data-ad-client attribute in the conventional AdSense tag).
  • slot – Required attribute. AdSense slot ID (the value of the data-ad-slot attribute in the conventional AdSense tag).

How to set/get an attribute:

// JavaScript example
// get
document.querySelector("#ad-01").getAttribute("width");
// set
document.querySelector("#ad-01").setAttribute("width", 200);
// jQuery example
// get
$("#ad-01").attr("width");
// set
$("#ad-01").attr("width", 200);

Accessors

  • config – Gets/sets the DTO of the tag.
// JavaScript getter
document.querySelector("#ad-01").config; // returns {"width": WIDTH, "height": HEIGHT, "client": CLIENT, "slot"": SLOT};
// JavaScript setter
document.querySelector("#ad-01").config = {"width": 200, "height": 200, "client": "ca-pub-4259822914193810", "slot": 1416253888};
// jQuery getter
$("#ad-01").get(0).config; // returns {"width": WIDTH, "height": HEIGHT, "client": CLIENT, "slot"": SLOT}
// jQuery setter
$("#ad-01").get(0).config = {"width": 200, "height": 200, "client": "ca-pub-4259822914193810", "slot": 1416253888}

Methods

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

  • init() – Re(initialize) an ad block.
// JavaScript example
document.querySelector("#ad-01").init();
// jQuery example
$("#ad-01").get(0).init();
  • configure(config) – Set new DTO to the ad block and re-initialize it.
// JavaScript example
document.querySelector("#ad-01").configure({"width": "200", "height": "200", "client": "ca-pub-4259822914193810", "slot": "1416253888"});
// jQuery example
$("#ad-01").get(0).configure({"width": "200", "height": "200", "client": "ca-pub-4259822914193810", "slot": "1416253888"});

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.

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.

thumb

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.

Ribbon JS 4 is Now Also Available as a HTML5 Web Component

Following last week’s release of Ribbon JS 4 and its new website, I decided to provide one more option for ribbon initialization along with the JSON configuration. Instead of composing a relatively complex JSON object, developers using Ribbon JS are now able to create ribbons as HTML5 web components through a simple custom HTML tag. The functionality, complete toolset, appearance, methods and events are kept intact with this approach, so it is absolutely safe to give it a try.

You could play with the demo of Ribbon’s HTML5 Web Component here, browse the documentation and download it. The web component does not include AcidJs.Ribbon, so in order to run it you will need to download also the JavaScript runtime of the control.

ribbon.js.scr

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.