Responsively crop copy, then restore on-click via sliding drop-down animation in an accessible manner
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Latest commit a357530 Mar 18, 2017 @2kool2 Gramma time
Permalink
Failed to load latest commit information.
css
js
index.html
license.md
readme.md

readme.md

Crop copy then restore on-click

Responsively crop your content copy down to a user-defined number of lines.

Click to fully restore the content via a sliding drop-down animation.

All delivered in an accessible manner.


Demo

CodePen: Responsively crop copy, restore onclick via sliding drop-down animation

As used on Tesco's Food Love Stories.


Basic usage

Include a link to the styles:

<link rel="stylesheet" href="css/styles.css">

Add content block(s) with data attribute (value = number of lines to display).

<div class="CCR">
  <div class="CCR_txt" data-cropCopyRestore="2">
    Content copy...
  </div>
</div>

Include a link to the script:

<script src="js/cropCopyRestore.2.1.min.js"></script>

Features

  • User-defined number of lines initially displayed, defined in the HTML.
  • JavaScript writes an accurate inline max-height property which is animated via CSS.
  • Resizing the viewport recalculates the length of text displayed and adjusts the max-height values.
  • Utilises ARIA roles and live region to help meet WCAG 2 (accessibility).
  • Vanilla JavaScript and less than 2kB minified & gzipped.
  • Support down to IE9.

Status

Cross-browser tested:
Mac: Firefox Dev, Chrome, Safari, Opera Dev.
PC: Firefox Dev, Chrome, IE9 - Edge.

In Live testing.
To be followed by full accessibility testing.

GitHub repo: crop-copy-slide-restore GitHub Gist: Gist of crop-copy-slide-restore


Mike Foskett @ webSemantics