vb.org Archive - Forum Home Enhancements - UKBL ~ Scrolling Forum News In iFrame

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

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01326 seconds Memory Usage 1,789KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (11)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: