Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 

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

About

Responsively crop copy, then restore on-click via sliding drop-down animation in an accessible manner

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.