Deep Links to highlight and share text on any page
Deep Links allows you to highlight text on the page, and will generate a URL hash to allow that text highlight to be shared to another browser.
Example Link: Link 1
Just highlight some of the text on the example page and you can see the url being changed as you highlight.
Example Usage for Deep Links js
Official Description
deeplinks.js allows people to easily link directly to any text selection on your website. Here's an example of what one of these links looks like. It's intended mostly for blogs and other such websites, but it's relatively agnostic to the environment it's running in.
People can select text on the site as the normally would, and when they do, the fragment identifier (the thing that comes after the # in the URL) changes. If they want to share the text they have selected, they simply copy the URL and send it to someone. When that person visits the URL, the same text that was originally selected will be selected and scrolled into view.
This description might make it sound a little complicated, but it's actually pretty simple and intuitive once you play with it — go check it out! If you're interested in knowing the details of how it works under the hood, check out docs/design/.
Deep Links to highlight and share text on any page Demo
View Demo Full Screen View Demo New Tab
Deep Links to highlight and share text on any page Code
HTML
<div class="container">
<h1>deeplinks.js Library Example</h1>
<p class="lead">An easy-to-use JavaScript library that allows you to deep-link to specific text on the webpage.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique elit a sapien suscipit fringilla. Sed imperdiet erat feugiat nisl ornare maximus sed nec metus. Pellentesque hendrerit semper neque eget posuere. Donec non finibus nisi. Pellentesque suscipit dolor consequat imperdiet hendrerit. Ut ut congue tellus. Aliquam dignissim faucibus elit at varius. Mauris ut lorem et libero pharetra imperdiet non a arcu. Etiam gravida quam erat. Donec aliquam velit nec justo hendrerit ullamcorper. Phasellus id lectus tellus. Nam vel facilisis elit. Fusce varius sodales nulla, vitae imperdiet arcu rhoncus vitae. Curabitur ligula nisl, bibendum at malesuada nec, ultricies ac purus. Donec interdum nunc vel tristique ultricies.
</p>
<p>
Proin condimentum ex ut velit varius lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut fringilla mauris, ut sodales tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vel lobortis ante, sed pulvinar ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris lobortis, tellus nec pretium semper, nibh ligula auctor nibh, et pharetra erat diam eu nisl. Nulla ex neque, sollicitudin et volutpat ac, cursus in erat. Vivamus non fringilla odio. Integer a ullamcorper risus. Curabitur augue sapien, dapibus ac malesuada eget, feugiat sed ligula. Vivamus dictum hendrerit pulvinar. Duis ac dictum nisl. Vivamus malesuada lorem id elit semper porta.
</p>
<p>
Donec a placerat ex. Donec sodales enim odio, eleifend luctus urna aliquet id. Duis lacinia, purus et bibendum faucibus, mi enim convallis augue, non tempor dolor orci eu tortor. Sed in nulla congue, scelerisque risus sit amet, ullamcorper neque. Quisque dignissim tortor libero, eu suscipit lectus vehicula in. Cras mauris leo, accumsan eget neque at, iaculis luctus massa. Nulla euismod, augue sed commodo mollis, purus ligula facilisis augue, non tempor nisi ex et eros. Praesent egestas posuere dolor, vehicula condimentum eros pellentesque ac.
</p>
<p>
Mauris interdum, velit et consectetur pulvinar, dolor justo pulvinar nulla, quis aliquam neque diam vel elit. Proin feugiat mauris vitae ultrices porttitor. Suspendisse pellentesque dignissim eros. Donec varius accumsan arcu quis ultrices. Nunc vulputate enim quis nisi sollicitudin imperdiet. Proin et interdum arcu, vel ullamcorper tortor. Donec vitae nisl semper, iaculis sapien at, ullamcorper libero. Ut ut massa tincidunt, vestibulum libero nec, gravida turpis.
</p>
<p>
Fusce vel mattis mauris. Morbi eget tempus augue. In dapibus mi quis sapien cursus, fringilla porttitor ipsum elementum. Donec efficitur, nulla vitae aliquam ullamcorper, nisi diam tincidunt ipsum, posuere malesuada nisi felis tempus sapien. Vestibulum pretium imperdiet dictum. Fusce tempus, arcu nec lobortis aliquam, erat ligula porttitor ante, in pulvinar leo sapien sed arcu. Ut porttitor lacus ut tempor sollicitudin.
</p></div>Scripts
<script type="module" src="https://cssbundle.com/js/deeplinks.js"></script>Add Comment
Other Items in SEO
Related Search Terms
Other Categories in Code
Random Quote
