<html>
<head>
<meta name="author" content="Jeff Home" />
<meta name="description" content="Javascript 20 Line Code Challenge - Text Banner" />
<meta name="copyright" content="Copyright � 2005 - Jeff Home" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>Javascript 20 Line Competition - Text Banner</title>
<style type="text/css">
body {
font-size:1.0em;
padding:0;
margin:0;
font-family:"Times New Roman",Times,serif;
background-color:#eee;
}
.outer {
width:45em;
height:2em;
position:absolute;
overflow:hidden;
padding:0;
margin:1em 0 1em 1em;
}
.scrolling {
top:0;
left:0;
width:40em;
left:45em;
position:absolute;
overflow:hidden;
padding:0;
margin:0;
padding-left:50px;
line-height:2em;
}
.data {
position:absolute;
overflow:hidden;
width:110;
height:110;
visibility:hidden;
}
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#newsStrip1 {
position:relative;
width:800px;
height:150px;
border:1px solid #333;
border-left:none;
overflow:hidden;
}
#newsStrip1Image {
position:absolute;
overflow:hidden;
top:0;
left:0;
width:800px;
height:150px;
background-image:url(newsstrip1.jpg);
-khtml-opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}
#div1Outer { top:20px;left:100px; font-size:1.1em; }
#div2Outer { top:70px;left:80px; font-size:1.2em; }
#div3Outer { top:90px;left:60px; }
#div4Outer { top:40px;left:40px; font-size:1.3em; }
h1 {
font-family:verdana,helvetica,arial,sans-serif;
padding-left:0.5em;
padding-top:2em;
font-size:1.2em;
}
#content {
font-family:verdana,helvetica,arial,sans-serif;
width:800px;
font-size:0.9em;
}
p {
margin:0.4em 0.5em 0.5em 0.5em;
}
span.hr {
display:block;
padding-bottom:0.5em;
border-bottom:1px #333 solid;
}
.footer {
text-align:right;
color:#999;
}
</style>
<script type="text/javascript">
<!--
function getIFrame(_divName) {
var ifrm = document.getElementById(_divName + 'DataFrame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument) ? ifrm.contentDocument : ifrm;
return ifrm;
}
function moveLeft(_divName,_speed,_accel) {
var _floatObj = document.getElementById(_divName);
var _left = _floatObj.style.left == '' ? 0 : parseInt(_floatObj.style.left,10);
if (_left > 0) {
_floatObj.style.left = _left - _speed + "px";
_speed = (_speed-++_accel > 1) ? _speed-_accel : 1;
if (_left < 100) {
if (_floatObj.filters) {
_floatObj.filters.alpha.opacity=_left;
} else {
_floatObj.style.MozOpacity=_floatObj.style.opacity=_floatObj.style.KhtmlOpacity=_left/100;
}
}
} else {
if (_arr1=getIFrame(_divName)._arr1) _floatObj.innerHTML = '<a href="' + _arr1[_myIndex=Math.floor(Math.random()*_arr1.length)].url + '" target="_blank">' + _arr1[_myIndex].text + '</a>';
_floatObj.style.left = 600 + "px";
_floatObj.parentNode.style.top = (Math.floor(Math.random()*85) + 5) + "px";
_speed = 60 + Math.floor(Math.random()*10);
_accel = 1 + Math.round(Math.random());
if (_floatObj.filters) {
_floatObj.filters.alpha.opacity=99.9;
} else {
_floatObj.style.MozOpacity=_floatObj.style.opacity=_floatObj.style.KhtmlOpacity=0.99;
}
}
window[_divName+'Chk']=setTimeout("moveLeft('" + _divName + "'," + _speed + "," + _accel + ")",25);
}
function buildMontage(_imgArray) {
if (_imgArray.length > 0) {
var _imgDiv = document.getElementById('newsStrip1Image');
for (var _outerLoop = 0; _outerLoop < 3; _outerLoop++) {
for (var _loop = 0; _loop < _imgArray.length; _loop++) {
_imgDiv.appendChild(_tempImg = document.createElement('img'));
_tempImg.style.visibility = 'hidden';
_tempImg.onload = function () {this.style.visibility = 'visible';};
_tempImg.id = 'stripImg' + _loop;
_tempImg.width = _imgArray[_loop].imgWidth;
_tempImg.height = _imgArray[_loop].imgHeight;
_tempImg.style.position = 'absolute';
_tempImg.style.top = Math.floor(Math.random()*150) + 'px';
_tempImg.style.left = Math.floor(Math.random()*800) + 'px';
/*
_tempOpacity = Math.floor(Math.random()*80) + 20;
_tempImg.style.filter = 'alpha(opacity=' + _tempOpacity + ')';
_tempImg.style.opacity = _tempOpacity/10;
_tempImg.style.KhtmlOpacity = _tempOpacity/10;
_tempImg.style.MozOpacity = _tempOpacity/10;
*/
_tempImg.src = _imgArray[_loop].src;
}
}
}
}
//-->
</script>
</head>
<body>
<h1>Information - the food of our nation...</h1>
<div id="newsStrip1">
<div id="newsStrip1Image"></div>
<iframe src="googleimages.php" id="divImageDataFrame" class="data"></iframe>
<div id="div1Outer" class="outer">
<div id="div1" class="scrolling" style="left:0;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-khtml-opacity:0;">Loading...</div>
<iframe src="bbcnews.php?t=div1&s=50&a=1&p=" id="div1DataFrame" class="data"></iframe>
</div>
<div id="div2Outer" class="outer">
<div id="div2" class="scrolling" style="left:0;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-khtml-opacity:0;">Loading...</div>
<iframe src="googlenews.php?t=div2&s=50&a=1&p=" id="div2DataFrame" class="data"></iframe>
</div>
<div id="div3Outer" class="outer">
<div id="div3" class="scrolling" style="left:0;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-khtml-opacity:0;">Loading...</div>
<iframe src="bbcnews.php?t=div3&s=50&a=1&p=1/low/entertainment/default.stm" id="div3DataFrame" class="data"></iframe>
</div>
<div id="div4Outer" class="outer">
<div id="div4" class="scrolling" style="left:0;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-khtml-opacity:0;">Loading...</div>
<iframe src="bbcnews.php?t=div4&s=50&a=1&p=1/low/week_at-a-glance/default.stm" id="div4DataFrame" class="data"></iframe>
</div>
</div>
<div id="content">
<p>This page shows 4 horizontal tickers that "scrape" their headlines from current news sites. If a particular headline interests you, then you can click it and the original news article will appear in a new window.</p>
<p>The tickers accelerate across the screen and slow down as they slowly fade away. Every time the ticker starts a new headline scrolling from right to left, it starts at a random height within the display area.</p>
<p>The tickers are displayed against a montage of images that are also scraped from current news sites - and repeated many times on top of a base montage of images. Each montage is unique and as the news chages, so will the images and headlines.</p>
<span class="hr"></span>
<p class="footer">Jeff</p>
</div>
</body>
</html>