If you're not familiar with CSS, I don't recommend just going around and changing things. There is no such thing as "
position: center" in CSS. So whatever changes you made, best to undo them.
To center the text you'll need to do a few things.
Change the #notification-msg CSS into:
Code:
#notification-msg {
color: #BABAAE;
font-size: 24px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-transform: uppercase;
position: absolute;
width: 100%;
top: 35px;
/*left: 50px;*/
display: table;
z-index: 0;
}
I commented out the left positioning and added a width property, set to 100%. The "top" value will depend on the height of your image, so adjust the value accordingly.
Then add the following CSS, so within the
<style></style> tags:
Code:
div span {
margin: 0 auto;
display: table;
}
Now you need to put the actual text within a
<span> tag which will be centered within its parent div.
In the page body, make it look like this:
Code:
<div id="notification-msg">
<span id="msg">TEEBOARD JAVASCRIPT NOTIFICATIONS!!</span>
</div>
Last thing you need to do now is change the javascript to write the follower name to the "msg" instead of "notification-msg".
Look for the line that says:
var txt = document.getElementById("notification-msg");
And change it to:
Code:
var txt = document.getElementById("msg");
<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.
