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

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)

- - Forum Home Enhancements - UKBL ~ Scrolling Forum News In iFrame (https://vborg.vbsupport.ru/showthread.php?t=207002)

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:

Thanks my friend! :up:

Hope folks get as much out of this one as I will. :D

looks good m8

i suppose this could be used for anythign besides text ??

Quote:

Originally Posted by lasto (Post 1757569)

looks good m8

i suppose this could be used for anythign besides text ??

Pictures, Links, Experiment is the keyword here buddy ;)

Quote:

Originally Posted by ArnyVee (Post 1757566)

Thanks my friend! :up:

Hope folks get as much out of this one as I will. :D

Arny I've edited a file to suit your boards colors so the iframe is invisable its in the zip file, enjoy :D

Only the color has been changed you'll need to add the context, width etc..

interesting hack,nice one^^

Quote:

Originally Posted by itsheinz (Post 1757633)

interesting hack,nice one^^

Thanks, if anyone wants to make this go the full width of their forum then find this line in the scroller.txt file

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>

</td></tr></table>

find

Code:

width="160"

In Red above ;)

and replace with

Code:

width="100%"

That will automatically make the box the same width as your forum :D

Quote:

Originally Posted by UKBusinessLive (Post 1757585)

Arny I've edited a file to suit your boards colors so the iframe is invisable its in the zip file, enjoy :D

Only the color has been changed you'll need to add the context, width etc..

You're the best! :up:

Quote:

Originally Posted by ArnyVee (Post 1757659)

You're the best! :up:

:p:p

Thanks Buddy

You can if you want do away with the box and have just the iframe

In the scroller.txt

find this

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

UKBL News<br>

</td></tr><tr><td>

and delete it that should leave you a plain scroll box ;)

https://vborg.vbsupport.ru/external/2009/03/60.png

Gerry, is there a way to make it stop or pause for every "story" or paragraph? Or, would I have to add some messy js for that? ;)

Quote:

Originally Posted by UKBusinessLive (Post 1757667)

:p:p

Thanks Buddy

You can if you want do away with the box and have just the iframe

In the scroller.txt

find this

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

UKBL News<br>

</td></tr><tr><td>

and delete it that should leave you a plain scroll box ;)

I'll try that after I get it going here in a bit. :D

Thanks again!

Quote:

Originally Posted by ArnyVee (Post 1757668)

Gerry, is there a way to make it stop or pause for every "story" or paragraph? Or, would I have to add some messy js for that? ;)

The idea is that the text scrolls if the user wants to stop it or pause then they move their cursor to the box and that would stop the srolling.

At the moment, you can lenghten the delay on which it starts scrolling but not stoping each one on a pause, it wouldn't be that hard to do, i just need to try it out a bit, just so i know it works.

It pauses on mouseover, but i'll look at the auto pause for you ;)

Quote:

Originally Posted by UKBusinessLive (Post 1757676)

Gerry, I've played with the settings and it's good without having to do the 'pause per story' that I spoke about before.

I noticed that in the title line, if I use a text link in there, it changes the color slightly. I'm assuming that I can adjust that in the settings. But, I haven't done anything with it yet since I'm taking care of some other non-related issues on my site.

Thanks again Gerry for helping me with this and I'm glad that some others have found it useful as well! :up:

For another demo (without the "framed" area) you can use this link and the working demo is at the top of the left side column: http://www.waltdisneyboards.com/forums.php

Hello! Nice - installed !

regards

macc

Quote:

Originally Posted by ArnyVee (Post 1757775)

Ok mate glad you liked it, I'm trying to keep it simple without adding masses of javascript.

The borderless mode is idea for adding it into a frame which suits your board, Works well there arny ;)

i'll add the demo to the 1st post so members can compare them both :rolleyes:

Quote:

Originally Posted by macc (Post 1757808)

Hello! Nice - installed !

regards

macc

Looking Good macc, Have sent you PM ;)

Unable to add cookies, header already sent.
File: /home/avarona/domains/waltdisneyboards.com/public_html/includes/class_yui.php
Line: 80

I see this error at http://www.waltdisneyboards.com/forums.php

