Thanks for all your help, DeezjaVu!
Unfortunately, I'm unable to solve this issue.
I've spent the last afternoon looking at more than two dozen "solutions" across the net, to no avail.
I'm confident that if a solution will be found, I (and the rest of the readers interested) will have no problem implementing it in other forms of custom background images/notifications, etc.
If anyone cares to take another look, here's my current teeboard-notifications.html.
I've done my best integrating all of DeezjaVu's recommendations in regards to the text positioning, starting here:
Code:
<html>
<head>
<title>TeeBoard Notifications Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- visit http://www.greensock.com/get-started-js/ for more info -->
<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<style type="text/css" media="all">
@font-face {
font-family: 'Rexlia Rg';
src: url("fonts/rexlia rg.ttf");
}
html, body {
height: 100%;
/*background-color: #00FF00;*/
background-color: rgba(0,255,0,0)!important;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#flashContent {
width: 200px;
height: 100px;
}
#notification-msg {
color: #FFFFFF;
font-size: 50px;
/*font-family: Tahoma, Geneva, sans-serif;*/
font-family: 'Rexlia Rg';
font-weight: bold;
/*text-transform: uppercase;*/
position: absolute;
top: 33px;
width: 100%;
}
#msg {
display: table;
margin: 0 auto;
}
#notification {
/*visibility: hidden;*/
position: relative;
width: 100%;
}
</style>
<script>
// relative paths to notification images
var imgFollow = "images/notification-bg-follow.png";
var imgSub = "images/notification-bg-sub.png";
var imgDonate = "images/notification-bg-donate.png";
function teeboardNotification(type, msg) {
//alert("notification: " + type + " - " + msg);
var img = document.getElementById("notification-img");
// set image depending on notification type
if(type == "follower") {
img.src = imgFollow;
}else if(type == "subscriber") {
img.src = imgSub;
}else if(type == "donation") {
img.src = imgDonate;
}
// set the notification message
var txt = document.getElementById("msg");
txt.innerHTML = msg;
// animate everything onto the screen
var div = document.getElementById("notification");
div.style.visibility = "visible";
TweenLite.killTweensOf(div);
// tween x position from offscreen (0 - width of image) to 0
TweenLite.fromTo(div, 1.33, {x:636, y:1420}, {x:636, y:800, ease:Bounce.easeOut, onComplete:hideNotification});
}
function hideNotification() {
// animate everything back off screen
var div = document.getElementById("notification");
// tween x position from 0 to (0 - width of image)
TweenLite.to(div, 1.33, {x:636, y:1420, delay:6});
}
</script>
</head>
<body>
<!--
Animations should take no longer than 10 seconds (showing + hiding), as notifications are queued,
meaning that if there are 2 new followers, 2 alerts are invoked, 10 seconds apart.
-->
<div id="notification">
<div id="notification-msg">
<span id="msg">TEEBOARD JAVASCRIPT NOTIFICATIONS!!</span>
</div>
<img id="notification-img" src="images/notification-bg-follow.png" width="648" height="220">
</div>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200" height="100" id="teeboard-notifications" align="middle">
<param name="movie" value="teeboard-notifications.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#00ff00" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="wmode" value="transparent" />
<param name="scale" value="noscale" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="lt" />
<param name="allowScriptAccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="teeboard-notifications.swf" width="200" height="100">
<param name="movie" value="teeboard-notifications.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#00ff00" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="wmode" value="transparent" />
<param name="scale" value="noscale" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="lt" />
<param name="allowScriptAccess" value="always" />
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>Regards,
