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
Fetching latest commit…
Cannot retrieve the latest commit at this 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