├── README.md ├── lab-badge.min.js ├── index.html └── lab-badge.js /README.md: -------------------------------------------------------------------------------- 1 | # lab-badge 2 | 3 | Add a lab badge to any website by including a single JavaScript file. 4 | 5 | 6 | ## Usage 7 | 8 | Just save the `lab-badge.min.js` file from this repository into the project, and add the following line of JavaScript to the site: 9 | 10 | 11 | 12 | E.G. 13 | 14 | 15 | 16 | That's it. The script will automatically initialise when the page has finished loading. 17 | 18 | 19 | ## Example 20 | 21 | This repo contains an example HTML page that shows how to use the script. 22 | 23 | 24 | ## Source 25 | 26 | This repo also contains the source code. If a change is made, the minified file needs to be manually recompiled. 27 | 28 | This can be done with an [online compressor](http://refresh-sf.com/) 29 | 30 | 31 | ## Deploy 32 | 33 | To publish `lab-badge.min.js` to Github pages (e.g. [http://orangespaceman.github.io/lab-badge/lab-badge.min.js](http://orangespaceman.github.io/lab-badge/lab-badge.min.js)), the file `lab-badge.min.js` should be copied into the root of the `gh-pages` branch 34 | -------------------------------------------------------------------------------- /lab-badge.min.js: -------------------------------------------------------------------------------- 1 | /*! github.com/orangespaceman/lab-badge */ 2 | !function(){function t(){var t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText=r:t.appendChild(document.createTextNode(r)),document.getElementsByTagName("head")[0].appendChild(t)}function n(){var n,r,p,m,d=document;n=d.getElementsByTagName("body")[0],r=n.appendChild(d.createElement("p")),r.id=i,p=d.createElement("a"),p.innerHTML=o,p.href=a,r.appendChild(p),m=d.createElement("span"),m.innerHTML="<>",p.appendChild(m),t(),e(p,"click",function(t){return window.open(a),t&&t.preventDefault(),!1})}function e(t,n,e){if(t.addEventListener)return t.addEventListener(n,e,!1),!0;if(t.attachEvent){var o=t.attachEvent("on"+n,e);return o}return!1}var o="Back to my website",a="https://f90.co.uk",i="lab-badge",r="#lab-badge { position:fixed !important; left: auto !important; right:0 !important; top:auto !important; bottom:100px !important; padding:0 !important; margin:0 !important; background:none !important; z-index: 99; }#lab-badge a { display:block !important; position:relative !important; right: -112px !important; top:0 !important; background: rgba(255, 153, 0, 0.5) !important; border:3px solid #f90 !important; border-top-left-radius:30px !important; border-bottom-left-radius:30px !important; border-right:none !important; padding:8px 8px 8px 40px !important; color:#fff !important; font-family:Georgia, sans-serif !important; font-size:12px !important; line-height:1.5 !important; font-style:italic !important; font-weight:normal !important; text-decoration:none !important; transition:all 0.25s ease-in-out; }#lab-badge span { display:block !important; position: absolute !important; left: 8px !important; top: 5px !important; color: #fff !important; font-size: 20px !important; line-height: 1 !important; letter-spacing: 1px !important; }#lab-badge a:hover { right:0 !important; color:#fff !important; border-color:#f90 !important; background: rgba(255, 153, 0, 0.75) !important; }";e(window,"load",n)}(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lab badge test 6 | 7 | 8 | 9 | 10 | 11 |

Lab badge test

12 | 13 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

14 | 15 |

16 | 17 |

18 | 19 |

20 | 21 | 22 | -------------------------------------------------------------------------------- /lab-badge.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Add a lab badge to a site 3 | */ 4 | (function () { 5 | 6 | var linkText = "Back to my website"; 7 | var linkHref = "https://f90.co.uk"; 8 | var paraId = "lab-badge"; 9 | var css = "#lab-badge { position:fixed !important; left: auto !important; right:0 !important; top:auto !important; bottom:100px !important; padding:0 !important; margin:0 !important; background:none !important; z-index: 99; }" + 10 | "#lab-badge a { display:block !important; position:relative !important; right: -112px !important; top:0 !important; background: rgba(255, 153, 0, 0.5) !important; border:3px solid #f90 !important; border-top-left-radius:30px !important; border-bottom-left-radius:30px !important; border-right:none !important; padding:8px 8px 8px 40px !important; color:#fff !important; font-family:Georgia, sans-serif !important; font-size:12px !important; line-height:1.5 !important; font-style:italic !important; font-weight:normal !important; text-decoration:none !important; transition:all 0.25s ease-in-out; }" + 11 | "#lab-badge span { display:block !important; position: absolute !important; left: 8px !important; top: 5px !important; color: #fff !important; font-size: 20px !important; line-height: 1 !important; letter-spacing: 1px !important; }" + 12 | "#lab-badge a:hover { right:0 !important; color:#fff !important; border-color:#f90 !important; background: rgba(255, 153, 0, 0.75) !important; }"; 13 | 14 | // add CSS 15 | function addCss () { 16 | var s = document.createElement("style"); 17 | s.type = "text/css"; 18 | if (s.styleSheet) { 19 | s.styleSheet.cssText = css; 20 | } else { 21 | s.appendChild(document.createTextNode(css)); 22 | } 23 | document.getElementsByTagName("head")[0].appendChild(s); 24 | } 25 | 26 | // init 27 | function init () { 28 | 29 | // elements 30 | var body, p, a, span, 31 | d = document; 32 | 33 | body = d.getElementsByTagName("body")[0]; 34 | 35 | // create the paragraph container as a child of the BODY element 36 | p = body.appendChild(d.createElement("p")); 37 | p.id = paraId; 38 | 39 | 40 | // create an anchor element for link 41 | a = d.createElement("a"); 42 | a.innerHTML = linkText; 43 | a.href = linkHref; 44 | p.appendChild(a); 45 | 46 | // create inner text 47 | span = d.createElement("span"); 48 | span.innerHTML = "<>"; 49 | a.appendChild(span); 50 | 51 | addCss(); 52 | 53 | // set up the onclick event to open new window on click 54 | addEvent(a, "click", function(e) { 55 | window.open(linkHref); 56 | if (e) { 57 | e.preventDefault(); 58 | } 59 | return false; 60 | }); 61 | } 62 | 63 | // add event - x browser 64 | function addEvent (obj, evType, fn) { 65 | if (obj.addEventListener){ 66 | obj.addEventListener(evType, fn, false); 67 | return true; 68 | } else if (obj.attachEvent){ 69 | var r = obj.attachEvent("on" + evType, fn); 70 | return r; 71 | } else { 72 | return false; 73 | } 74 | } 75 | 76 | // init 77 | addEvent(window, "load", init); 78 | })(); --------------------------------------------------------------------------------