Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 319007" data-attributes="member: 1872">Sorry to do this but I got bored.------------------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.<a href="http://mark-eriksson.com/work/plugins/habAlert/" target="_blank">http://mark-eriksson.com/work/plugins/habAlert/</a>Files: <a href="http://uploadir.com/u/myuw7lty" target="_blank">http://uploadir.com/u/myuw7lty</a><img src="http://i.imgur.com/CZ7V931.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />habAlert.js[PHP]/**&nbsp; * Modify as you like&nbsp; * Created by Mark Eriksson http://mark-eriksson.com&nbsp; */(function($) {&nbsp; &nbsp; &nbsp; &nbsp; $.habAlert = function(opts) {&nbsp; &nbsp; &nbsp; &nbsp; var options = $.extend({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'habAlert',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leadTitle: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: '&lt;p&gt;No default body text has been set for this habAlert.&lt;/p&gt;',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bodyType: 'html',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; links: [],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttons: []&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, opts);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var closehabAlert = function(el) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(el).closest('.habalert').fadeOut('medium', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var wrapper = $('&lt;div /&gt;').addClass('habalert');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var header = $('&lt;div /&gt;').addClass('habalert-header').append(($('&lt;a /&gt;').attr({href:'#close', class:'habalert-close'}).on('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; closehabAlert($(this));&nbsp; &nbsp; &nbsp; &nbsp; })), ($('&lt;span /&gt;').addClass('habalert-title').text(options.title)));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var border = $('&lt;div /&gt;').addClass('habalert-border');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (options.image &amp;&amp; options.leadTitle) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var leadWrapper = $('&lt;div /&gt;').addClass('habalert-lead habalert-cf').append(($('&lt;img /&gt;').attr({src: options.image, alt: 'habAlert image'})), ($('&lt;h3 /&gt;').text(options.leadTitle)));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var body = $('&lt;div /&gt;').addClass('habalert-body');&nbsp; &nbsp; &nbsp; &nbsp; options.bodyType === 'html' ? body.html(options.body) : body.text(options.body);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var controlsWrapper = $('&lt;div /&gt;').addClass('habalert-controls-wrapper');&nbsp; &nbsp; &nbsp; &nbsp; var controls = $('&lt;div /&gt;').addClass('habalert-controls');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (options.controls.links.length &gt; 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i=0;i&lt;=options.controls.links.length-1;i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var thisLink = options.controls.links[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!thisLink.target) thisLink.target = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls.append(($('&lt;a /&gt;').addClass('habalert-link').attr({href: thisLink.href, target: thisLink.target}).text(thisLink.text)));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (options.controls.buttons.length &gt; 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (s=0;s&lt;=options.controls.buttons.length-1;s++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var thisButton = options.controls.buttons[s];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!thisButton.target) thisButton.target = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls.append(($('&lt;a /&gt;').addClass('habalert-button').attr({href: thisButton.href, target: thisButton.target}).text(thisButton.text)));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrapper.append(header, border.append(body), (controlsWrapper.append(controls)));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (leadWrapper) border.prepend(leadWrapper);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').append(wrapper);&nbsp; &nbsp; }})(jQuery);[/PHP]index.html[PHP]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;habAlert&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;css/habalert.css&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;http://fonts.googleapis.com/css?family=Ubuntu:400,500,700&quot; /&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; id=&quot;openhabAlert&quot;&gt;Open a habAlert&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;br /&gt;&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;fieldset&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;legend&gt;Create your own habAlert&lt;/legend&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;table&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Title:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;title&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Image URL:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;image&quot; /&gt; &lt;em&gt;(optional)&lt;/em&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Lead title:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;leadTitle&quot; /&gt; &lt;em&gt;(optional)&lt;/em&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Body content:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;body&quot; /&gt; &lt;em&gt;(text only)&lt;/em&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Link URL:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;linkURL&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Link label:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;linkLabel&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Button URL:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;buttonURL&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Button label:&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;buttonLabel&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;button id=&quot;makeit&quot;&gt;Make it&lt;/button&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;script src=&quot;js/habAlert.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;script&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#makeit').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var title&nbsp; &nbsp; &nbsp;&nbsp; = $('#title').val() || 'habAlert',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image&nbsp; &nbsp; &nbsp;&nbsp; = $('#image').val(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leadTitle&nbsp;&nbsp; = $('#leadTitle').val(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body&nbsp; &nbsp; &nbsp; &nbsp; = $('#body').val() || 'Test habAlert',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; linkURL&nbsp; &nbsp;&nbsp; = $('#linkURL').val() || '#',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; linkLabel&nbsp;&nbsp; = $('#linkLabel').val() || 'Link',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttonURL&nbsp;&nbsp; = $('#buttonURL').val() || '#',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttonLabel = $('#buttonLabel').val() || 'Button',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allowedExts = ['png', 'gif', 'jpg', 'jpeg', 'bmp'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; extFound&nbsp; &nbsp; = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (image.length &gt; 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allowedExts.forEach(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(e);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (image.split('.').pop().toLowerCase() == e)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; extFound = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (extFound === false)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.habAlert({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: title,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image: image,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leadTitle: leadTitle,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: body,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bodyType: 'text',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; links: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {href: linkURL, text: linkLabel}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttons: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {href: buttonURL, text: buttonLabel}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#openhabAlert').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.habAlert({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'habAlert Poll',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image: 'img/qmarks.png',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leadTitle: 'Answer our poll!',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: '&lt;p&gt;&lt;strong&gt;Please&lt;/strong&gt; answer our poll, we appreciate all feedback.&lt;/p&gt;',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; links: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {href: '#rofl', text: 'View previous polls'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttons: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {href: 'index.html', text: 'ok let\'s go'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/PHP]habalert.css[PHP]@charset &quot;utf-8&quot;;.habalert-cf:before, .habalert-cf:after {&nbsp; &nbsp; content: &quot; &quot;;&nbsp; &nbsp; display: table;}.habalert-cf:after { clear: both; }.habalert, .habalert * { box-sizing: border-box; }.habalert {&nbsp; &nbsp; color: #080808;&nbsp; &nbsp; max-width: 390px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; font: 14px 'Ubuntu', sans-serif;&nbsp; &nbsp; box-shadow: 0 2px 6px 1px rgba(0,0,0,.4);&nbsp; &nbsp; border-radius: 13px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; -webkit-user-select: none;&nbsp; &nbsp; top: 40px;&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; transform: translateX(-50%);&nbsp; &nbsp; -webkit-transform: translateX(-50%);}.habalert-header {&nbsp; &nbsp; background-color: #367897;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; border-top-left-radius: 13px;&nbsp; &nbsp; border-top-right-radius: 13px;&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; font-size: 13px;}&nbsp; &nbsp; .habalert-header .habalert-close {&nbsp; &nbsp; &nbsp; &nbsp; float: right;&nbsp; &nbsp; &nbsp; &nbsp; background-image: url('../img/close-sprite.png');&nbsp; &nbsp; &nbsp; &nbsp; background-position: 0 0;&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; width: 19px;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 0;&nbsp; &nbsp; &nbsp; &nbsp; margin-top: -1px;&nbsp; &nbsp; &nbsp; &nbsp; margin-right: -2px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .habalert-header .habalert-close:hover { background-position: 0 -40px; }&nbsp; &nbsp; &nbsp; &nbsp; .habalert-header .habalert-close:active { background-position: 0 -20px; height: 19px; }.habalert-border {&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; border-top: none;&nbsp; &nbsp; border-bottom: none;}.habalert-lead {&nbsp; &nbsp; background-color: #0e3f52;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; padding: 8px 12px;}&nbsp; &nbsp; .habalert-lead img {&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; max-width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; max-height: 80px;&nbsp; &nbsp; &nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; }&nbsp; &nbsp; .habalert-lead h3 {&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; top: 4px;&nbsp; &nbsp; &nbsp; &nbsp; left: 20px;&nbsp; &nbsp; }.habalert-body {&nbsp; &nbsp; line-height: 19px;&nbsp; &nbsp; padding: 7px 17px;&nbsp; &nbsp; font-size: 13px;&nbsp; &nbsp; border: 6px solid rgba(0,0,0,.07);&nbsp; &nbsp; border-top: none;&nbsp; &nbsp; border-bottom: none;}&nbsp; &nbsp; .habalert-body p:first-child { margin-top: 0!important; }&nbsp; &nbsp; .habalert-body p:last-child { margin-bottom: 0!important; }.habalert-controls-wrapper {&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; border-top: none;&nbsp; &nbsp; border-bottom-left-radius:13px;&nbsp; &nbsp; border-bottom-right-radius:13px;}.habalert-controls {&nbsp; &nbsp; border: 6px solid rgba(0,0,0,.07);&nbsp; &nbsp; border-top: none;&nbsp; &nbsp; border-bottom-left-radius: 13px;&nbsp; &nbsp; border-bottom-right-radius: 13px;&nbsp; &nbsp; text-align: right;&nbsp; &nbsp; padding: 10px 8px;}&nbsp; &nbsp; .habalert-controls a {&nbsp; &nbsp; &nbsp; &nbsp; vertical-align: bottom;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 20px;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 13px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .habalert-controls a:first-child { margin-left: 0!important; }&nbsp; &nbsp; &nbsp; &nbsp; .habalert-controls a:last-child { margin-right: 0!important; }&nbsp; &nbsp; &nbsp; &nbsp; .habalert-controls a.habalert-link {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #333;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 1px solid #333;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: -7px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .habalert-controls a.habalert-button {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 40px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px 6px 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min-width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid #000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-width: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url('../img/button-bg.png');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .habalert-controls a.habalert-button:hover { background-image: url('../img/button-bg-hover.png'); }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .habalert-controls a.habalert-button:active { background-image: url('../img/button-bg-click.png'); }[/PHP]There are 6 options, detailed below:title is display across the blue headerimage 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 buttonsHow to use controlscontrols 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: {&nbsp; &nbsp; links: [&nbsp; &nbsp; &nbsp; &nbsp; {href: 'http://mark-eriksson.com', target: '_blank', text: 'Mark Eriksson'},&nbsp; &nbsp; &nbsp; &nbsp; {href: 'login.php', text: 'Log in'}&nbsp; &nbsp; ],&nbsp; &nbsp; buttons: [&nbsp; &nbsp; &nbsp; &nbsp; {href: 'http://google.co.uk', target: '_blank', text: 'Google'}&nbsp; &nbsp; ]}[/PHP]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.</blockquote>

