UKBusinessLive
02-28-2009, 10:00 PM
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???
https://vborg.vbsupport.ru/external/2009/03/61.png
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 ;)
https://vborg.vbsupport.ru/external/2009/03/62.png
Ok so heres the Install..
Download the zip file and open up the scroller.txt file in notebook or similar
<!-- 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 -->
You will see from the first line of code, how to change the colors, font background Just change the hex values to ones that suit your site (Shown in Red)
<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">
Then find this
<td align="center">
UKBL News<br>
And change the UKBL News for your own Title
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
<iframe id="NewsWindow" src="text.htm" width="160" height="210" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="border: #000000 1px solid;"></iframe>
You can also change the border color of your frame here as well as the width
style="border: #000000 1px solid;
When you've done that, Just save and you've got your file ready for pasting whereever you want your box to go, Simply Ccopy and paste the entire code where ever you want the box to show, In your Header?? Your Footer? On the side its up to you ;)
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....
<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>
It pretty easy to follow just change the titles, and other bits to suit your site, To add content, you just need to add basic html code and it will show in your box.
To add more content, just cut and paste one of the paragraphs like this
<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 can see how to change the title, add the context and even a link :eek: You could even add clickable pictures as long at the dimensions fall within the width of the iframe :D
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
https://vborg.vbsupport.ru/external/2009/03/63.png
The code is just bog standard HTML so feel free to edit and play around with it :D
You could even use this for advertising and sponsors The choice is yours, basically its a simple iframe with a scroll feature, so enjoy :D
Don't forget to click Installed :up:
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???
https://vborg.vbsupport.ru/external/2009/03/61.png
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 ;)
https://vborg.vbsupport.ru/external/2009/03/62.png
Ok so heres the Install..
Download the zip file and open up the scroller.txt file in notebook or similar
<!-- 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 -->
You will see from the first line of code, how to change the colors, font background Just change the hex values to ones that suit your site (Shown in Red)
<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">
Then find this
<td align="center">
UKBL News<br>
And change the UKBL News for your own Title
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
<iframe id="NewsWindow" src="text.htm" width="160" height="210" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="border: #000000 1px solid;"></iframe>
You can also change the border color of your frame here as well as the width
style="border: #000000 1px solid;
When you've done that, Just save and you've got your file ready for pasting whereever you want your box to go, Simply Ccopy and paste the entire code where ever you want the box to show, In your Header?? Your Footer? On the side its up to you ;)
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....
<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>
It pretty easy to follow just change the titles, and other bits to suit your site, To add content, you just need to add basic html code and it will show in your box.
To add more content, just cut and paste one of the paragraphs like this
<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 can see how to change the title, add the context and even a link :eek: You could even add clickable pictures as long at the dimensions fall within the width of the iframe :D
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
https://vborg.vbsupport.ru/external/2009/03/63.png
The code is just bog standard HTML so feel free to edit and play around with it :D
You could even use this for advertising and sponsors The choice is yours, basically its a simple iframe with a scroll feature, so enjoy :D
Don't forget to click Installed :up: