├── .gitignore
├── LICENSE
├── README.md
├── jquery.stickyalert.css
├── jquery.stickyalert.js
├── package.json
├── screenshot.png
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Tyler Longren
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jquery-sticky-alert
2 | A minimal jQuery plugin to add a sticky alert bar to the top of your website. Inspired by [this pen on CodePen](http://codepen.io/thommybrowne/details/katou). A demo can be found running at [http://sticky.longren.io](http://sticky.longren.io), which is hosted on [GitHub Pages](https://pages.github.com/).
3 |
4 | ---
5 |
6 | ## Installation
7 |
8 | ### Install manually
9 | Include ```jquery.stickyalert.js``` after including jQuery itself:
10 |
11 | ```html
12 |
13 | ```
14 |
15 | Also include ```jquery.stickyalerts.css```:
16 |
17 | ```html
18 |
19 | ```
20 |
21 | or
22 |
23 | ### Install using [Yarn](https://yarnpkg.com/):
24 |
25 | ```
26 | yarn add jquery-sticky-alert
27 | ```
28 |
29 | or
30 |
31 | ### Install using [npm](https://www.npmjs.com/):
32 | ```
33 | npm install jquery-sticky-alert
34 | ```
35 |
36 | ## Usage
37 |
38 | I usually add this in my `````` area, after jQuery and ```jquery.stickyalert.js``` have been loaded.
39 | ```javascript
40 | $(document).ready(function() {
41 | $('#alert-container').stickyalert({
42 | barColor: '#222', // alert background color
43 | barFontColor: '#FFF', // text font color
44 | barFontSize: '1.1rem', // text font size
45 | barText: 'I like bass and car audio :)', // the text to display, linked with barTextLink
46 | barTextLink: 'https://www.longren.io/', // url for anchor
47 | cookieRememberDays: '2', // in days
48 | displayDelay: '3000' // in milliseconds, 3 second default
49 | });
50 | });
51 | ```
52 |
53 | You'll also need a div with id ```alert-container```, according to the usage example above, at least:
54 | ```html
55 |
56 | ```
57 |
58 | Your ```alert-container``` will contain the sticky alert. ```:)```
59 |
60 | ## Issues
61 | If you nocitce any problems, please [submit an issue](https://github.com/tlongren/colors-anchor-theme/issues). [](https://github.com/tlongren/jquery-sticky-alert/issues)
62 |
63 | ## How to Contribute
64 | 1. Fork it
65 | 2. Create your feature branch (`git checkout -b my-new-feature`)
66 | 3. Commit your changes (`git commit -am 'Add some feature'`)
67 | 4. Push to the branch (`git push origin my-new-feature`)
68 | 5. Create new Pull Request
69 |
70 | ##A Screenshot
71 | 
72 |
73 |
--------------------------------------------------------------------------------
/jquery.stickyalert.css:
--------------------------------------------------------------------------------
1 | * { margin:0; padding:0; }
2 |
3 | div.alert-box {
4 | display: block;
5 | padding: 6px 7px;
6 | color:#eee;
7 | text-align: center;
8 | border: 1px solid rgba(0, 0, 0, 0.1);
9 | text-shadow: 0 1px rgba(0, 0, 0, 0.7);
10 | position: fixed;
11 | width:100%;
12 | }
13 |
14 | div.alert-box a {
15 | color:#FFF;
16 | text-decoration:none;
17 | }
18 |
19 | .alert-box a.close { color: #eee; position: absolute; right: 30px; top: 0; font-size: 18px; opacity: 0.8; padding: 4px; text-decoration:none; }
20 |
21 | .alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; }
--------------------------------------------------------------------------------
/jquery.stickyalert.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery Sticky Alert v0.1.6
3 | * https://github.com/tlongren/jquery-sticky-alert
4 | *
5 | * Copyright 2018 Tyler Longren
6 | * Released under the MIT license.
7 | * http://jquery.org/license
8 | *
9 | * Date: January 30, 2018
10 | */
11 | (function($){
12 |
13 | $.fn.extend({
14 |
15 | stickyalert: function(options) {
16 |
17 | var defaults = {
18 | barColor: '#222', // alert background color
19 | barFontColor: '#FFF', // text font color
20 | barFontSize: '1.1rem', // text font size
21 | barText: 'I like bass and car audio :)', // the text to display, linked with barTextLink
22 | barTextLink: 'https://www.longren.io/', // url for anchor
23 | cookieRememberDays: '2' // in days
24 | };
25 |
26 | var options = $.extend(defaults, options);
27 |
28 | return this.each(function() {
29 |
30 | if (document.cookie.indexOf("jqsa") >= 0) {
31 |
32 | $('.alert-box').remove();
33 |
34 | }
35 |
36 | else {
37 | // show the alert
38 | $('