Skip to content

Commit f93a2d1

Browse files
committed
Inital public commit
1 parent e5dbcc8 commit f93a2d1

4 files changed

Lines changed: 218 additions & 1 deletion

File tree

README.md

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,48 @@
11
# AlMainAlert
2-
jQuery drop down alert plugin
2+
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.
3+
4+
## Getting Started
5+
6+
Add to the head of the HTML file, adjust paths accordingly
7+
8+
```
9+
<script src="alMainAlert/alMainAlert.js"></script>
10+
<link rel="stylesheet" type="text/css" href="alMainAlert/css/alMainAlert.css" />
11+
```
12+
13+
## How to use
14+
15+
### Standard alert with a message
16+
17+
```
18+
$.alSiteAlerts({message: 'Hello World'});
19+
```
20+
21+
### Applying a style
22+
23+
```
24+
$.alSiteAlerts({message: 'Hello World', class: 'alMainAlertError'});
25+
```
26+
27+
Default Styles
28+
29+
```
30+
Alert (default): alMainAlert
31+
Error: alMainAlertError
32+
```
33+
34+
### Type (Display)
35+
36+
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.
37+
38+
```
39+
$.alSiteAlerts({message: 'Hello World', type: 'block'});
40+
```
41+
42+
Strongly suggest you do not mix block with overlay or risk message alerts stacked on top of each other.
43+
44+
## Things To Do When / If Needed
45+
46+
* Option to have the message disappear after a certain amount of time. Prehaps with a fade
47+
* Box style notifications instead
48+
* Add option for onscroll alerts that appear as a block at the top but will scroll with the page.

alMainAlert/alMainAlert.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* Simple jQuery plugin for showing alerts and errors on a page.
3+
*
4+
* @author Timothy Wilson 2018 <https://github.com/Altrozero>
5+
*
6+
* Thanks to; http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
7+
*
8+
* ******************************
9+
* SETTINGS
10+
* ******************************
11+
* message string "The displayed content"
12+
* class string "The style you want to use"
13+
* type [overlay|block] "overlay is the default, you can use block when you dont want it to cover content.
14+
* It's suggested you don't mixed and match both in a project."
15+
*
16+
*/
17+
18+
(function($) {
19+
$.alMainAlert = function(options) {
20+
var defaults = {
21+
message: 'Test Message New',
22+
class: 'alMainAlert',
23+
type: 'overlay' // Options Overlay or Block
24+
}
25+
26+
var plugin = this;
27+
28+
plugin.settings = {}
29+
30+
plugin.init = function() {
31+
plugin.settings = $.extend({}, defaults, options);
32+
33+
// Add the holder for hoverovers
34+
if (!$("#alSiteAlert-holder").length) {
35+
jQuery("<div/>", {
36+
id: "alSiteAlert-holder",
37+
css: {
38+
position: "absolute",
39+
top: "0px",
40+
right: "0px",
41+
left: "0px"
42+
}
43+
}).appendTo("body");
44+
}
45+
46+
// Add the holder for dropdowns
47+
if (!$("#alSiteAlert-holderBlock").length) {
48+
jQuery("<div/>", {
49+
id: "alSiteAlert-holderBlock",
50+
css: {
51+
position: "relative",
52+
top: "0px",
53+
right: "0px",
54+
left: "0px"
55+
}
56+
}).prependTo("body");
57+
}
58+
59+
plugin.add();
60+
}
61+
62+
plugin.add = function() {
63+
var holder = jQuery("<div/>", {
64+
class: plugin.settings.class,
65+
html: plugin.settings.message
66+
}).append(
67+
jQuery("<div/>", {
68+
class: "alMainAlertClose",
69+
html: "X",
70+
click: function(){
71+
jQuery(this).parent().remove();
72+
}
73+
})
74+
);
75+
76+
switch(plugin.settings.type) {
77+
case "block":
78+
holder.appendTo("#alSiteAlert-holderBlock");
79+
break;
80+
case "overlay":
81+
default:
82+
holder.appendTo("#alSiteAlert-holder");
83+
break;
84+
}
85+
}
86+
87+
// Start the plugin
88+
plugin.init();
89+
}
90+
91+
$.fn.alMainAlert = function(options) {
92+
return this.each(function() {
93+
if (undefined == $(this).data("alMainAlert")) {
94+
var plugin = new $.alSiteAlerts(this, options);
95+
$(this).data("alMainAlert", plugin);
96+
}
97+
});
98+
99+
}
100+
})(jQuery);

alMainAlert/css/alMainAlert.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Simple jQuery plugin for showing alerts and errors on a page.
3+
*
4+
* @author Timothy Wilson 2018 <https://github.com/Altrozero>
5+
*/
6+
7+
div.alMainAlert, div.alMainAlertError {
8+
position: relative;
9+
padding: 10px 50px 10px 30px;
10+
11+
text-align: center;
12+
font-size: 15px;
13+
font-weight: bold;
14+
z-index: 1;
15+
}
16+
17+
div.alMainAlertError {
18+
background-color: #f00;
19+
20+
color: #fff;
21+
}
22+
23+
div.alMainAlert {
24+
background-color: #9c9;
25+
26+
color: #fff;
27+
}
28+
29+
div.alMainAlertClose {
30+
position: absolute;
31+
top: 10px;
32+
right: 30px;
33+
34+
cursor: pointer;
35+
font-family: Arial, Veranda;
36+
}

example.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html>
2+
<head>
3+
<title>Example Implementation</title>
4+
5+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
6+
<script src="alMainAlert/alMainAlert.js"></script>
7+
<link rel="stylesheet" type="text/css" href="alMainAlert/css/alMainAlert.css" />
8+
9+
<style>
10+
html, body {
11+
padding: 0px;
12+
margin: 0px;
13+
}
14+
15+
.content {
16+
margin: 20px;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div class="content">
22+
<h1>AlMainAlert Example</h1>
23+
<b>Overlay</b><br />
24+
<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" />
25+
<input type="button" onclick="$.alMainAlert({message: 'Test Alert'});" value="Add Alert" />
26+
<input type="button" onclick="$.alMainAlert();" value="Add Alert Default No Settings" />
27+
<input type="button" onclick="$.alMainAlert({message: 'Example Error', class: 'alMainAlertError'});" value="Add Alert Error" /><br />
28+
<br />
29+
<b>Block</b><br />
30+
<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" />
31+
<input type="button" onclick="$.alMainAlert({message: 'Test Alert', type: 'block'});" value="Add Alert" />
32+
<input type="button" onclick="$.alMainAlert({message: 'Example Error', class: 'alMainAlertError', type: 'block'});" value="Add Alert Error" />
33+
</div>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)