PDA

View Full Version : Transparent Message



vendiddy
31 Aug 2008, 1:36 PM
This extension was inspired by this article:
http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/
I also borrowed some CSS from their javascript example.

JS

Ext.ux.TransparentMessage = function() {
var el = null;
var p = null;

return Ext.apply(new Ext.util.Observable, {
show: function(message, config) {
config = config || {}
Ext.applyIf(config, {
alignToEl: document.body,
align: 'c-c',
offset: [0, 0],
time: 2000,
anim: true,
hideAnim: true
});
if (message) {
p.dom.innerHTML = message;
}
el.setStyle(config.style);
el.show(config.anim);
el.alignTo(config.alignToEl, config.align, config.offset);
if (config.time != 0) {
this.hide.defer(config.time, this, [config.hideAnim]);
}
},
hide: function(anim) {
el.hide(anim);
},
init: function() {
el = Ext.DomHelper.append(document.body, {
tag: 'div', id: 'ext-ux-transparent-message', class: 'ext-ux-transparent-message',
children: [
{tag: 'div', class: 'ext-ux-transparent-message-round'},
{tag: 'p', html: 'Your message here.', id: 'ext-ux-transparent-message-p'},
{tag: 'div', class: 'ext-ux-transparent-message-round'}
]
}, true);
p = Ext.get('ext-ux-transparent-message-p');
}
});
}();

CSS

.ext-ux-transparent-message {
display: none;
opacity: 0.9;
background-color: #696969;
color: white;
font-size: 36pt;
line-height: 38pt;
position: absolute;
text-align: center;
font-family: arial, lucidia, grande, verdana, sans-serif;
}

.ext-ux-transparent-message .ext-ux-transparent-message-round {
border-left: 2px solid white;
border-right: 2px solid white;
font-size: 1px;
height: 2px;
line-height: 1px;
}

.ext-ux-transparent-message p {
padding: 0.3em;
padding-bottom: 14px;
margin: 0px;
}

Some test code:

Ext.onReady(function() {
Ext.ux.TransparentMessage.init();
var button = Ext.DomHelper.append(document.body, {
tag: 'input', type: 'button', value: 'Click to show time.'
}, true);
button.on('click', function() {
var date = new Date();
var time = date.getHours() + ':' + date.getMinutes();
Ext.ux.TransparentMessage.show('The time is ' + time);
});
});

Below are two screenshots of it in action.

There are two features I would like to add to this extension:

Hiding the message when any key is pressed.
Hiding the message box when the mouse moves a certain distance.


If anyone can give me some advice on how to accomplish this, I would greatly appreciate it.

Also, I'm not an ExtJS expert, so if anyone has a better way to do some of these things, please let me know. Enjoy!

Scorpie
2 Sep 2008, 2:36 AM
Looks nice! Will have look into it !