Creating a Scrolling News Panel - Conclusion
(Page 4 of 4 )
This is a somewhat simplified version of the scroll function to get you started. Now don't let that scare you, it may suit your needs perfectly! Just beware that you'll have to establish an exact size for the news div, and that will probably be determined by the amount of content contained within. This will work absolutely fine if you've hard-coded the news in. Whenever you change the news, you can change the global variables to increase or decrease the height of the div. If you don't, you'll end up cutting off some of the news, or scrolling through enormous amounts of whitespace.
However, where you might need to elaborate on this code, is in the case of a dynamic news engine, such as with Mambo, or any other CMS. Here you're loading news content on the fly, and randomly at that. You don't know what the size will be, and it would be a difficult discipline to maintain a standard amount of content in your news blurbs.
So what you might want to do is store the news in a hidden form element. You can then determine approximately how much space you'll need to display it by using the .length property. Once you've set the height of the div, you can then dump the content into it with the ever-useful '.innerHTML' property. This will give you the degree of flexibility you need. Of course, you may come up with your own crafty solution to this problem, so once again feel free to share with all in the forum!
However you decide to use this, I almost guarantee you will enjoy it, as will those browsing your website. You can add in funky functionality, like letting them stop the scrolling to read with a mouseover, or whatever else you can come up with! Have fun!
By the way, here's all the code in one chunk, to save you a lot of copying and pasting. (I know, I know, I'm very considerate. Also humble, damn it.)
<body onload="scrollNews('news', 0);">
<div id="news">
<?php mosLoadModules ( 'inset' ); ?>
</div>
<style type="text/css">
#news {
position: absolute;
visibility: visible;
z-index: 10;
top: 20px;
left: 650px;
height: 40px;
width: 150px;
clip: rect(0px, 100px, 60px, 0px);
border-width: 0px;
padding-top: 40px;
}
</style>
<script language="JavaScript">
function getObject( obj ) {
var strObj
if ( document.all ) {
strObj = document.all.item( obj );
} else if ( document.getElementById ) {
strObj = document.getElementById( obj );
}
return strObj;
}
var theTop = 20;
var theHeight = 100;
var theWidth = 150;
var theLeft = 650;
var toClip = 55;
function scrollNews( newsDiv, toMove ) {
theDiv = getObject( newsDiv.toString() );
if ( theDiv == null ) { return; }
if ( document.layers ) {
theDiv.clip.top = toMove;
theDiv.clip.bottom = toMove + toClip;
theDiv.top = theTop - toMove;
} else {
theDiv = theDiv.style;
theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px 0px)";
theDiv.top = theTop - toMove + 'px';
}
if ( ( theTop + theHeight - toMove ) < ( theTop - theHeight - 20 ) ) {
toMove = 0;
if ( document.layers ) {
theDiv.clip.top = theTop;
theDiv.clip.bottom = toClip;
theDiv.top = theTop
} else {
theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px 0px)";
theDiv.top = theTop + 'px';
}
}
toMove = (toMove + 1);
setTimeout("scrollNews('" + newsDiv + "'," + toMove + ")", 100);
}
</script>
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 57 