[QUOTE="Markshall, post: 319007, member: 1872"] Sorry to do this but I got bored. ------------------ 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. [url]http://mark-eriksson.com/work/plugins/habAlert/[/url] Files: [url]http://uploadir.com/u/myuw7lty[/url] [img]http://i.imgur.com/CZ7V931.png[/img] 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: 'No default body text has been set for this habAlert.', 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)); })), ($('').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);[/PHP] 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> <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" /> (optional)</td> </tr> <tr> <td>Lead title:</td> <td><input type="text" id="leadTitle" /> (optional)</td> </tr> <tr> <td>Body content:</td> <td><input type="text" id="body" /> (text only)</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: 'Please answer our poll, we appreciate all feedback.', controls: { links: [ {href: '#rofl', text: 'View previous polls'} ], buttons: [ {href: 'index.html', text: 'ok let\'s go'} ] } }); }); </script> </body> </html>[/PHP] 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'); }[/PHP] There are 6 options, detailed below: [FONT=Courier New]title [/FONT]is display across the blue header [FONT=Courier New]image [/FONT]is an optional image to be displayed, can be local or external (if omitted, the whole section [FONT=Courier New].habalert-lead[/FONT] will not be displayed) [FONT=Courier New]leadTitle [/FONT]is an optional header to be displayed (if omitted, the whole section [FONT=Courier New].habalert-lead[/FONT] will not be displayed) [FONT=Courier New]body [/FONT]is the main body content. Can be HTML or plain text, depending on the next option below... [FONT=Courier New]bodyType [/FONT]is what type of content you want the body to be ([I]html [/I]| [I]text[/I]) [default [I]html[/I]] [FONT=Courier New]controls[/FONT] is an array of the controls that will be displayed as links and/or buttons [b]How to use [FONT=Courier New]controls[/FONT][/b] 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'} ] }[/PHP] 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. [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members