Back to vBulletin 3.8 Template Modifications

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 -->
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)

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">
Then find this

Code:
<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

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

Code:
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....

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>
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

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 can see how to change the title, add the context and even a link 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

File Type: %1$s scroller.zip (114.8 KB, 159 downloads)

Screenshots

Click image for larger version
Name:	box1.png
Views:	64
Size:	7.1 KB
ID:	95668   Click image for larger version
Name:	box2.png
Views:	45
Size:	7.1 KB
ID:	95669   Click image for larger version
Name:	box3.png
Views:	67
Size:	15.5 KB
ID:	95670  

Similar Mods

Forum Home Enhancements UKBL ~ Advertising iFrame on Forum Home vBulletin 3.7 Template Modifications
UKBL ~ Advertising iFrame on Forum Home vBulletin 3.5 Template Modifications
Forum Home Enhancements UKBL ~ Advertising iFrame on Forum Home vBulletin 3.8 Template Modifications
Forum Home Enhancements UKBL ~ Advertising iFrame on Forum Home vBulletin 3.6 Template Modifications

vblts.ru supports vBulletin®, 2022-2024