Better you can remove that demo and give us a working one.

Another UKB kinda hack. :) Tagged, gonna install it soon.

Forum Lover, the page is working alright for me. Can you check it again to make sure that it wasn't a 1-time deal?

Quote:

Originally Posted by Forum Lover (Post 1757850)

get same error message

macc

macc, did you just click on it now? Or, was it earlier?

I disabled something that might've been the cause of that error. Can you double check for me?

Thanks! :D

now... before one minut ...

macc

edit: clicked now - same error -

Quote:

Originally Posted by ArnyVee (Post 1757871)

macc, did you just click on it now? Or, was it earlier?

I disabled something that might've been the cause of that error. Can you double check for me?

Thanks! :D

I just looked arny and its working for me :erm:

https://vborg.vbsupport.ru/external/2009/03/59.png

I was getting the same error when I click the link in the above posts. I went to the main page and clicked the forums link and it works fine.

I don't suppose there is a way to insert recent threads from vbadvanced into this is there?

Quote:

Originally Posted by Saint_I_Am (Post 1757985)

If you can add them as a url or html then yes you could, But i don't do vbadvanced, so i don't really know how it works :confused:

Looks like that error that I was getting was due to the Tabbed Forum Home v2.0 that I'm a beta tester on. Just wanted to confirm that this mod had nothing to do with it. :)

As the others have stated, by going to http://www.waltdisneyboards.com and then clicking on "forums" at the top, you'll get to the forum home with no issues. But, most folks are not reporting any issues going straight to http://www.waltdisneyboards.com/forums.php and seeing the mod in action :up:

Quote:

Originally Posted by ArnyVee (Post 1758092)

Thanks for the Heads up on that Arny, I was a bit worried, as i'd tested it all day on my board without issues. Hope you get that sorted shortly ;)

Just to confirm works well in a VBadvanced module too, Thanks for Macc for pointing this out to me :D

https://vborg.vbsupport.ru/external/2009/03/56.png

Gerry, just an FYI.....the error that some folks were receiving on the forumhome page of my site has been gone for a bit. Just wanted to confirm that it was working in the event that someone needed the 'demo' for the version without the iFrame border :D

Thanks again for doing this nice little touch for the community! :up:

Quote:

Originally Posted by ArnyVee (Post 1767546)

Thanks for the Update mate, Glad you managed to sort your problem out ;)

I've not tried this yet but certainly will do so. What I was wondering if it will scroll right to left ... or vice versa? Would like the news going across the page like a ticker at the top.

Quote:

Originally Posted by CFodder (Post 1770976)

I've not tried this yet but certainly will do so. What I was wondering if it will scroll right to left ... or vice versa? Would like the news going across the page like a ticker at the top.

This will not do right to left only down and up, You may want to try and use My marquee scroller here https://vborg.vbsupport.ru/showthread.php?t=207241

this is a great addition to my board. Thank you!

Can I put some rss feed in the news? so the news is updated as always, i dont have to update everyday manually but changes from rss, can i do dat? thanks alot...this mod is great....or can i put some image and the function will roller over the image? like rolling banner but changes every minutes when they scrolling? And where i put the text.htm? did i know where text.htm must be put in my forum, in what folder? thanks.

regards
yossie3660

Would be nice to have the newest posts scrolling.

Any way to implement that?

Thanks so much for this! I think it enhanced my site. I placed it in the header for site news. I also used it to link to an MP3 player which saved me from having to add another button to my customized style.

Thanks so much!

Public Warriors

can i use this on a .html page i mean my forum is www.mydomain.com/forum

can i use this code on www.mydomain.com/index.html

thnxxxx

Quote:

Originally Posted by desi-boy (Post 1861424)

can i use this on a .html page i mean my forum is www.mydomain.com/forum

can i use this code on www.mydomain.com/index.html

thnxxxx

Hi Desi Boy

The majority of my Hacks can be used on a HTML website you don't always need to just use them on VBulletin sites, Try it and see ;)

Installed and working perfectly

thanks friend

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01374 seconds Memory Usage 1,873KB 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 (12)bbcode_code_printable (17)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)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: