jekyll-theme-primer 0.5.1 β 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '095241374415e28466cabc22c495b8cb0d92d8a7'
|
|
4
|
+
data.tar.gz: 9af64f386d3af377c495a428a5957d319c3e1fa6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: cafa102ef5d963b6f596a63fbf27d3870c7b47b851918216d62b49b774bd520c98dbeb21f7715c68c68961e1f7f7485dc462d027fce4ea1571d451dbe4e2c56e
|
|
7
|
+
data.tar.gz: fa17bc73e48ef0088e305edf12d1913713233eb01d03b8f9fcde1a22d990baf45bf950a77f27458b0ccf50d208d2210054b76d94451de9db25da571f72bb92d7
|
data/_layouts/default.html
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
{% if site.github.private != true and site.github.license %}
|
|
19
19
|
<div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray">
|
|
20
|
-
This site is open source.
|
|
20
|
+
This site is open source. {% github_edit_link "Improve this page" %}.
|
|
21
21
|
</div>
|
|
22
22
|
{% endif %}
|
|
23
23
|
</div>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-primer
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.5.
|
|
4
|
+
version: 0.5.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub, Inc.
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-08-
|
|
11
|
+
date: 2017-08-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -38,6 +38,20 @@ dependencies:
|
|
|
38
38
|
- - "~>"
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '2.2'
|
|
41
|
+
- !ruby/object:Gem::Dependency
|
|
42
|
+
name: jekyll-github-metadata
|
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
|
44
|
+
requirements:
|
|
45
|
+
- - "~>"
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: '2.9'
|
|
48
|
+
type: :runtime
|
|
49
|
+
prerelease: false
|
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
51
|
+
requirements:
|
|
52
|
+
- - "~>"
|
|
53
|
+
- !ruby/object:Gem::Version
|
|
54
|
+
version: '2.9'
|
|
41
55
|
- !ruby/object:Gem::Dependency
|
|
42
56
|
name: rubocop
|
|
43
57
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -146,7 +160,6 @@ files:
|
|
|
146
160
|
- assets/javascript/anchor-js/docs/grunticon/icons.data.svg.css
|
|
147
161
|
- assets/javascript/anchor-js/docs/grunticon/icons.fallback.css
|
|
148
162
|
- assets/javascript/anchor-js/docs/grunticon/png/grunticon-link.png
|
|
149
|
-
- assets/javascript/anchor-js/docs/grunticon/preview.html
|
|
150
163
|
- assets/javascript/anchor-js/docs/img/anchoring-links.png
|
|
151
164
|
- assets/javascript/anchor-js/docs/img/anchorjs_logo.png
|
|
152
165
|
- assets/javascript/anchor-js/docs/img/anchorlinks2.png
|
|
@@ -156,7 +169,6 @@ files:
|
|
|
156
169
|
- assets/javascript/anchor-js/docs/img/link.svg
|
|
157
170
|
- assets/javascript/anchor-js/docs/img/mini-logo.png
|
|
158
171
|
- assets/javascript/anchor-js/docs/img/primer-md.png
|
|
159
|
-
- assets/javascript/anchor-js/docs/index.html
|
|
160
172
|
- assets/javascript/anchor-js/docs/scripts.js
|
|
161
173
|
- assets/javascript/anchor-js/docs/styles.css
|
|
162
174
|
homepage: https://github.com/pages-themes/jekyll-theme-primer
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
<!doctype HTML>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>Icons Preview!</title>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<style>
|
|
7
|
-
body {
|
|
8
|
-
background-image: linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(transparent 75%, #eee 75%), linear-gradient(transparent 75%, #eee 75%);
|
|
9
|
-
width: auto;
|
|
10
|
-
background-size: 10px 10px;
|
|
11
|
-
}
|
|
12
|
-
</style>
|
|
13
|
-
<script>
|
|
14
|
-
|
|
15
|
-
/*! grunt-grunticon Stylesheet Loader - v2.1.2 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
|
|
16
|
-
|
|
17
|
-
(function(e){function t(t,n,r,o){"use strict";function a(){for(var e,n=0;u.length>n;n++)u[n].href&&u[n].href.indexOf(t)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),l=n||e.document.getElementsByTagName("script")[0],u=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",i.onload=o||null,l.parentNode.insertBefore(i,l),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,l=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),u=new i;u.onerror=function(){n.method="png",n.href=r[2],t(r[2])},u.onload=function(){var e=1===u.width&&1===u.height,a=r[e&&l?0:e?1:2];n.method=e&&l?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},u.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);(function(e,t){"use strict";var n=t.document,r="grunticon:",o=function(e){if(n.attachEvent?"complete"===n.readyState:"loading"!==n.readyState)e();else{var t=!1;n.addEventListener("readystatechange",function(){t||(t=!0,e())},!1)}},a=function(e){return t.document.querySelector('link[href$="'+e+'"]')},c=function(e){var t,n,o,a,c,i,u={};if(t=e.sheet,!t)return u;n=t.cssRules?t.cssRules:t.rules;for(var l=0;n.length>l;l++)o=n[l].cssText,a=r+n[l].selectorText,c=o.split(");")[0].match(/US\-ASCII\,([^"']+)/),c&&c[1]&&(i=decodeURIComponent(c[1]),u[a]=i);return u},i=function(e){var t,o,a;o="data-grunticon-embed";for(var c in e)if(a=c.slice(r.length),t=n.querySelectorAll(a+"["+o+"]"),t.length)for(var i=0;t.length>i;i++)t[i].innerHTML=e[c],t[i].style.backgroundImage="none",t[i].removeAttribute(o);return t},u=function(t){"svg"===e.method&&o(function(){i(c(a(e.href))),"function"==typeof t&&t()})};e.embedIcons=i,e.getCSS=a,e.getIcons=c,e.ready=o,e.svgLoadedCallback=u,e.embedSVG=u})(grunticon,this);
|
|
18
|
-
|
|
19
|
-
grunticon(["icons.data.svg.css", "icons.data.png.css", "icons.fallback.css"]);
|
|
20
|
-
</script>
|
|
21
|
-
<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
|
|
22
|
-
|
|
23
|
-
</head>
|
|
24
|
-
<body>
|
|
25
|
-
|
|
26
|
-
<h1>PREVIEW - you can change this in the previewTemplate option</h1>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<pre><code>.icon-grunticon-link:</code></pre><div class="icon-grunticon-link" style="width: 20px; height: 20px;" ></div><hr/>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</body>
|
|
33
|
-
</html>
|
|
@@ -1,807 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>AnchorJS - Add deep anchor links to your docs</title>
|
|
6
|
-
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
7
|
-
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>
|
|
8
|
-
<link rel="stylesheet" href="styles.css">
|
|
9
|
-
<link rel="stylesheet" href="fonts/fonts.css">
|
|
10
|
-
<link rel="stylesheet" href="//cdn.jsdelivr.net/prism/1.5.1/themes/prism-twilight.css">
|
|
11
|
-
<script src="grunticon/grunticon.loader.js"></script>
|
|
12
|
-
<script>
|
|
13
|
-
grunticon(["grunticon/icons.data.svg.css", "grunticon/icons.data.png.css", "grunticon/icons.fallback.css"]);
|
|
14
|
-
</script>
|
|
15
|
-
<noscript>
|
|
16
|
-
<link href="grunticon/icons.fallback.css" rel="stylesheet">
|
|
17
|
-
</noscript>
|
|
18
|
-
</head>
|
|
19
|
-
<body>
|
|
20
|
-
<header class="header">
|
|
21
|
-
<h1 class="page-title">AnchorJS</h1>
|
|
22
|
-
<img class="logo" src="img/anchorjs_logo.png" />
|
|
23
|
-
<div class="desc">
|
|
24
|
-
<p class="maindesc">Add deep anchor links to your docs.</p>
|
|
25
|
-
<p class="subdesc">What are "deep anchor links"? Here are a few examples:</p>
|
|
26
|
-
</div>
|
|
27
|
-
<div class="preview-examples">
|
|
28
|
-
<div class="example">
|
|
29
|
-
<div class="example-content">
|
|
30
|
-
<h3 id="basic-link-preview">Basic Link</h3>
|
|
31
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
32
|
-
<a href="#" class="example-code-link">{}</a>
|
|
33
|
-
</div>
|
|
34
|
-
<div class="example-code">
|
|
35
|
-
<pre class="js"><code>anchors.options.visible = 'always';
|
|
36
|
-
anchors.add('h3');</code></pre>
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="example">
|
|
40
|
-
<div class="example-content">
|
|
41
|
-
<h3>Paragraph Link</h3>
|
|
42
|
-
<p id="paragraph-link-preview">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
43
|
-
<a href="#" class="example-code-link">{}</a>
|
|
44
|
-
</div>
|
|
45
|
-
<div class="example-code">
|
|
46
|
-
<pre class="js"><code>anchors.options = {
|
|
47
|
-
visible: 'always',
|
|
48
|
-
placement: 'left',
|
|
49
|
-
icon: 'ΒΆ'
|
|
50
|
-
};
|
|
51
|
-
anchors.add('p');</code></pre>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
<p class="more-examples"><a href="#examples">See more examples</a></p>
|
|
56
|
-
<div class="used-by">
|
|
57
|
-
<h2 class="used-by-label">Used by</h2>
|
|
58
|
-
<a href="http://primercss.io/about/"><img src="https://avatars.githubusercontent.com/u/7143434?v=3&s=120" alt="Primer CSS Logo" title="PrimerCSS"/></a>
|
|
59
|
-
<a href="http://getbootstrap.com/getting-started/"><img src="https://avatars.githubusercontent.com/u/2918581?v=3&s=120" alt="Bootstrap Logo" title="Bootstrap" /></a>
|
|
60
|
-
<a href="http://eslint.org/docs/rules/"><img src="https://avatars.githubusercontent.com/u/6019716?v=3&s=120" alt="ESLint logo" title="ESLint"/></a>
|
|
61
|
-
<a href="https://middlemanapp.com/basics/install/"><img src="https://avatars.githubusercontent.com/u/1280820?v=3&s=120" alt="Middleman logo" title="Middleman"/></a>
|
|
62
|
-
<a href="http://learn.getgrav.org/"><img src="https://avatars.githubusercontent.com/u/8237355?v=3&s=120" alt="Grav Logo" title="Grav" /></a>
|
|
63
|
-
</div>
|
|
64
|
-
</header>
|
|
65
|
-
<section class="main">
|
|
66
|
-
<h2>Overview</h2>
|
|
67
|
-
<img class="anchorlink-examples" src="img/anchorlinks2.png" alt="Examples of deep anchor links from across the web." />
|
|
68
|
-
<p>AnchorJS lets you drop deep anchor links (<a href="http://ux.stackexchange.com/q/36304/33248">like these</a>) onto any webpage, and be on your way.</p>
|
|
69
|
-
<p>You don't need to set up IDs or worry about urls. AnchorJS will respect your IDs if you have them, and generate them if you don't.</p>
|
|
70
|
-
<p>It uses an attractive link icon by default, but you can customize the display via <a href="#options">options</a> and CSS syling. The <a href="#examples">examples</a> demonstrate a few customization ideas.</p>
|
|
71
|
-
<p>Finally, AnchorJS is <strong>lightweight</strong>, <strong>accessible</strong>, and has <strong>no dependencies</strong>.</p>
|
|
72
|
-
|
|
73
|
-
<h2>Installation</h2>
|
|
74
|
-
|
|
75
|
-
<p>Download AnchorJS using npm,</p>
|
|
76
|
-
<pre><code>npm install anchor-js</code></pre>
|
|
77
|
-
<p>or bower:</p>
|
|
78
|
-
<pre><code>bower install anchor-js</code></pre>
|
|
79
|
-
<p>(or just <a href="https://github.com/bryanbraun/anchorjs/releases">download it from github</a>).</p>
|
|
80
|
-
<p>Then include the anchor.js file (or anchor.min.js) in your webpage.</p>
|
|
81
|
-
<pre><code class="language-markup"><script src="anchor.js"></script></code></pre>
|
|
82
|
-
<p>You could also include it via a CDN like <a href="https://cdnjs.com/libraries/anchor-js">CDNJS</a> or <a href="http://www.jsdelivr.com/projects/anchorjs">jsDelivr</a>.</p>
|
|
83
|
-
<p>If you're using it from Node/CommonJS, include it via:</p>
|
|
84
|
-
<pre class="src-js"><code>var anchorJS = require('anchor-js');
|
|
85
|
-
var anchors = new anchorJS();</code></pre>
|
|
86
|
-
|
|
87
|
-
<h2>Basic usage</h2>
|
|
88
|
-
<p>AnchorJS provides the <code>anchors.add()</code> method which takes a CSS selector (similar to jQuery) for targeting elements you want to deep-link. Here are some usage examples.</p>
|
|
89
|
-
<pre class="src-js"><code>/**
|
|
90
|
-
* Example 1
|
|
91
|
-
* Add anchors to all h1's on the page
|
|
92
|
-
*/
|
|
93
|
-
anchors.add('h1');
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* Example 2
|
|
97
|
-
* Adds anchors to elements that have been assigned the class '.anchored'
|
|
98
|
-
*/
|
|
99
|
-
anchors.add('.anchored');
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Example 3
|
|
103
|
-
* If no selector is provided, it falls back to a default selector of:
|
|
104
|
-
* 'h2, h3, h4, h5, h6'
|
|
105
|
-
*/
|
|
106
|
-
anchors.add();</code></pre>
|
|
107
|
-
|
|
108
|
-
<h3>Don't run it too late!</h3>
|
|
109
|
-
<p>You need to add anchors to the page early in the page load process if you want browsers to jump to the ID properly.</p>
|
|
110
|
-
<p>We recommend you call <code>anchors.add()</code> before the DOM finishes loading...</p>
|
|
111
|
-
|
|
112
|
-
<pre><code class="language-markup"><!-- Add anchors before the closing body tag. -->
|
|
113
|
-
<script>
|
|
114
|
-
anchors.add();
|
|
115
|
-
</script>
|
|
116
|
-
</body></code></pre>
|
|
117
|
-
<p>...or on DOMContentLoaded:</p>
|
|
118
|
-
<pre class="src-js"><code>// Add anchors on DOMContentLoaded
|
|
119
|
-
document.addEventListener("DOMContentLoaded", function(event) {
|
|
120
|
-
anchors.add();
|
|
121
|
-
});</code></pre>
|
|
122
|
-
|
|
123
|
-
<p>Don't add anchors on later events, like <code>$(document).ready()</code> or <code>window.onload</code> as some browsers will attempt to jump to your ID before AnchorJS can add it to the page. For more details, see <a href="https://github.com/bryanbraun/anchorjs/issues/69#issuecomment-255503575">github issue #69</a>).</p>
|
|
124
|
-
|
|
125
|
-
<h2>Options</h2>
|
|
126
|
-
<p>You can set a number of options to customize how your anchors look:</p>
|
|
127
|
-
<table class='options-table'>
|
|
128
|
-
<thead>
|
|
129
|
-
<tr>
|
|
130
|
-
<th>Option</th>
|
|
131
|
-
<th class="minicol">Accepted Values</th>
|
|
132
|
-
<th class="minicol">Default Value</th>
|
|
133
|
-
<th>Description</th>
|
|
134
|
-
</tr>
|
|
135
|
-
</thead>
|
|
136
|
-
<tbody>
|
|
137
|
-
<tr>
|
|
138
|
-
<td><code>placement</code></td>
|
|
139
|
-
<td><code>right</code> <br> <code>left</code></td>
|
|
140
|
-
<td><code>right</code></td>
|
|
141
|
-
<td><code>right</code> appends the anchor to the end of the element.<br> <code>left</code> places it to the left, in the margin.</td>
|
|
142
|
-
</tr>
|
|
143
|
-
<tr>
|
|
144
|
-
<td><code>visible</code></td>
|
|
145
|
-
<td><code>hover</code> <br> <code>always</code> <br> <code>touch</code></td></td>
|
|
146
|
-
<td><code>hover</code></td>
|
|
147
|
-
<td><code>hover</code> displays the anchor when hovering over the element.<br> <code>always</code> will always display the anchor link. <br> <code>touch</code> will <em>always</em> display anchors for devices that support touch events, and only display them via <em>hover</em> for devices that do not support touch events. This approximates touchscreen detection (but <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">isn't 100% accurate</a>).</td>
|
|
148
|
-
</tr>
|
|
149
|
-
<tr>
|
|
150
|
-
<td><code>icon</code></td>
|
|
151
|
-
<td>(any unicode character)</td>
|
|
152
|
-
<td><code style="font-family: 'anchorjs-icons'; font-size: 24px; -webkit-font-smoothing: antialiased;">ξ§</code></td>
|
|
153
|
-
<td>Replace the default link icon with the character(s) provided. These are a few good options: <code>#</code>, <code>ΒΆ</code>, <code>β‘</code>, and <code>Β§</code>.</td>
|
|
154
|
-
</tr>
|
|
155
|
-
<tr>
|
|
156
|
-
<td><code>class</code></td>
|
|
157
|
-
<td>(any string)</td>
|
|
158
|
-
<td>(none)</td>
|
|
159
|
-
<td>Adds the provided class(es) to the anchor html.</td>
|
|
160
|
-
</tr>
|
|
161
|
-
<tr>
|
|
162
|
-
<td><code>truncate</code></td>
|
|
163
|
-
<td>(any positive number)</td>
|
|
164
|
-
<td><code>64</code></td>
|
|
165
|
-
<td>Truncates the generated ID to the specified character length. <small>Note: the length may not be exactly the same, if there are dangling spaces or hyphens to be trimmed.</small></td>
|
|
166
|
-
</tr>
|
|
167
|
-
</tbody>
|
|
168
|
-
</table>
|
|
169
|
-
<p>For example:</p>
|
|
170
|
-
<pre class="src-js"><code>/**
|
|
171
|
-
* Example 1
|
|
172
|
-
* Add anchors to all h1s, h2s and h3s inside of #post.
|
|
173
|
-
* Anchors will be always visible.
|
|
174
|
-
*/
|
|
175
|
-
anchors.options.visible = 'always';
|
|
176
|
-
anchors.add('#post h1, #post h2, #post h3');
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Example 2
|
|
180
|
-
* Provide options as an object before adding anchors to the page.
|
|
181
|
-
* Adds always-visible ΒΆ anchors in the left margin of each p tag inside .story
|
|
182
|
-
*/
|
|
183
|
-
anchors.options = {
|
|
184
|
-
placement: 'left',
|
|
185
|
-
visible: 'always',
|
|
186
|
-
icon: 'ΒΆ'
|
|
187
|
-
};
|
|
188
|
-
anchors.add('.story > p');</code></pre>
|
|
189
|
-
|
|
190
|
-
<h2>Advanced usage</h2>
|
|
191
|
-
|
|
192
|
-
<section id="section-ids">
|
|
193
|
-
<h3 data-anchor-id="section-ids">Section IDs</h3>
|
|
194
|
-
<p>In some cases, you might want to link to existing section IDs instead of the heading element itself. You can instruct AnchorJS to do this with the <code>data-anchor-id</code> attribute:</p>
|
|
195
|
-
<pre><code class="language-markup"><section id="section-1">
|
|
196
|
-
<h3 data-anchor-id="section-1">Section 1</h3>
|
|
197
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
|
|
198
|
-
</section></code></pre>
|
|
199
|
-
<p>This allows you to do things like <a href="https://css-tricks.com/on-target/#article-header-id-3">highlight sections when your users jump to them</a>.</p>
|
|
200
|
-
</section>
|
|
201
|
-
|
|
202
|
-
<h3>Removing anchors</h3>
|
|
203
|
-
<p>You can remove anchors with the <code>anchors.remove()</code> or <code>anchors.removeAll()</code> methods:</p>
|
|
204
|
-
<pre class="src-js"><code>/**
|
|
205
|
-
* Example 1
|
|
206
|
-
* Remove anchors from all h1s on the page.
|
|
207
|
-
*/
|
|
208
|
-
anchors.remove('h1');
|
|
209
|
-
|
|
210
|
-
/**
|
|
211
|
-
* Example 2
|
|
212
|
-
* Remove all anchors from the page.
|
|
213
|
-
*/
|
|
214
|
-
anchors.removeAll();</pre></code>
|
|
215
|
-
<p>Removing anchors with <code>.remove()</code> should be uncommon. If you simply want anchors on a more selective group, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">the CSS <em>:not()</em> pseudo-class</a> when you add them, like so:</p>
|
|
216
|
-
<pre class="src-js"><code>/**
|
|
217
|
-
* Example 2
|
|
218
|
-
* Add anchors to all h2s, except for those with a class of "no-anchor".
|
|
219
|
-
*/
|
|
220
|
-
anchors.add('h2:not(.no-anchor)');</pre></code>
|
|
221
|
-
|
|
222
|
-
<h3>Chaining commands</h3>
|
|
223
|
-
<p>You can chain commands of <code>add()</code> and <code>remove()</code> (since they return a copy of <code>anchors</code>), but it's usually more performant to lean on CSS when targeting elements:
|
|
224
|
-
|
|
225
|
-
<pre class="src-js"><code>/**
|
|
226
|
-
* Example 1
|
|
227
|
-
* Adds anchors to `.my-anchors` and `.my-other-anchors` except for those
|
|
228
|
-
* with a class of `no-anchor`.
|
|
229
|
-
*/
|
|
230
|
-
anchors.add('.my-anchors').add('.my-other-anchors').remove('.no-anchor');
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
* Example 2
|
|
234
|
-
* A more performant way to add anchors to the same classes in Example 1 above.
|
|
235
|
-
*/
|
|
236
|
-
anchors.add('.my-anchors:not(.no-anchor), .my-other-anchors:not(.no-anchor)');</code></pre>
|
|
237
|
-
|
|
238
|
-
<h3>Multiple sets of anchors</h3>
|
|
239
|
-
<p>You can have multiple sets of anchors on one page, each with their own design. To do so, just create your own instances of the AnchorJS object:</p>
|
|
240
|
-
<pre class="src-js"><code>var sidebarAnchors = new AnchorJS();
|
|
241
|
-
anchors.add('.main h2'); // The default instance.
|
|
242
|
-
sidebarAnchors.add('.sidebar h2'); // The new instance.</code></pre>
|
|
243
|
-
<p>You can preset your instance with whatever options you like:</p>
|
|
244
|
-
<pre class="src-js"><code>var sidebarAnchors = new AnchorJS({
|
|
245
|
-
placement: 'left',
|
|
246
|
-
icon: 'ΒΆ'
|
|
247
|
-
});
|
|
248
|
-
sidebarAnchors.add('.sidebar h2');</code></pre>
|
|
249
|
-
|
|
250
|
-
<h3>Generating navigations</h3>
|
|
251
|
-
<p>AnchorJS doesn't include methods for dynamically generating navigations (like a table of contents or jump nav). This is to keep AnchorJS lightweight and simple for the most common usecases.</p>
|
|
252
|
-
<p>However, AnchorJS <em>does</em> expose a list of all anchored elements at <code>anchors.elements</code>. This way, external code can look up the elements and use them to generate navigations (as shown in <a href="https://jsfiddle.net/bryanbraun/nc6rL9hk/">this example</a>).</p>
|
|
253
|
-
<p>You can also use AnchorJS alongside a static navigation with pre-defined IDs (as is done in <a href="https://jsfiddle.net/bryanbraun/x85hfvbk/">this example</a>).</p>
|
|
254
|
-
|
|
255
|
-
<h2>Examples</h2>
|
|
256
|
-
<div class="examples">
|
|
257
|
-
<div class="example">
|
|
258
|
-
<div class="example-content">
|
|
259
|
-
<h3>Basic Link</h3>
|
|
260
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
261
|
-
<a href="#" class="example-code-link">{}</a>
|
|
262
|
-
</div>
|
|
263
|
-
<div class="example-code">
|
|
264
|
-
<pre class="js"><code>anchors.options.visible = 'always';
|
|
265
|
-
anchors.add('h3');</code></pre>
|
|
266
|
-
</div>
|
|
267
|
-
</div>
|
|
268
|
-
<div class="example">
|
|
269
|
-
<div class="example-content">
|
|
270
|
-
<h3>Basic Link - Left</h3>
|
|
271
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
272
|
-
<a href="#" class="example-code-link">{}</a>
|
|
273
|
-
</div>
|
|
274
|
-
<div class="example-code">
|
|
275
|
-
<pre class="js"><code>anchors.options = {
|
|
276
|
-
visible: 'always',
|
|
277
|
-
placement: 'left'
|
|
278
|
-
};
|
|
279
|
-
anchors.add('h3');</code></pre>
|
|
280
|
-
</div>
|
|
281
|
-
</div>
|
|
282
|
-
<div class="example">
|
|
283
|
-
<div class="example-content">
|
|
284
|
-
<h3>Paragraph Link</h3>
|
|
285
|
-
<p id="paragraph-link">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
286
|
-
<a href="#" class="example-code-link">{}</a>
|
|
287
|
-
</div>
|
|
288
|
-
<div class="example-code">
|
|
289
|
-
<pre class="js"><code>anchors.options = {
|
|
290
|
-
visible: 'always',
|
|
291
|
-
placement: 'left',
|
|
292
|
-
icon: 'ΒΆ'
|
|
293
|
-
};
|
|
294
|
-
anchors.add('p');</code></pre>
|
|
295
|
-
</div>
|
|
296
|
-
</div>
|
|
297
|
-
<div class="example">
|
|
298
|
-
<div class="example-content">
|
|
299
|
-
<h3>Octothorp</h3>
|
|
300
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
301
|
-
<a href="#" class="example-code-link">{}</a>
|
|
302
|
-
</div>
|
|
303
|
-
<div class="example-code">
|
|
304
|
-
<pre class="js"><code>anchors.options = {
|
|
305
|
-
visible: 'always',
|
|
306
|
-
icon: '#'
|
|
307
|
-
};
|
|
308
|
-
anchors.add('h3');</code></pre>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
<div class="example">
|
|
312
|
-
<div class="example-content">
|
|
313
|
-
<h3>Unicode Icon 1</h3>
|
|
314
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
315
|
-
<a href="#" class="example-code-link">{}</a>
|
|
316
|
-
</div>
|
|
317
|
-
<div class="example-code">
|
|
318
|
-
<pre class="js"><code>anchors.options = {
|
|
319
|
-
visible: 'always',
|
|
320
|
-
placement: 'left',
|
|
321
|
-
icon: 'Β§'
|
|
322
|
-
};
|
|
323
|
-
anchors.add('h3');</code></pre>
|
|
324
|
-
</div>
|
|
325
|
-
</div>
|
|
326
|
-
<div class="example">
|
|
327
|
-
<div class="example-content">
|
|
328
|
-
<h3>Unicode Icon 2</h3>
|
|
329
|
-
<p id="unicode-icon-2">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
330
|
-
<a href="#" class="example-code-link">{}</a>
|
|
331
|
-
</div>
|
|
332
|
-
<div class="example-code">
|
|
333
|
-
<pre class="js"><code>anchors.options = {
|
|
334
|
-
visible: 'always',
|
|
335
|
-
icon: 'β‘'
|
|
336
|
-
};
|
|
337
|
-
anchors.add('p');</code></pre>
|
|
338
|
-
</div>
|
|
339
|
-
</div>
|
|
340
|
-
<div class="example">
|
|
341
|
-
<div class="example-content">
|
|
342
|
-
<h3>Custom Text</h3>
|
|
343
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
344
|
-
<a href="#" class="example-code-link">{}</a>
|
|
345
|
-
</div>
|
|
346
|
-
<div class="example-code">
|
|
347
|
-
<pre class="js"><code>anchors.options = {
|
|
348
|
-
visible: 'always',
|
|
349
|
-
icon: '# LINK'
|
|
350
|
-
};
|
|
351
|
-
anchors.add('h3');</code></pre>
|
|
352
|
-
<pre class="css"><code>.anchorjs-link {
|
|
353
|
-
font-weight: 200;
|
|
354
|
-
margin-left: 1em;
|
|
355
|
-
padding-right: 0.375em;
|
|
356
|
-
font-size: 0.5em;
|
|
357
|
-
border: 1px dashed #FFBAAC;
|
|
358
|
-
vertical-align: middle;
|
|
359
|
-
}</code></pre>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
<div class="example">
|
|
363
|
-
<div class="example-content">
|
|
364
|
-
<h3>Custom Image</h3>
|
|
365
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
366
|
-
<a href="#" class="example-code-link">{}</a>
|
|
367
|
-
</div>
|
|
368
|
-
<div class="example-code">
|
|
369
|
-
<pre class="js"><code>// Use an empty string ('') for the icon when styling the background with CSS.
|
|
370
|
-
anchors.options = {
|
|
371
|
-
visible: 'always',
|
|
372
|
-
placement: 'left',
|
|
373
|
-
icon: ''
|
|
374
|
-
};
|
|
375
|
-
anchors.add('h3');</code></pre>
|
|
376
|
-
<pre class="css"><code>.anchorjs-link {
|
|
377
|
-
width: 14px;
|
|
378
|
-
height: 32px;
|
|
379
|
-
margin-top: 6px;
|
|
380
|
-
margin-left: -1.25em !important;
|
|
381
|
-
background: url('img/mini-logo.png') no-repeat;
|
|
382
|
-
}</code></pre>
|
|
383
|
-
</div>
|
|
384
|
-
</div>
|
|
385
|
-
<div class="example">
|
|
386
|
-
<div class="example-content">
|
|
387
|
-
<h3>Link w/CSS Styling</h3>
|
|
388
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
389
|
-
<a href="#" class="example-code-link">{}</a>
|
|
390
|
-
</div>
|
|
391
|
-
<div class="example-code">
|
|
392
|
-
<pre class="js"><code>anchors.options = {
|
|
393
|
-
visible: 'always',
|
|
394
|
-
placement: 'left'
|
|
395
|
-
};
|
|
396
|
-
anchors.add('h3');</code></pre>
|
|
397
|
-
<pre class="css"><code>.anchorjs-link {
|
|
398
|
-
display: inline-block;
|
|
399
|
-
height: 32px;
|
|
400
|
-
width: 18px;
|
|
401
|
-
border-radius: 50%;
|
|
402
|
-
background-color: #FF5231;
|
|
403
|
-
color: white;
|
|
404
|
-
margin-top: 4px;
|
|
405
|
-
margin-left: -1.4em !important;
|
|
406
|
-
}
|
|
407
|
-
.anchorjs-link:before {
|
|
408
|
-
margin-left: 7px;
|
|
409
|
-
margin-top: -4px;
|
|
410
|
-
display: block;
|
|
411
|
-
}</code></pre>
|
|
412
|
-
</div>
|
|
413
|
-
</div>
|
|
414
|
-
<div class="example">
|
|
415
|
-
<div class="example-content">
|
|
416
|
-
<h3>Icon Font</h3>
|
|
417
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
418
|
-
<a href="#" class="example-code-link">{}</a>
|
|
419
|
-
</div>
|
|
420
|
-
<div class="example-code">
|
|
421
|
-
<pre class="js"><code>// Just pass in the octal code for your icon-font character.
|
|
422
|
-
anchors.options = {
|
|
423
|
-
visible: 'always',
|
|
424
|
-
icon: '\uf0c1'
|
|
425
|
-
};
|
|
426
|
-
anchors.add('h3');</code></pre>
|
|
427
|
-
<pre class="css"><code>.anchorjs-link {
|
|
428
|
-
font-family: 'your-icon-font';
|
|
429
|
-
}</code></pre>
|
|
430
|
-
</div>
|
|
431
|
-
</div>
|
|
432
|
-
<div class="example">
|
|
433
|
-
<div class="example-content">
|
|
434
|
-
<h3>SVG Icon</h3>
|
|
435
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
436
|
-
<a href="#" class="example-code-link">{}</a>
|
|
437
|
-
</div>
|
|
438
|
-
<div class="example-code">
|
|
439
|
-
<pre class="js"><code>anchors.options = {
|
|
440
|
-
visible: 'always',
|
|
441
|
-
icon: ''
|
|
442
|
-
};
|
|
443
|
-
anchors.add('h3');</code></pre>
|
|
444
|
-
<pre class="css"><code>.anchorjs-link {
|
|
445
|
-
display: inline-block;
|
|
446
|
-
background: url('img/hyperlink.svg') no-repeat;
|
|
447
|
-
margin-left: 8px;
|
|
448
|
-
width: 14px;
|
|
449
|
-
height: 24px;
|
|
450
|
-
}</code></pre>
|
|
451
|
-
</div>
|
|
452
|
-
</div>
|
|
453
|
-
<div class="example">
|
|
454
|
-
<div class="example-content">
|
|
455
|
-
<h3>Base64 Icon</h3>
|
|
456
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
457
|
-
<a href="#" class="example-code-link">{}</a>
|
|
458
|
-
</div>
|
|
459
|
-
<div class="example-code">
|
|
460
|
-
<pre class="js"><code>anchors.options = {
|
|
461
|
-
visible: 'always',
|
|
462
|
-
placement: 'left',
|
|
463
|
-
icon: ''
|
|
464
|
-
};
|
|
465
|
-
anchors.add('h3');</code></pre>
|
|
466
|
-
<pre class="css"><code>.anchorjs-link {
|
|
467
|
-
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDIwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImxpbmsiIGZpbGw9IiNGRjUyMzEiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMCBMMTIuMzA0Njg3NSwwIEMxMy4yNDIxODc1LDAuNjI1IDE0LjEyMTA5MzgsMS43MzgyODEyNSAxNC4zOTQ1MzEyLDIuNSBMMTQuOTgwNDY4OCwyLjUgQzE2LjI1LDIuNSAxNy40ODA0Njg4LDMuNzUgMTcuNDgwNDY4OCw1IEMxNy40ODA0Njg4LDYuMjUgMTYuMjEwOTM3NSw3LjUgMTQuOTgwNDY4OCw3LjUgTDExLjIzMDQ2ODgsNy41IEMxMCw3LjUgOC43MzA0Njg3NSw2LjI1IDguNzMwNDY4NzUsNSBDOC43MzA0Njg3NSw0LjU1MDc4MTI1IDguODY3MTg3NSw0LjEyMTA5Mzc1IDkuMDgyMDMxMjUsMy43NSBMNi40MDYyNSwzLjc1IEM2LjMwODU5Mzc1LDQuMTYwMTU2MjUgNi4yNSw0LjU3MDMxMjUgNi4yNSw1IEM2LjI1LDcuNSA4LjczMDQ2ODc1LDEwIDExLjIzMDQ2ODgsMTAgTDE1LDEwIEMxNy41LDEwIDIwLDcuNSAyMCw1IEMyMCwyLjUgMTcuNSwwIDE1LDAgTDE1LDAgWiBNNS42MDU0Njg3NSw3LjUgTDUuMDE5NTMxMjUsNy41IEMzLjc1LDcuNSAyLjUxOTUzMTI1LDYuMjUgMi41MTk1MzEyNSw1IEMyLjUxOTUzMTI1LDMuNzUgMy43ODkwNjI1LDIuNSA1LjAxOTUzMTI1LDIuNSBMOC43Njk1MzEyNSwyLjUgQzEwLDIuNSAxMS4yNjk1MzEyLDMuNzUgMTEuMjY5NTMxMiw1IEMxMS4yNjk1MzEyLDUuNDQ5MjE4NzUgMTEuMTMyODEyNSw1Ljg3ODkwNjI1IDEwLjkxNzk2ODgsNi4yNSBMMTMuNTkzNzUsNi4yNSBDMTMuNjkxNDA2Miw1LjgzOTg0Mzc1IDEzLjc1LDUuNDI5Njg3NSAxMy43NSw1IEMxMy43NSwyLjUgMTEuMjY5NTMxMiwwIDguNzY5NTMxMjUsMCBMNSwwIEMyLjUsMCAwLDIuNSAwLDUgQzAsNy41IDIuNSwxMCA1LDEwIEw3LjY5NTMxMjUsMTAgQzYuNzU3ODEyNSw5LjM3NSA1Ljg3ODkwNjI1LDguMjYxNzE4NzUgNS42MDU0Njg3NSw3LjUgTDUuNjA1NDY4NzUsNy41IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat;
|
|
468
|
-
margin-top: 15px;
|
|
469
|
-
height: 16px;
|
|
470
|
-
width: 20px;
|
|
471
|
-
}</code></pre>
|
|
472
|
-
</div>
|
|
473
|
-
</div>
|
|
474
|
-
<div class="example">
|
|
475
|
-
<div class="example-content">
|
|
476
|
-
<h3>CSS Icon</h3>
|
|
477
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
478
|
-
<a href="#" class="example-code-link">{}</a>
|
|
479
|
-
</div>
|
|
480
|
-
<div class="example-code">
|
|
481
|
-
<pre class="js"><code>anchors.options = {
|
|
482
|
-
visible: 'always',
|
|
483
|
-
placement: 'left',
|
|
484
|
-
icon: ''
|
|
485
|
-
};
|
|
486
|
-
anchors.add('h3');</code></pre>
|
|
487
|
-
<pre class="css"><code>/* See also: nicolasgallagher.com/pure-css-gui-icons */
|
|
488
|
-
.anchorjs-link {
|
|
489
|
-
border-color: #FF5231 #FF5231 transparent;
|
|
490
|
-
border-width: 15px 7px 6px;
|
|
491
|
-
border-style: solid;
|
|
492
|
-
margin-top: 10px;
|
|
493
|
-
font-size: 22px;
|
|
494
|
-
padding-right: 0 !important;
|
|
495
|
-
}</code></pre>
|
|
496
|
-
</div>
|
|
497
|
-
</div>
|
|
498
|
-
<div class="example">
|
|
499
|
-
<div class="example-content">
|
|
500
|
-
<h3>Emoji</h3>
|
|
501
|
-
<p id="emoji">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
502
|
-
<a href="#" class="example-code-link">{}</a>
|
|
503
|
-
</div>
|
|
504
|
-
<div class="example-code">
|
|
505
|
-
<pre class="js"><code>anchors.options = {
|
|
506
|
-
visible: 'always',
|
|
507
|
-
placement: 'left',
|
|
508
|
-
icon: 'β'
|
|
509
|
-
};
|
|
510
|
-
anchors.add('p');</code></pre>
|
|
511
|
-
<pre class="css"><code>.anchorjs-link {
|
|
512
|
-
margin-left: -1.8em !important;
|
|
513
|
-
}</code></pre>
|
|
514
|
-
</div>
|
|
515
|
-
</div>
|
|
516
|
-
|
|
517
|
-
<div class="example">
|
|
518
|
-
<div class="example-content">
|
|
519
|
-
<h3>Grunticon</h3>
|
|
520
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
521
|
-
<a href="#" class="example-code-link">{}</a>
|
|
522
|
-
</div>
|
|
523
|
-
<div class="example-code">
|
|
524
|
-
<pre class="js"><code>// Assuming you have set up
|
|
525
|
-
// grunticon and you have a
|
|
526
|
-
// grunticon class named
|
|
527
|
-
// 'icon-grunticon-link'...
|
|
528
|
-
anchors.options = {
|
|
529
|
-
visible: 'always',
|
|
530
|
-
class: 'icon-grunticon-link'
|
|
531
|
-
icon: ''
|
|
532
|
-
};
|
|
533
|
-
anchors.add('h3');</code></pre>
|
|
534
|
-
<pre class="css"><code>.anchorjs-link {
|
|
535
|
-
display: inline-block;
|
|
536
|
-
margin-left: 0.375em;
|
|
537
|
-
width: 0.375em;
|
|
538
|
-
height: 20px;
|
|
539
|
-
}</code></pre>
|
|
540
|
-
</div>
|
|
541
|
-
</div>
|
|
542
|
-
|
|
543
|
-
</div>
|
|
544
|
-
|
|
545
|
-
<h2 id="hover-examples" class="title">Hover examples</h2>
|
|
546
|
-
<div class="hover-examples">
|
|
547
|
-
<div class="example">
|
|
548
|
-
<div class="example-content">
|
|
549
|
-
<h3>Basic Hover</h3>
|
|
550
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
551
|
-
<a href="#" class="example-code-link">{}</a>
|
|
552
|
-
</div>
|
|
553
|
-
<div class="example-code">
|
|
554
|
-
<pre class="js"><code>anchors.add('h3');</code></pre>
|
|
555
|
-
</div>
|
|
556
|
-
</div>
|
|
557
|
-
<div class="example">
|
|
558
|
-
<div class="example-content">
|
|
559
|
-
<h3>Color Transition</h3>
|
|
560
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
561
|
-
<a href="#" class="example-code-link">{}</a>
|
|
562
|
-
</div>
|
|
563
|
-
<div class="example-code">
|
|
564
|
-
<pre class="js"><code>anchors.add('h3');</code></pre>
|
|
565
|
-
<pre class="css"><code>.anchorjs-link:hover {
|
|
566
|
-
color: #2500AD;
|
|
567
|
-
}
|
|
568
|
-
*:hover > .anchorjs-link {
|
|
569
|
-
transition: color .25s linear;
|
|
570
|
-
}</code></pre>
|
|
571
|
-
</div>
|
|
572
|
-
</div>
|
|
573
|
-
<div class="example">
|
|
574
|
-
<div class="example-content">
|
|
575
|
-
<h3>Shift Out</h3>
|
|
576
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
577
|
-
<a href="#" class="example-code-link">{}</a>
|
|
578
|
-
</div>
|
|
579
|
-
<div class="example-code">
|
|
580
|
-
<pre class="js"><code>anchors.options.placement = 'left';
|
|
581
|
-
anchors.add('h3');</code></pre>
|
|
582
|
-
<pre class="css"><code>.anchorjs-link {
|
|
583
|
-
transition: all .25s linear;
|
|
584
|
-
}
|
|
585
|
-
*:hover > .anchorjs-link {
|
|
586
|
-
margin-left: -1.125em !important;
|
|
587
|
-
}</code></pre>
|
|
588
|
-
</div>
|
|
589
|
-
</div>
|
|
590
|
-
|
|
591
|
-
<div class="example">
|
|
592
|
-
<div class="example-content">
|
|
593
|
-
<h3>Arrow</h3>
|
|
594
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
595
|
-
<a href="#" class="example-code-link">{}</a>
|
|
596
|
-
</div>
|
|
597
|
-
<div class="example-code">
|
|
598
|
-
<pre class="js"><code>anchors.options.icon = '# LINK';
|
|
599
|
-
anchors.add('h3');</code></pre>
|
|
600
|
-
<pre class="css"><code>/* Based on http://codepen.io/corysimmons/pen/NPBXbe */
|
|
601
|
-
/* Vendor prefixes not included */
|
|
602
|
-
.anchorjs-link {
|
|
603
|
-
position: relative;
|
|
604
|
-
top: 4px;
|
|
605
|
-
height: 36px;
|
|
606
|
-
flex: 1;
|
|
607
|
-
background: #FF5231;
|
|
608
|
-
color: white;
|
|
609
|
-
font-family: Helvetica, Arial, sans-serif;
|
|
610
|
-
font-weight: 200;
|
|
611
|
-
font-size: 1rem;
|
|
612
|
-
margin-right: -6%;
|
|
613
|
-
padding-right: 6%;
|
|
614
|
-
padding-left: 42px !important;
|
|
615
|
-
line-height: 38px;
|
|
616
|
-
transition: all 0.5s ease;
|
|
617
|
-
transform: translateX(100%);
|
|
618
|
-
}
|
|
619
|
-
.anchorjs-link::before {
|
|
620
|
-
position: absolute;
|
|
621
|
-
display: block;
|
|
622
|
-
left: 0;
|
|
623
|
-
width: 0;
|
|
624
|
-
height: 0;
|
|
625
|
-
content: '';
|
|
626
|
-
border: 18px solid #fdfdfd; /* Background color */
|
|
627
|
-
border-right-color: #FF5231;
|
|
628
|
-
transition: all 0.5s ease;
|
|
629
|
-
}
|
|
630
|
-
h2 {
|
|
631
|
-
display: flex;
|
|
632
|
-
}
|
|
633
|
-
*:hover > .anchorjs-link {
|
|
634
|
-
transform: translateX(0);
|
|
635
|
-
}
|
|
636
|
-
*:hover > .anchorjs-link:hover {
|
|
637
|
-
background: #FF806A;
|
|
638
|
-
}
|
|
639
|
-
*:hover > .anchorjs-link:hover::before {
|
|
640
|
-
border-right-color: #FF806A;
|
|
641
|
-
}</code></pre>
|
|
642
|
-
</div>
|
|
643
|
-
</div>
|
|
644
|
-
|
|
645
|
-
<div class="example">
|
|
646
|
-
<div class="example-content">
|
|
647
|
-
<h3>Tooltip</h3>
|
|
648
|
-
<p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
|
|
649
|
-
<a href="#" class="example-code-link">{}</a>
|
|
650
|
-
</div>
|
|
651
|
-
<div class="example-code">
|
|
652
|
-
<pre class="js"><code>anchors.options = { icon: 'Permalink' };
|
|
653
|
-
anchors.add('h3');</code></pre>
|
|
654
|
-
<pre class="css"><code>/* tooltip box */
|
|
655
|
-
.anchorjs-link:after {
|
|
656
|
-
display: inline-block;
|
|
657
|
-
transition: opacity .25s linear;
|
|
658
|
-
font-family: Verdana, sans-serif;
|
|
659
|
-
font-size: 0.75ex;
|
|
660
|
-
font-weight: 100;
|
|
661
|
-
padding: 0.5ex 1.5ex;
|
|
662
|
-
background: #444;
|
|
663
|
-
color: #fff;
|
|
664
|
-
border-radius: 0.6ex;
|
|
665
|
-
vertical-align: 0.8ex;
|
|
666
|
-
}
|
|
667
|
-
/* tooltip arrow */
|
|
668
|
-
.anchorjs-link:before {
|
|
669
|
-
content: '';
|
|
670
|
-
display: inline-block;
|
|
671
|
-
border-top: 0.3ex solid transparent;
|
|
672
|
-
border-right: 0.5ex solid #444;
|
|
673
|
-
border-bottom: 0.3ex solid transparent;
|
|
674
|
-
vertical-align: 0.35ex;
|
|
675
|
-
}
|
|
676
|
-
.anchorjs-link:hover:after {
|
|
677
|
-
background-color: #666;
|
|
678
|
-
}
|
|
679
|
-
.anchorjs-link:hover:before {
|
|
680
|
-
border-right-color: #666;
|
|
681
|
-
}</code></pre>
|
|
682
|
-
</div>
|
|
683
|
-
</div>
|
|
684
|
-
|
|
685
|
-
</div>
|
|
686
|
-
<footer class="footer"><p><small>Made by <a href="http://www.bryanbraun.com">Bryan</a>. You should <a href="https://twitter.com/intent/tweet?text=Hi%20%40BryanEBraun%2C%20">say hi</a> sometime. π</small></p></footer>
|
|
687
|
-
<a href="https://github.com/bryanbraun/anchorjs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
|
688
|
-
</section>
|
|
689
|
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
690
|
-
<script src="anchor.js"></script>
|
|
691
|
-
<script src="scripts.js"></script>
|
|
692
|
-
<script>
|
|
693
|
-
anchors.add('.main > h2, .main > h3, .main > section > h2, .main > section > h3').remove('.used-by-label');
|
|
694
|
-
|
|
695
|
-
var ex1 = new AnchorJS({ visible: 'always' });
|
|
696
|
-
ex1.add('.examples .example:nth-child(1) h3, .preview-examples .example:nth-child(1) h3');
|
|
697
|
-
|
|
698
|
-
var ex2 = new AnchorJS({
|
|
699
|
-
placement: 'left',
|
|
700
|
-
visible: 'always'
|
|
701
|
-
});
|
|
702
|
-
ex2.add('.examples .example:nth-child(2) h3');
|
|
703
|
-
|
|
704
|
-
var ex3 = new AnchorJS({
|
|
705
|
-
icon: 'ΒΆ',
|
|
706
|
-
visible: 'always',
|
|
707
|
-
placement: 'left'
|
|
708
|
-
});
|
|
709
|
-
ex3.add('.examples .example:nth-child(3) p, .preview-examples .example:nth-child(2) p');
|
|
710
|
-
|
|
711
|
-
var ex4 = new AnchorJS({
|
|
712
|
-
icon: '#',
|
|
713
|
-
visible: 'always'
|
|
714
|
-
});
|
|
715
|
-
ex4.add('.examples .example:nth-child(4) h3');
|
|
716
|
-
|
|
717
|
-
var ex5 = new AnchorJS({
|
|
718
|
-
icon: 'Β§',
|
|
719
|
-
visible: 'always',
|
|
720
|
-
placement: 'left'
|
|
721
|
-
});
|
|
722
|
-
ex5.add('.examples .example:nth-child(5) h3');
|
|
723
|
-
|
|
724
|
-
var ex6 = new AnchorJS({
|
|
725
|
-
icon: 'β‘',
|
|
726
|
-
visible: 'always'
|
|
727
|
-
});
|
|
728
|
-
ex6.add('.examples .example:nth-child(6) p');
|
|
729
|
-
|
|
730
|
-
var ex7 = new AnchorJS({
|
|
731
|
-
icon: '# LINK',
|
|
732
|
-
visible: 'always'
|
|
733
|
-
});
|
|
734
|
-
ex7.add('.examples .example:nth-child(7) h3');
|
|
735
|
-
|
|
736
|
-
var ex8 = new AnchorJS({
|
|
737
|
-
icon: '',
|
|
738
|
-
visible: 'always',
|
|
739
|
-
placement: 'left'
|
|
740
|
-
});
|
|
741
|
-
ex8.add('.examples .example:nth-child(8) h3');
|
|
742
|
-
|
|
743
|
-
var ex9 = new AnchorJS({
|
|
744
|
-
visible: 'always',
|
|
745
|
-
placement: 'left'
|
|
746
|
-
});
|
|
747
|
-
ex9.add('.examples .example:nth-child(9) h3');
|
|
748
|
-
|
|
749
|
-
var ex10 = new AnchorJS({
|
|
750
|
-
visible: 'always',
|
|
751
|
-
class: 'ajs-10',
|
|
752
|
-
icon: '\uf0c1'
|
|
753
|
-
});
|
|
754
|
-
ex10.add('.examples .example:nth-child(10) h3');
|
|
755
|
-
|
|
756
|
-
var ex11 = new AnchorJS({
|
|
757
|
-
visible: 'always',
|
|
758
|
-
icon: ''
|
|
759
|
-
});
|
|
760
|
-
ex11.add('.examples .example:nth-child(11) h3');
|
|
761
|
-
|
|
762
|
-
var ex12 = new AnchorJS({
|
|
763
|
-
visible: 'always',
|
|
764
|
-
placement: 'left',
|
|
765
|
-
icon: ''
|
|
766
|
-
});
|
|
767
|
-
ex12.add('.examples .example:nth-child(12) h3');
|
|
768
|
-
|
|
769
|
-
var ex13 = new AnchorJS({
|
|
770
|
-
visible: 'always',
|
|
771
|
-
placement: 'left',
|
|
772
|
-
icon: ''
|
|
773
|
-
});
|
|
774
|
-
ex13.add('.examples .example:nth-child(13) h3');
|
|
775
|
-
|
|
776
|
-
var ex14 = new AnchorJS({
|
|
777
|
-
visible: 'always',
|
|
778
|
-
placement: 'left',
|
|
779
|
-
icon: 'β'
|
|
780
|
-
});
|
|
781
|
-
ex14.add('.examples .example:nth-child(14) p');
|
|
782
|
-
|
|
783
|
-
var ex15 = new AnchorJS({
|
|
784
|
-
visible: 'always',
|
|
785
|
-
class: 'icon-grunticon-link',
|
|
786
|
-
icon: ''
|
|
787
|
-
});
|
|
788
|
-
ex15.add('.examples .example:nth-child(15) h3');
|
|
789
|
-
|
|
790
|
-
var hovEx1 = new AnchorJS();
|
|
791
|
-
hovEx1.add('.hover-examples .example:nth-child(1) h3');
|
|
792
|
-
|
|
793
|
-
var hovEx2 = new AnchorJS();
|
|
794
|
-
hovEx2.add('.hover-examples .example:nth-child(2) h3');
|
|
795
|
-
|
|
796
|
-
var hovEx3 = new AnchorJS({ placement: 'left' });
|
|
797
|
-
hovEx3.add('.hover-examples .example:nth-child(3) h3');
|
|
798
|
-
|
|
799
|
-
var hovEx4 = new AnchorJS({ icon: '# LINK' });
|
|
800
|
-
hovEx4.add('.hover-examples .example:nth-child(4) h3');
|
|
801
|
-
|
|
802
|
-
var hovEx5 = new AnchorJS({ icon: 'Permalink' });
|
|
803
|
-
hovEx5.add('.hover-examples .example:nth-child(5) h3');
|
|
804
|
-
</script>
|
|
805
|
-
<script src="//cdn.jsdelivr.net/prism/1.5.1/prism.js"></script>
|
|
806
|
-
</body>
|
|
807
|
-
</html>
|