Permalink
Browse files

v2.0.0: Rebuilt in vanilla JS

  • Loading branch information...
1 parent 5f9b869 commit b0262a9fcb67f8ca82b6787351674cebb25e46e1 Mark Goodyear committed Feb 13, 2013
Showing with 123 additions and 155 deletions.
  1. +14 −44 README.md
  2. +33 −0 css/styles.css
  3. +18 −0 demo.html
  4. +48 −0 js/browserBlast.js
  5. +10 −0 js/browserBlast.min.js
  6. +0 −101 js/jquery.browserBlast.js
  7. +0 −8 js/jquery.browserBlast.min.js
  8. +0 −2 js/lib/jquery-1.8.3.min.js
View
@@ -3,69 +3,39 @@
## Overview
-BrowserBlast is a lightweight and fully customisable jQuery plugin to display a warning for users of IE7 and below to let them know their browser isn’t supported anymore.
+BrowserBlast is a lightweight and fully customisable script to display a warning for users of IE7 and below to let them know their browser isn’t supported anymore.
### Demo
<http://markgoodyear.com/labs/browserblast/>
-
-### Download
-
-<https://github.com/markgoodyear/browserblast>
-
### Article
-<http://markgoodyear.com/2012/12/moving-past-ie7-with-browserblast-plugin>
+<http://markgoodyear.com/2013/02/browserblast-2-relaunch/>
## How to use
-Include the `jquery.browserBlast.min.js` file in your document and place the following into the head of your document to initiate the plugin. Make sure you've also included jQuery.
+Include the `browserBlast.min.js` file in your document and place the following into the head of your document to initiate the plugin. Make sure you've also included jQuery.
- <script>
- $(function () {
- $.browserBlast({
- // Settings here
- });
- });
+ <script type="text/javascript" src="browserBlast.min.js"></script>
+ <script>
+ browserBlast();
</script>
-###Options
-
-Option | Default | Usage
-:--- |:--- |:---
-devMode |`'false'` |Set `true` to display banner on all browsers
-supportedIE |`'8'` |Set which version of IE you support
-customCSS |`false` |Set `true` to use custom CSS
-fixed |`true` |Set `false` to toggle fixed or non-fixed banner
-linkColor |`'#56a119'` |Set link color
-linkHover |`'#333'` |Set link hover color
-linkUnderline |`'true'` |Use `false` for no underline
-bannerHeight |`'40'` |Banner height in px
-background |`'#FAF4AF'` |Background colour of the bar
-textColor |`'#333'` |Text color
-fontSize |`'12px'` |Font size of the message
-fontFamily |`'sans-serif'` |`sans` / `sans-serif`, or define a css font-stack
-borderSize |`'2'` |Border size in px
-borderStyle |`'solid'` |Style of the border, `solid`, `dotted`, `dashed`
-borderColor |`'#D4C790'` |Color of the border
-warningID |`'unsupported'` |Set the selector ID for the banner
-
-
-#### Custom message
-
-You can set a custom message with the `message` option to overide the default message:
-
- message: "Stop using IE!"
-
+### Settings
+ browserBlast({
+ devMode: false, // Show warning on all browsers for testing
+ supportedIE: '8', // Supported IE version, warning will display on older browsers
+ message: 'Hey! Your browser is unsupported. Please <a href='http:// browsehappy.com' target='_blank'>upgrade</a> for the best experience.' // Set custom message
+ });
## Support
-If you have any issues, feedback or suggestions, please send an email to hello[at]markgoodyear.com or find me on Twitter <a href="http://twitter.com/markgdyr">@markgdyr</a>.
+If you have any issues, feedback or suggestions, please log an issue on <a target="_blank" href="https://github.com/markgoodyear/browserblast">Github</a> or find me on Twitter: <a href="http://twitter.com/markgdyr">@markgdyr</a>.
## Version history
-
+- 2.0.0 - Vanilla JS release, no jQuery dependancies
- 1.0.0 - Initial release
View
@@ -0,0 +1,33 @@
+/* ----------------------------------------
+ BrowserBlast by @markgdyr
+ markgoodyear.com
+---------------------------------------- */
+#browserblast {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ border-bottom: 2px solid #D4C790;
+ font-family: sans-serif;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 40px;
+ color: #6d6647;
+ text-align: center;
+ background: #FAF4AF;
+}
+ #browserblast a {
+ color: green;
+ text-decoration: underline;
+ }
+
+/*
+To prevent the banner overlapping content
+.unsupported-browser is appened to the HTML tag
+so you can push it down. The margin should be
+total hight of the banner (height + border).
+*/
+.unsupported-browser {
+ margin-top: 42px;
+}
View
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>BrowserBlast demo - Mark Goodyear</title>
+ <link rel="stylesheet" href="css/styles.css">
+ </head>
+
+ <body>
+ <!-- BrowserBlast Basic Setup -->
+ <script type="text/javascript" src="js/browserBlast.min.js"></script>
+ <script type="text/javascript">
+ browserBlast({
+ devMode:true // Remove this for live, dev mode is for testing all browsers
+ });
+ </script>
+ </body>
+</html>
View
@@ -0,0 +1,48 @@
+/*------------------------------------------------------------
+
+ browserBlast v2.0.0
+ Author: Mark Goodyear - http://www.markgoodyear.com
+ Git: https://github.com/markgoodyear/browserblast
+ Email: hello@markgoodyear.com
+ Twitter: @markgdyr
+
+------------------------------------------------------------*/
+
+;var browserBlast = function (options) {
+
+ "use strict";
+
+ var o = options || {},
+ devMode = o.devMode || false,
+ supportedIE = o.supportedIE || '8',
+ message = o.message || "Hey! Your browser is unsupported. Please <a href='http://browsehappy.com' target='_blank'>upgrade</a> for the best experience.";
+
+ function warningSetup(options) {
+ var elem = document.createElement('div');
+ elem.id = "browserblast";
+ elem.style.zIndex = "2147483647";
+ elem.innerHTML = message;
+ document.body.appendChild(elem);
+ document.documentElement.className+=' unsupported-browser'
+ }
+
+ function getIEVersion() {
+ var rv = -1;
+ if (navigator.appName === 'Microsoft Internet Explorer') {
+ var ua = navigator.userAgent;
+ var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+
+ if (re.exec(ua) !== null) {
+ rv = parseFloat(RegExp.$1);
+ }
+ }
+ return rv;
+ }
+
+ var version = getIEVersion();
+
+ if (version > -1 && version < supportedIE + ".0" || devMode === true) {
+ warningSetup();
+ }
+
+};
@@ -0,0 +1,10 @@
+/*------------------------------------------------------------
+
+ browserBlast v2.0.0
+ Author: Mark Goodyear - http://www.markgoodyear.com
+ Git: https://github.com/markgoodyear/browserblast
+ Email: hello@markgoodyear.com
+ Twitter: @markgdyr
+
+------------------------------------------------------------*/
+;var browserBlast=function(e){"use strict";function s(e){var t=document.createElement("div");t.id="browserblast";t.style.zIndex="2147483647";t.innerHTML=i;document.body.appendChild(t);document.documentElement.className+=" unsupported-browser"}function o(){var e=-1;if(navigator.appName==="Microsoft Internet Explorer"){var t=navigator.userAgent;var n=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");if(n.exec(t)!==null){e=parseFloat(RegExp.$1)}}return e}var t=e||{},n=t.devMode||false,r=t.supportedIE||"8",i=t.message||"Hey! Your browser is unsupported. Please <a href='http://browsehappy.com' target='_blank'>upgrade</a> for the best experience.";var u=o();if(u>-1&&u<r+".0"||n===true){s()}};
@@ -1,101 +0,0 @@
-/*------------------------------------------------------------
-
- browserBlast v1.0.0
- Author: Mark Goodyear - http://www.markgoodyear.com
- Git: https://github.com/markgoodyear/browserblast
- Email: hello@markgoodyear.com
- Twitter: @markgdyr
-
-------------------------------------------------------------*/
-
-;(function ($) {
-
- $.browserBlast = function (options) {
-
- //Default settings
- var defaults = {
- devMode: false,
- supportedIE: "8",
- customCSS: false,
- fixed: true,
- linkColor: '#56a119',
- linkHover: '#333',
- linkUnderline: true,
- bannerHeight: '40',
- background: '#FAF4AF',
- textColor: '#333',
- fontSize: '12px',
- fontFamily: 'sans-serif',
- borderSize: '2',
- borderStyle: 'solid',
- borderColor: '#D4C790',
- warningID: 'unsupported',
- message: "Hey! Your browser is unsupported. Please <a href='http://browsehappy.com' target='_blank'>upgrade</a> for the best experience."
- };
-
- var o = $.extend(defaults, options);
-
- // Setup
- function warningSetup() {
-
- // HTML for warning
- var warningHTML = "<div id='" + o.warningID + "'>" + o.message + "</div>";
-
- // Setup warningID as var for easy access
- var divID = "#" + o.warningID;
-
- $("body").append(warningHTML);
-
- // Default theme
- if (o.customCSS === false) {
- $(divID).css({
- top: '0',
- left: '0',
- width: '100%',
- fontSize: o.fontSize,
- 'font-family': o.fontFamily,
- textAlign: 'center',
- color: o.txtColor,
- backgroundColor: o.background,
- "border-bottom": o.borderSize + 'px',
- "border-bottom-style": o.borderStyle,
- "border-bottom-color": o.borderColor,
- height: o.bannerHeight + 'px',
- lineHeight: o.bannerHeight + 'px',
- zIndex: 999999
- });
-
- // Set body offset so no content is hidden
- var warningOffset = (+o.bannerHeight) + (+o.borderSize);
- $("body").css({marginTop: warningOffset});
-
- // Set positioning
- $(divID).css( (o.fixed === true) ? {position: "fixed"} : {position: "absolute"});
-
- // Set link underline
- $(divID + " a").css( (o.linkUnderline === true) ? {'text-decoration': 'underline'} : {'text-decoration': 'none'});
-
- // Link color
- $(divID + " a").css({color: o.linkColor});
-
- // Link hover
- $(divID + " a").hover(function () {
- $(this).css({color: o.linkHover});
- }, function () {
- $(this).css({color: o.linkColor});
- });
- }
- }
-
- // For IE
- if ($.browser.msie && parseInt($.browser.version, 10) < o.supportedIE && o.devMode === false ) {
- warningSetup();
- }
-
- // Dev mode
- else if (o.devMode === true) {
- warningSetup();
- }
-
- }; // End browserBlast function
-}(jQuery));
Oops, something went wrong.
Oops, something went wrong.

0 comments on commit b0262a9

Please sign in to comment.