Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

habAlert

Web Developer
Joined
Oct 24, 2009
Messages
540
Reaction score
217
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.



Files:

CZ7V931 - habAlert - RaGEZONE Forums


habAlert.js
PHP:
/**
  * 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:
<!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:
@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:
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.
 

Attachments

You must be registered for see attachments list
Last edited:
Experienced Elementalist
Joined
Jul 31, 2012
Messages
268
Reaction score
100
Damn, wigga where have u been? :?:

OT: You always release useful stuff, actually i havent seen anything similar to this for ages, I'm glad you are back :junglejane:

Edit: I noticed something that some people might find very annoying, when you have multiple habAlert's open and you only want to close 1, all visible alerts get closed too.

Here's a fix for that, find
var closehabAlert = function() {
$('.habalert').fadeOut('medium', function() {
$(this).remove();
});
}
Replace with the following
var closehabAlert = function(element) {
$(element).closest(".habalert").fadeOut('medium', function() {
$(this).remove();
});
}

Find
var header = $('<div />').addClass('habalert-header').append(($('<a />').attr({href:'#close', class:'habalert-close'}).on('click', function(e) {
e.preventDefault();
closehabAlert();
})), ($('<span />').addClass('habalert-title').text(options.title)));
Replace it with
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)));
 
Last edited:
Web Developer
Joined
Oct 24, 2009
Messages
540
Reaction score
217
I've been a busy boy. I quit habbo lol got bored when they released that horrible flash client, duck that
 
Web Developer
Joined
Oct 24, 2009
Messages
540
Reaction score
217
Thanks for the feedback guys.

You can now create your own habAlert on the website to see how it works. (can only have one link and one button on the creator though, however you can have as many as you want when you use habAlert.js in production).

Original post updated with a new download link and revised code. Positioning is better; if you had more than one habAlert open, it would be placed directly underneath the other, now they are placed on top of each other.

Also fixed the issue 3M1L mentioned.
 
☮TAKU????
Loyal Member
Joined
Nov 16, 2009
Messages
866
Reaction score
580
Welcome back. You have never disappointed, and you don't do that either with this release. Good Release!
 
Newbie Spellweaver
Joined
May 24, 2012
Messages
5
Reaction score
0
Excellent work! Well, I am not best in jQuerysettings and other shizzle.
Is there any option, possibility, to make this jQuery script work if one user visite the page /me and that the alert then automatically opens?

I don't wanna open the alert if the user is clicking on text.. Can you fix this for me?
Thanks, anyway!
 
Hakuna Matata
Joined
Sep 5, 2012
Messages
804
Reaction score
137
Excellent work! Well, I am not best in jQuerysettings and other shizzle.
Is there any option, possibility, to make this jQuery script work if one user visite the page /me and that the alert then automatically opens?

I don't wanna open the alert if the user is clicking on text.. Can you fix this for me?
Thanks, anyway!
This will do it for you.

Code:
 $( document ).ready(function() {

//Alert code here 

});

Once document (your website) is loaded, the code inside the function will be executed.
 
Newbie Spellweaver
Joined
May 24, 2012
Messages
5
Reaction score
0
Thanks for your reply Matata
Is there any possibility to make the textcolumns make work with the database columns?

Like: I have in my database, named: Habbo and column: Text, if I type text in the textcolumn, then on the alert it shows, the text that is writed in the database column will show up?
 
Elite Diviner
Joined
Dec 16, 2013
Messages
441
Reaction score
28
Can someone code this so if you press View Previous Polls it will close and then nothing happen? And so if you open the client/me page it will show?

I'm not the best to this ...
 
Newbie Spellweaver
Joined
Mar 20, 2013
Messages
88
Reaction score
3
Where can I get the alert code? I cant find it after creating the alert.. :/
 
Custom Title Activated
Loyal Member
Joined
May 2, 2007
Messages
1,217
Reaction score
4
Really Nice, Great Job :)
 
Back
Top