PDA

View Full Version : Forum Home Enhancements - UKBL ~ Scrolling Forum News In iFrame


UKBusinessLive
01 Mar 2009, 15:21
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://www.vbulletin.org/forum/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://www.vbulletin.org/forum/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://www.vbulletin.org/forum/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:

UKBusinessLive
01 Mar 2009, 15:22
:D reserved ;)

ArnyVee
01 Mar 2009, 15:34
Thanks my friend! :up:

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

lasto
01 Mar 2009, 15:41
looks good m8

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

UKBusinessLive
01 Mar 2009, 16:17
looks good m8

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

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

UKBusinessLive
01 Mar 2009, 16:19
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..

itsheinz
01 Mar 2009, 17:50
interesting hack,nice one^^

UKBusinessLive
01 Mar 2009, 18:04
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

<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

width="160" In Red above ;)

and replace with

width="100%"

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

ArnyVee
01 Mar 2009, 18:22
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:

UKBusinessLive
01 Mar 2009, 18:27
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

<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://www.vbulletin.org/forum/external/2009/03/60.png

ArnyVee
01 Mar 2009, 18:27
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? ;)

ArnyVee
01 Mar 2009, 18:28
: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

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

UKBusinessLive
01 Mar 2009, 18:40
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 ;)

ArnyVee
01 Mar 2009, 20:37
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 ;)

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

macc
01 Mar 2009, 21:08
Hello! Nice - installed !


regards

macc

UKBusinessLive
01 Mar 2009, 21:08
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

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:

UKBusinessLive
01 Mar 2009, 21:23
Hello! Nice - installed !


regards

macc

Looking Good macc, Have sent you PM ;)

Forum Lover
01 Mar 2009, 21:58
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.

ArnyVee
01 Mar 2009, 22:05
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?

macc
01 Mar 2009, 22:09
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.


get same error message

macc

ArnyVee
01 Mar 2009, 22:14
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

macc
01 Mar 2009, 22:21
now... before one minut ...


macc


edit: clicked now - same error -

UKBusinessLive
01 Mar 2009, 22:34
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://www.vbulletin.org/forum/external/2009/03/59.png

Saint_I_Am
02 Mar 2009, 00:27
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?

UKBusinessLive
02 Mar 2009, 01:22
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?


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:

ArnyVee
02 Mar 2009, 01:58
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:

UKBusinessLive
02 Mar 2009, 06:55
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:


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

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

https://www.vbulletin.org/forum/external/2009/03/56.png

ArnyVee
14 Mar 2009, 02:02
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:

UKBusinessLive
14 Mar 2009, 07:41
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:

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

CFodder
18 Mar 2009, 10:01
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.

UKBusinessLive
18 Mar 2009, 19:42
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 http://www.vbulletin.org/forum/showthread.php?t=207241

DobieGillis©
05 Apr 2009, 16:38
this is a great addition to my board. Thank you!

yossie3660
11 Jun 2009, 10:12
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

dancue
14 Jun 2009, 23:34
Would be nice to have the newest posts scrolling.

Any way to implement that?

pjaco
15 Jun 2009, 22:36
Thanks,,Nice :D

K4GAP
25 Jun 2009, 01:48
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 (http://www.publicwarriors.com)

desi-boy
04 Aug 2009, 22:11
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

UKBusinessLive
05 Aug 2009, 19:03
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 ;)

yeku
08 Aug 2009, 12:31
Installed and working perfectly

thanks friend

COL NIL SATIS
23 Sep 2009, 21:01
Whats the forum root directory??

COL NIL SATIS
23 Sep 2009, 21:13
Is this ok for 3.8.4 versions bud??

suko22
31 May 2012, 11:16
Nice hack m8!!

Any idea how to avoid iframe cache?