UKBL ~ Scrolling Forum News In iFrame
Mod Version: 1.00, by UKBusinessLive
| vB Version: 3.8.1 | Rating:  (5 votes - 5.00 average) |
Installs: 20 |
| Released: 01 Mar 2009 | Last Update: Never | Downloads: 158 |
 Not Supported
 Template Edits
Additional Files
Re-usable Code
Translations
|
||
UKBL ~ Scrolling Forum News In iFrame
Ever wanted a Customizable Scrolling Box where you could easily add your Forum News Or Links, but didn't want to use Javascript with line after line of code???
LIVE DEMO: http://www.ukbusinesslive.co.uk/forum/scroller.htm
and without the Iframe Border http://www.waltdisneyboards.com/forums.php
Then this is for you, A Small so easy to add script, thats customizable in every way.
I'm dedicating this hack to my friend "Arny" from the Walt Disney Boards, who put the idea into my head when he sent me a hidious Javascript, with about 100 lines of text that did basically the same, So thats for the idea Arny and I hope you enjoy the finished product.
Using a Basic iFrame code, You can add scrolling text, links and clickable pictures and with a small file to add where ever you want to put your new iFrame it couldn't be easier to do. You can adjut the size of the box to go the full width of your boards or to fit in a small corner, it really is adjustable
Ok so heres the Install..
Download the zip file and open up the scroller.txt file in notebook or similar
Code:
<!-- Copy this where you want your Scroller --> <table cellpadding="2" cellspacing="0" border="0" style="border: #000000 1px solid; background-color: #3BE2F8;COLOR: #1605FC; FONT: 14px arial, sans-serif; font-weight: bold;"><tr><td align="center"> UKBL News<br> </td></tr><tr><td> <iframe id="NewsWindow" src="text.htm" width="160" height="210" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="border: #000000 1px solid;"></iframe> </td></tr></table> <br><br> <!-- END -->
Code:
<table cellpadding="2" cellspacing="0" border="0" style="border: #000000 1px solid; background-color: #3BE2F8;COLOR: #1605FC; FONT: 14px arial, sans-serif; font-weight: bold;"><tr><td align="center">
Code:
<td align="center"> UKBL News<br>
Next we can change the size and height of our box, so first decide what size you want your box to be and change the values in this part of the code
Code:
<iframe id="NewsWindow" src="text.htm" width="160" height="210" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="border: #000000 1px solid;"></iframe>
Code:
style="border: #000000 1px solid;
Now we come to the text.htm file which we need to upload to our forums server, so open the file and we'll see something like this....
Code:
<html><head>
<title>Your Text Title here</title>
<style type="text/css">
<!--
BODY { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
/* FONT COLORS */
TABLE { COLOR: #000000; FONT: 11px arial, sans-serif; font-weight: normal }
.title { COLOR: #0033FF; FONT: 12px arial, sans-serif; font-weight: bold; }
#NewsDiv { position: absolute; left: 0; top: 0; width: 100% }
/* PAGE LINK COLORS */
a:link { color: #0033FF; text-decoration: underline; }
a:visited { color: #6633FF; text-decoration: underline; }
a:active { color: #0033FF; text-decoration: underline; }
a:hover { color: #6699FF; text-decoration: none; }
-->
</style>
</head>
<BODY BGCOLOR="#F0F0F0" TEXT="#000000" onMouseover="scrollspeed=0" onMouseout="scrollspeed=current" OnLoad="NewsScrollStart();">
<div id="NewsDiv">
<table cellpadding="5" cellspacing="0" border="0" width="100%"><tr><td>
<!-- TEXT SCROLLER CONTENT STARTS HERE, To add more, just cut and paste a block ;-) -->
<span class="title">
Disney News<br>
</span>
You can list as many News items in this window as you need. Just edit the "text.htm" to change the text shown in this Box. Look at this great link you can add too!! <a href="http://ukbl.co.uk" target="_top">UKBL Hosting</a>
<br><br><br>
<span class="title">
Display Options<br>
</span>
To have the scroller reload at the top for the second time through, change the "frameheight" to "2" and change the "nextdelay" to "1" or "2".
<br><br><br>
<span class="title">
Resizing the Window<br>
</span>
If you change the size of the IFrame window edit the "frameheight" variable in the "text.htm" to match your new window size.
<br><br>
The IFrame size and "frameheight" variable should match so the text re-scrolls from the bottom of this window. <a href="http://www.ukbusinesslive.co.uk/forum" target="_top">My Forum</a>
<br><br><br>
<span class="title">
Remember<br>
</span>
Don't forget to Click Installed if you use this :-) Thanks.
<br><br><br>
<!-- SCROLLER CONTENT ENDS HERE -->
</td></tr></table>
</div>
<!-- YOU DO NOT NEED TO EDIT BELOW THIS LINE ITS FOR MINOR ADJUSTMENTS -->
<script language="JavaScript" type="text/javascript">
<!-- HIDE CODE
var scrollspeed = "1" // SET SCROLLER SPEED 1 = SLOWEST
var speedjump = "30" // ADJUST SCROLL JUMPING = RANGE 20 TO 40
var startdelay = "2" // START SCROLLING DELAY IN SECONDS
var nextdelay = "0" // SECOND SCROLL DELAY IN SECONDS 0 = QUICKEST
var topspace = "2px" // TOP SPACING FIRST TIME SCROLLING
var frameheight = "200px" // IF YOU RESIZE THE WINDOW EDIT THIS HEIGHT TO MATCH
current = (scrollspeed)
function HeightData(){
AreaHeight=dataobj.offsetHeight
if (AreaHeight==0){
setTimeout("HeightData()",( startdelay * 1000 ))
}
else {
ScrollNewsDiv()
}}
function NewsScrollStart(){
dataobj=document.all? document.all.NewsDiv : document.getElementById("NewsDiv")
dataobj.style.top=topspace
setTimeout("HeightData()",( startdelay * 1000 ))
}
function ScrollNewsDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-(scrollspeed)
if (parseInt(dataobj.style.top)<AreaHeight*(-1)) {
dataobj.style.top=frameheight
setTimeout("ScrollNewsDiv()",( nextdelay * 1000 ))
}
else {
setTimeout("ScrollNewsDiv()",speedjump)
}}
// END HIDE CODE -->
</script>
</body>
</html>
To add more content, just cut and paste one of the paragraphs like this
Code:
<span class="title"> Disney News<br> </span> You can list as many News items in this window as you need. Just edit the "text.htm" to change the text shown in this Box. Look at this great link you can add too!! <a href="http://ukbl.co.uk" target="_top">UKBL Hosting</a> <br><br><br>
You could even add clickable pictures as long at the dimensions fall within the width of the iframe 
make a space under each news item using <br><br><br>
Once you've finished adding your content and editing the differnt sections, Save the file and upload it to your forums root directory as text.htm
If you want to change the content on a regular basis all you'll need to do is to edit the text.htm fil and just upload it to your server, remembering to chose over write.
Thats it, so easy and a great addition to any forum
The code is just bog standard HTML so feel free to edit and play around with it
You could even use this for advertising and sponsors The choice is yours, basically its a simple iframe with a scroll feature, so enjoy
Don't forget to click Installed
Download
scroller.zip (114.8 KB, 159 downloads)
Screenshots
