Damn I haven't posted in this section for years I think.
Anyway, I decided to take a check back at how this section is doing, then logged into Habbo for the first time in like 2 or 3 years and saw a nice alert I liked and decided to make a jQuery plugin out of it.
Anyway, here it is.
http://mark-eriksson.com/work/plugins/habAlert/
Files: http://uploadir.com/u/myuw7lty
habAlert.js
PHP Code:
/**
* Modify as you like
* Created by Mark Eriksson http://mark-eriksson.com
*/
(function($) {
$.habAlert = function(opts) {
var options = $.extend({
title: 'habAlert',
image: '',
leadTitle: '',
body: '<p>No default body text has been set for this habAlert.</p>',
bodyType: 'html',
controls: {
links: [],
buttons: []
}
}, opts);
var closehabAlert = function(el) {
$(el).closest('.habalert').fadeOut('medium', function() {
$(this).remove();
});
}
var wrapper = $('<div />').addClass('habalert');
var header = $('<div />').addClass('habalert-header').append(($('<a />').attr({href:'#close', class:'habalert-close'}).on('click', function(e) {
e.preventDefault();
closehabAlert($(this));
})), ($('<span />').addClass('habalert-title').text(options.title)));
var border = $('<div />').addClass('habalert-border');
if (options.image && options.leadTitle) {
var leadWrapper = $('<div />').addClass('habalert-lead habalert-cf').append(($('<img />').attr({src: options.image, alt: 'habAlert image'})), ($('<h3 />').text(options.leadTitle)));
}
var body = $('<div />').addClass('habalert-body');
options.bodyType === 'html' ? body.html(options.body) : body.text(options.body);
var controlsWrapper = $('<div />').addClass('habalert-controls-wrapper');
var controls = $('<div />').addClass('habalert-controls');
if (options.controls.links.length > 0) {
for (i=0;i<=options.controls.links.length-1;i++) {
var thisLink = options.controls.links[i];
if (!thisLink.target) thisLink.target = '';
controls.append(($('<a />').addClass('habalert-link').attr({href: thisLink.href, target: thisLink.target}).text(thisLink.text)));
}
}
if (options.controls.buttons.length > 0) {
for (s=0;s<=options.controls.buttons.length-1;s++) {
var thisButton = options.controls.buttons[s];
if (!thisButton.target) thisButton.target = '';
controls.append(($('<a />').addClass('habalert-button').attr({href: thisButton.href, target: thisButton.target}).text(thisButton.text)));
}
}
wrapper.append(header, border.append(body), (controlsWrapper.append(controls)));
if (leadWrapper) border.prepend(leadWrapper);
$('body').append(wrapper);
}
})(jQuery);
index.html
PHP Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>habAlert</title>
<link rel="stylesheet" href="css/habalert.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,500,700" />
</head>
<body>
<a href="#" id="openhabAlert">Open a habAlert</a>
<br /><br />
<fieldset>
<legend>Create your own habAlert</legend>
<table>
<tr>
<td>Title:</td>
<td><input type="text" id="title" /></td>
</tr>
<tr>
<td>Image URL:</td>
<td><input type="text" id="image" /> <em>(optional)</em></td>
</tr>
<tr>
<td>Lead title:</td>
<td><input type="text" id="leadTitle" /> <em>(optional)</em></td>
</tr>
<tr>
<td>Body content:</td>
<td><input type="text" id="body" /> <em>(text only)</em></td>
</tr>
<tr>
<td>Link URL:</td>
<td><input type="text" id="linkURL" /></td>
</tr>
<tr>
<td>Link label:</td>
<td><input type="text" id="linkLabel" /></td>
</tr>
<tr>
<td>Button URL:</td>
<td><input type="text" id="buttonURL" /></td>
</tr>
<tr>
<td>Button label:</td>
<td><input type="text" id="buttonLabel" /></td>
</tr>
<tr>
<td><button id="makeit">Make it</button></td>
</tr>
</table>
</fieldset>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/habAlert.js"></script>
<script>
$('#makeit').on('click', function() {
var title = $('#title').val() || 'habAlert',
image = $('#image').val(),
leadTitle = $('#leadTitle').val(),
body = $('#body').val() || 'Test habAlert',
linkURL = $('#linkURL').val() || '#',
linkLabel = $('#linkLabel').val() || 'Link',
buttonURL = $('#buttonURL').val() || '#',
buttonLabel = $('#buttonLabel').val() || 'Button',
allowedExts = ['png', 'gif', 'jpg', 'jpeg', 'bmp'],
extFound = false;
if (image.length > 0) {
allowedExts.forEach(function(e) {
console.log(e);
if (image.split('.').pop().toLowerCase() == e)
extFound = true;
});
}
if (extFound === false)
image = '';
$.habAlert({
title: title,
image: image,
leadTitle: leadTitle,
body: body,
bodyType: 'text',
controls: {
links: [
{href: linkURL, text: linkLabel}
],
buttons: [
{href: buttonURL, text: buttonLabel}
]
}
});
});
$('#openhabAlert').on('click', function() {
$.habAlert({
title: 'habAlert Poll',
image: 'img/qmarks.png',
leadTitle: 'Answer our poll!',
body: '<p><strong>Please</strong> answer our poll, we appreciate all feedback.</p>',
controls: {
links: [
{href: '#rofl', text: 'View previous polls'}
],
buttons: [
{href: 'index.html', text: 'ok let\'s go'}
]
}
});
});
</script>
</body>
</html>
habalert.css
PHP Code:
@charset "utf-8";
.habalert-cf:before, .habalert-cf:after {
content: " ";
display: table;
}
.habalert-cf:after { clear: both; }
.habalert, .habalert * { box-sizing: border-box; }
.habalert {
color: #080808;
max-width: 390px;
width: 100%;
font: 14px 'Ubuntu', sans-serif;
box-shadow: 0 2px 6px 1px rgba(0,0,0,.4);
border-radius: 13px;
position: absolute;
-webkit-user-select: none;
top: 40px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.habalert-header {
background-color: #367897;
color: #fff;
text-align: center;
padding: 10px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border: 1px solid #000;
font-weight: 700;
font-size: 13px;
}
.habalert-header .habalert-close {
float: right;
background-image: url('../img/close-sprite.png');
background-position: 0 0;
display: block;
height: 20px;
width: 19px;
font-size: 0;
margin-top: -1px;
margin-right: -2px;
}
.habalert-header .habalert-close:hover { background-position: 0 -40px; }
.habalert-header .habalert-close:active { background-position: 0 -20px; height: 19px; }
.habalert-border {
border: 1px solid #000;
border-top: none;
border-bottom: none;
}
.habalert-lead {
background-color: #0e3f52;
color: #fff;
font-size: 16px;
padding: 8px 12px;
}
.habalert-lead img {
float: left;
max-width: 80px;
max-height: 80px;
vertical-align: middle;
}
.habalert-lead h3 {
position: relative;
top: 4px;
left: 20px;
}
.habalert-body {
line-height: 19px;
padding: 7px 17px;
font-size: 13px;
border: 6px solid rgba(0,0,0,.07);
border-top: none;
border-bottom: none;
}
.habalert-body p:first-child { margin-top: 0!important; }
.habalert-body p:last-child { margin-bottom: 0!important; }
.habalert-controls-wrapper {
border: 1px solid #000;
border-top: none;
border-bottom-left-radius:13px;
border-bottom-right-radius:13px;
}
.habalert-controls {
border: 6px solid rgba(0,0,0,.07);
border-top: none;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
text-align: right;
padding: 10px 8px;
}
.habalert-controls a {
vertical-align: bottom;
margin: 0 20px;
font-size: 13px;
}
.habalert-controls a:first-child { margin-left: 0!important; }
.habalert-controls a:last-child { margin-right: 0!important; }
.habalert-controls a.habalert-link {
color: #333;
text-decoration: none;
border-bottom: 1px solid #333;
padding-bottom: 1px;
position: relative;
top: -7px;
}
.habalert-controls a.habalert-button {
display: inline-block;
text-decoration: none;
color: #fff;
height: 40px;
text-align: center;
padding: 10px 6px 0;
min-width: 80px;
font-weight: 700;
border: 2px solid #000;
border-bottom-width: 3px;
background-image: url('../img/button-bg.png');
border-radius: 5px;
}
.habalert-controls a.habalert-button:hover { background-image: url('../img/button-bg-hover.png'); }
.habalert-controls a.habalert-button:active { background-image: url('../img/button-bg-click.png'); }
There are 6 options, detailed below:
title is display across the blue header
image is an optional image to be displayed, can be local or external (if omitted, the whole section .habalert-lead will not be displayed)
leadTitle is an optional header to be displayed (if omitted, the whole section .habalert-lead will not be displayed)
body is the main body content. Can be HTML or plain text, depending on the next option below...
bodyType is what type of content you want the body to be (html | text) [default html]
controls is an array of the controls that will be displayed as links and/or buttons
How to use controls
controls contains two optional separate arrays which then consist of objects. If you want to display 2 standard links and 1 big green button, the following code would suffice:
PHP Code:
controls: {
links: [
{href: 'http://mark-eriksson.com', target: '_blank', text: 'Mark Eriksson'},
{href: 'login.php', text: 'Log in'}
],
buttons: [
{href: 'http://google.co.uk', target: '_blank', text: 'Google'}
]
}
Damn this could be optimised a lot more but I only made it because I was bored.
Hope it helps if you decide to use it anyway.
Cheers, Mark.
Reply With Quote
Originally Posted by oleaa
