Category Archives: Website Widgets and Components

5 Years of Ribbon JS!

Ribbon JS is turning 5 this month! If you are planning to purchase a license, now it’s the time. Join the celebration and get any commercial license for the most advanced and feature-complete JavaScript, HTML5 and CSS3 MSOffice-like ribbon control available on the Internet today at a half price only in August 2015!

ribbonjs.promo

SVG and JavaScript Image Placeholders

Web developers love online services like lorempixel, placeimage and especially placekitten. They save us time during the initial coding of a website or service, providing customizable image placeholders so we can concentrate on the actual coding of the product instead of searching for suitable stock images. All of these services, however have one thing in common – they require Internet connection, which in my case is not always lightning fast. This is why I decided to create a similar service, which runs fully in the browser – AcidJs.ImgPlaceholder – a tiny JavaScript class (only 2Kb minified and g-zipped), utilizing base64-encoded SVGs and fully configurable via *-data properties.

thumb

Usage

Normal <img /> tags, supplied with data-imgplaceholder attribute:

<img data-imgplaceholder />
<img data-imgplaceholder width="200" height="100" />
<img data-imgplaceholder data-label="Custom Label" data-border-width="20" data-border-color="#b01e00" data-bgcolor="#f3b200" data-forecolor="#b01e00" />
<img data-imgplaceholder data-forecolor="#333" data-bgcolor="#00c13f" width="200" height="130" />
<img data-imgplaceholder data-border-color="#e34c26" data-label="HTML5, SVG and JavaScript" data-bgcolor="#f6f6f6" width="300" height="200" />
<img data-imgplaceholder data-forecolor="#333" data-border-width="20" data-bgcolor="#00c13f" width="200" height="140" />

HTML Attributes

Any standard HTML attributes for images like width, height, title, alt, etc plus the following class-specific attributes:

  • data-imgplaceholder – Required attribute, which marks the image tag as a placeholder.
  • data-label – Allows optional label for the placeholder. Default value is width x height.
  • data-forecolor – Optional label color. Default value is #666.
  • data-bgcolor – Optional background color. Default value is #d4d0c8.
  • data-border-width – Optional border width. Default value is 10.
  • data-border-color – Optional border color. Default value is #666.

Methods

  • render – The method is invoked automatically on page load, but it can be called also manually to create image placeholders on demand.

Supported Browsers

Any SVG-capable browser.

Check the AcidJs.ImgPlaceholder here. If you are also looking for similar text placeholders you may also want to give a try to XLipsum – a HTML5 WebComponent that can generate Lorem Ipsum texts in various formats.

Fair and Simpler Ribbon JS Licenses

With the release of version 4.3.0 of Ribbon JS, the commercial version of the control is now offered in two fair types of licenses – discounted and full commercial. The non-source code option has been removed and now source code is included in all licenses. Here are the details for the new purchase options:

Discounted License with Source Code

  • You are an individual, using Ribbon JS only for personal projects.
  • You are an individual or business, using Ribbon JS for commercial projects, and your yearly gross revenue does not exceed $10,000 USD.
  • You are an educational or non-profit organization.
  • 25% discount on major updates.

Full Commercial License with Source Code

  • You should purchase this license if none of the conditions of the Discounted License with Source Code applies.
  • 10% discount on major updates.

About Ribbon JS:

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks, support for AngularJS directives and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

ribbon.js.scr

 

Ribbon JS 4.3.0 is out with Support for AngularJS Directives

I am happy to announce that the new version of Ribbon JS comes with a long awaited implemented feature request – support for AngularJS directives.

Release Notes:

  • Added support for AngularJS directives applied to the bounding box, tabs and tab ribbons in the configuration object. Check the documentation here.

* Version 4.3.0 is fully compatible with versions 4.0.0 and above.

About Ribbon JS:

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks, support for AngularJS directives and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

ribbon.js.scr

Screenshots:

ribbonjs.4.1.0

Ribbon JS 4.1.0 is Out

I’ve just released a new minor version for Ribbon JS introducing a couple of new features, properties and methods. The new version is fully backwards compatible with the previous versions of the control (4.0.0 and above), so it is safe to upgrade. The HTML5 Web Component for Ribbon JS has also been updated to support the latest additions.

ribbon.js.scr

Release Notes

  • New highlightTabsGroup method, allowing contextual tab grouping. The method supports custom colors and labels.
  • New unhighlightTabsGroup method, which removes a tab group, set via the highlightTabsGroup method.
  • New enableFlatStyles method, allowing to set flat (Metro) look and feel to the ribbon.
  • New disableFlatStyles method, setting back the classic (pre Office 2013) styles to the ribbon.
  • New appIconUrl property, set in the constructor of a ribbon, allowing custom top left application icon. The property is optional, and the default icon is the HTML5 badge.
  • New flat property (optional, Boolean), set in the constructor of a ribbon. If set to true applies flat (Metro) look and feel to the ribbon. Its default value is false.

Screenshots

ribbonjs.4.1.0

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.