Back to all Elements

"Highlight & Share" with Sharect.js (like in Medium)

A lightweight 'Select text and share / tweet'

This is really lightweight and easy!

First we add the script source to our project, before the</body> tag.

* if we want the plugin to work on the entire website we add it in the project's settings under custom code. otherwise we can add it on the page's custom code section.

<script src="https://cdn.jsdelivr.net/npm/sharect@1.1.0/src/sharect.js"></script>

Copy

2nd step is to add the code that triggers the plugin. We should add this right after the previous code.

Some options are available, like icon color, background color, which elements can be selected and Facebook share (needs additional code).

<script>

 var sharect = new Sharect();

 sharect.init();

</script>

Copy

That is about it!

Depending on your page structure, the plugin might be hidden under a higher z-indexed layer, so add this to your <head> tag:

<style>

.sharect {

z-index: 9999;

}

</style>

Copy

Preview:

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

ToDo List

Cloneable
Code

A todo list, created with JavaScript collected through the internet... ;)

Read more

Simple Mega Nav (Similar to Mailchimp's)

Design
Interactions
Code

A very simple mega navigation bar, opens on hover and changes background color on scroll.

Read more

Auto change tabs

Code
Design
Tricks

A script to automatically switch between tabs in a loop.

Read more