silent
New Member
<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">
html, body {
height: 100%;
/*background-color: #FFFFFF;*/
background-color: rgba(255,255,255,0)!important;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#flashContent {
width: 200px;
height: 100px;
}
#notification-msg {
color: #FFFFFF;
font-size: 36px;
font-family: Impact, Geneva, sans-serif;
font-weight: bold;
text-transform: uppercase;
position: absolute;
width: 100%
top: 90px;
/*left: 100px;*/
display: table;
z-index: 0;
}
#notification {
visibility: hidden;
}
div span {
margin: 0 auto;
display: table;
}
</style>
<script>
// relative paths to notification images
var imgFollow = "images/notification-bg-follow2.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, 0.6, {y:120}, {y:-25, 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, 0.6, {y:120, 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-follow2.png" width="581" height="110">
</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="#ffffff" />
<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="#ffffff" />
<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>
that is what I put in but it still doesn't seem to have fixed the issue. I'm pretty sure I changed everything properly like you said unless I did something wrong. I got the position of the text in a decent way so it isn't going to be terrible if we can't get this working.
