Inital public commit

Author: Altrozero

README.md

@@ -1,2 +1,48 @@
 # AlMainAlert
-jQuery drop down alert plugin
+Really simple jQuery drop down alert plugin being used on a few different websites. Pulled out for hosting on a single domain to aid updating it across multiple platforms.
+
+## Getting Started
+
+Add to the head of the HTML file, adjust paths accordingly
+
+```
+<script src="alMainAlert/alMainAlert.js"></script>
+<link rel="stylesheet" type="text/css" href="alMainAlert/css/alMainAlert.css" />
+```
+
+## How to use
+
+### Standard alert with a message
+
+```
+$.alSiteAlerts({message: 'Hello World'});
+```
+
+### Applying a style
+
+```
+$.alSiteAlerts({message: 'Hello World', class: 'alMainAlertError'});
+```
+
+Default Styles
+
+```
+Alert (default): alMainAlert
+Error: alMainAlertError
+```
+
+### Type (Display)
+
+There are two types, overlay is used by default. You can specify "block" if you do not want the alert to appear on top of anything else.
+
+```
+$.alSiteAlerts({message: 'Hello World', type: 'block'});
+```
+
+Strongly suggest you do not mix block with overlay or risk message alerts stacked on top of each other.
+
+## Things To Do When / If Needed
+
+* Option to have the message disappear after a certain amount of time. Prehaps with a fade
+* Box style notifications instead
+* Add option for onscroll alerts that appear as a block at the top but will scroll with the page.

alMainAlert/alMainAlert.js

@@ -0,0 +1,100 @@
+/**
+ * Simple jQuery plugin for showing alerts and errors on a page.
+ * 
+ * @author Timothy Wilson 2018 <https://github.com/Altrozero>
+ * 
+ * Thanks to; http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
+ * 
+ * ******************************
+ * SETTINGS
+ * ******************************
+ * message string "The displayed content"
+ * class string "The style you want to use"
+ * type [overlay|block] "overlay is the default, you can use block when you dont want it to cover content.
+ *    It's suggested you don't mixed and match both in a project."
+ *  
+ */
+
+(function($) {
+  $.alMainAlert = function(options) {
+    var defaults = {
+      message: 'Test Message New',
+      class: 'alMainAlert',
+      type: 'overlay' // Options Overlay or Block
+    }
+
+    var plugin = this;
+
+    plugin.settings = {}
+
+    plugin.init = function() {
+      plugin.settings = $.extend({}, defaults, options);
+      
+      // Add the holder for hoverovers
+      if (!$("#alSiteAlert-holder").length) {
+        jQuery("<div/>", {
+          id: "alSiteAlert-holder",
+          css: {
+            position: "absolute",
+            top: "0px",
+            right: "0px",
+            left: "0px"
+          }
+        }).appendTo("body");
+      }
+      
+      // Add the holder for dropdowns
+      if (!$("#alSiteAlert-holderBlock").length) {
+        jQuery("<div/>", {
+          id: "alSiteAlert-holderBlock",
+          css: {
+            position: "relative",
+            top: "0px",
+            right: "0px",
+            left: "0px"
+          }
+        }).prependTo("body");
+      }
+
+      plugin.add();
+    }
+
+    plugin.add = function() {
+      var holder = jQuery("<div/>", {
+        class: plugin.settings.class,
+        html: plugin.settings.message
+      }).append(
+        jQuery("<div/>", {
+          class: "alMainAlertClose",
+          html: "X",
+          click: function(){
+              jQuery(this).parent().remove();
+          }
+        })
+      );
+    
+      switch(plugin.settings.type) {
+        case "block":
+          holder.appendTo("#alSiteAlert-holderBlock");
+          break;
+        case "overlay":
+        default:
+          holder.appendTo("#alSiteAlert-holder");
+          break;
+      }
+    }
+
+    // Start the plugin
+    plugin.init();
+  }
+
+  $.fn.alMainAlert = function(options) {
+      return this.each(function() {
+          if (undefined == $(this).data("alMainAlert")) {
+              var plugin = new $.alSiteAlerts(this, options);
+              $(this).data("alMainAlert", plugin);
+          }
+      });
+
+  }
+})(jQuery);

alMainAlert/css/alMainAlert.css

@@ -0,0 +1,36 @@
+/**
+ * Simple jQuery plugin for showing alerts and errors on a page.
+ * 
+ * @author Timothy Wilson 2018 <https://github.com/Altrozero>
+ */
+
+div.alMainAlert, div.alMainAlertError {
+  position: relative;
+  padding: 10px 50px 10px 30px;
+  
+  text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+  z-index: 1;
+}
+
+div.alMainAlertError {
+  background-color: #f00;
+
+  color: #fff;
+}
+
+div.alMainAlert {
+  background-color: #9c9;
+
+  color: #fff;
+}
+
+div.alMainAlertClose {
+  position: absolute;
+  top: 10px;
+  right: 30px;
+
+  cursor: pointer;
+  font-family: Arial, Veranda;
+}

example.html

@@ -0,0 +1,35 @@
+<html>
+  <head>
+    <title>Example Implementation</title>
+    
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script src="alMainAlert/alMainAlert.js"></script>
+    <link rel="stylesheet" type="text/css" href="alMainAlert/css/alMainAlert.css" />
+    
+    <style>
+      html, body {
+        padding: 0px;
+        margin: 0px;
+      }
+      
+      .content {
+        margin: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="content">
+    <h1>AlMainAlert Example</h1>
+      <b>Overlay</b><br />
+      <input type="button" onclick="$.alMainAlert({message: 'Testing a really long message this is a really long message testing a really long message blah blah blah blahTesting a really long message this is a really long message testing a really long message blah blah blah blahTesting a really long message this is a really long message testing a really long message blah blah blah blah'});" value="Add Alert Long Message" />
+      <input type="button" onclick="$.alMainAlert({message: 'Test Alert'});" value="Add Alert" />
+      <input type="button" onclick="$.alMainAlert();" value="Add Alert Default No Settings" />
+      <input type="button" onclick="$.alMainAlert({message: 'Example Error', class: 'alMainAlertError'});" value="Add Alert Error" /><br />
+      <br />
+      <b>Block</b><br />
+      <input type="button" onclick="$.alMainAlert({message: 'Testing a really long message this is a really long message testing a really long message blah blah blah blahTesting a really long message this is a really long message testing a really long message blah blah blah blahTesting a really long message this is a really long message testing a really long message blah blah blah blah', type: 'block'});" value="Add Alert Long Message" />
+      <input type="button" onclick="$.alMainAlert({message: 'Test Alert', type: 'block'});" value="Add Alert" />
+      <input type="button" onclick="$.alMainAlert({message: 'Example Error', class: 'alMainAlertError', type: 'block'});" value="Add Alert Error" />
+    </div>
+  </body>
+</html>