vb.org Archive - Forum Home Enhancements - UKBL ~ Newsticker IFrame in Navbar

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 ~ Newsticker IFrame in Navbar (https://vborg.vbsupport.ru/showthread.php?t=208313)

UKBL ~ Newsticker IFrame in Navbar

Working Demo: http://www.ukbusinesslive.co.uk/forum With Border

Working Demo: http://www.waltdisneyboards.com/forums.php Without Border

As a request for a friend, i made this simple to add news ticker using a simple html script from Dynamic Drive and added it to the navbar, left of the login box, Now your members will be able to see up to date news everytime they login ;)

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

So Easy to Install

First Download the zip file and open the ticker.txt file in a text editor like notepad

To legally use the code from Dynamic Drive please retain their credits within the code

Code:

<!--<UKBL Iframe Ticker Start>----------------------------------------------------------------------->



<td class="alt2">

<DIV ALIGN=RIGHT>

<if condition="$show['member']">

<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->

<!--This credit MUST stay intact for use-->

<iframe id="tickermain" src="http://yourforum.com/exfile.htm" width=200 height=80 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

</DIV>

</td>

</if>

<!--<UKBL Iframe Ticker End>----------------------------------------------------------------------->

Find

Code:

src="http://yourforum.com/exfile.htm"

and replace it with yoursite and keep the file exfile.htm at root level (We'll need to edit that file later ;) )

Find

Code:

width=200 height=80

and change this for the size you want, I've kept mine small 200 x 80 pixels but you can edit this for whatever size you want to make the Iframe :up:

Find this

Code:

scrolling=no

and change it to yes if you want the iframe to scroll as opossed to just changing. if no then the content will change ever XX seconds which is adjustable ;)

Now we save that file and we need to copy and paste the entire contents of that file to our Navbar, so...

AdminCP > Styles & Templates> Style Manager> Your Chosen Style> All style options> Edit templates> Navigation / Breadcrumb Templates> navbar

Find the following

Code:

<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>

and directly below it add your code

Code:

<!--<UKBL Iframe Ticker Start>----------------------------------------------------------------------->



<td class="alt2">

<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->

<!--This credit MUST stay intact for use-->

<DIV ALIGN=RIGHT>

<if condition="$show['member']">

<iframe id="tickermain" src="C:\Users\Gerry\Desktop\exfile.htm" width=200 height=80 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

</DIV>

</td>

</if>

<!--<UKBL Iframe Ticker End>----------------------------------------------------------------------->

Ok Guys thats the first bit done,
Grab yourselves a beer, Here comes part two :D

In Notpad again open the "exfile.htm" file, as we need to edit and add our content :up:

When you open the file in Notepad we see this, remember to keep the Dynamic drive url and copyright in place ;)

Code:

<script language="JavaScript1.2">



//IFRAME TICKER- By Dynamic Drive (http://www.dynamicdrive.com)



//configure delay between changing messages (3000=3 seconds)

var delay=3000



var ie4=document.all



var curindex=0

var totalcontent=0



function get_total(){

if (ie4){

while (eval("document.all.content"+totalcontent))

totalcontent++

}

else{

while (document.getElementById("content"+totalcontent))

totalcontent++

}

}



function contract_all(){

for (y=0;y<totalcontent;y++){

if (ie4)

eval("document.all.content"+y).style.display="none"

else

document.getElementById("content"+y).style.display="none"

}

}



function expand_one(which){

contract_all()

if (ie4)

eval("document.all.content"+which).style.display=""

else

document.getElementById("content"+which).style.display=""

}



function rotate_content(){

get_total()

contract_all()

expand_one(curindex)

curindex=(curindex<totalcontent-1)? curindex+1: 0

setTimeout("rotate_content()",delay)

}



window.onload=rotate_content



</script>



<BODY bgColor=#FFFFE1>



<!--ADD YOUR TICKER CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.-->

<!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->





<div id="content0" style="display:''">



<!-- ADD TICKER's CONTENT #1 HERE--------------------->



<p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex9/encrypter.htm" target="_top">Source

code encrypter</a>&nbsp;</small></font></strong><br>

<font face="Verdana" size="2">Scramble the source of any chunk of code using

this unique script.</font></p>



<!-- END CONTENT #1----------------->



</div>



<div id="content1" style="display:none">



<!-- ADD TICKER's CONTENT #2 HERE--------------------->



<p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex5/flashlink.htm" target="_top">Flashing

links</a>&nbsp;</small></font></strong><br>

<font face="Verdana"><small>Bring attention to special links, by making them

flash!</small></font></p>



<!-- END CONTENT #2----------------->



</div>



<div id="content2" style="display:none">



<!-- ADD TICKER's CONTENT #3 HERE--------------------->



<p align="left"><small><strong><font face="Verdana"><a href="http://www.dynamicdrive.com/dynamicindex13/roamcursor.htm" target="_top">Roaming

Cursor</a>&nbsp;</font></strong></small><br>

<small><font face="Verdana">Display a second, &quot;roaming&quot; cursor on your

page with this fun animation script.</font></small></p>



<!-- END CONTENT #3----------------->



</div>



<div id="content3" style="display:none">



<!-- ADD TICKER's CONTENT #4 HERE--------------------->



<p align="left"><font face="Verdana"><strong><a href="http://www.dynamicdrive.com/dynamicindex11/animatedtitle.htm" target="_top"><small>Animated

Document title</small></a><br>

</strong><small>Animate into view your document's title!</small></font></p>



<!-- END CONTENT #4----------------->



</div>

Find this

Code:

var delay=3000

and change it for whatever delay you want, remember its in milliseconds so 3 seconds = 3000

next Find this

Code:

<BODY bgColor=#FFFFE1>

This changes the color of the iframe background, Use a hex color generator to chose a color which suits your site, I use this http://www.2createawebsite.com/build/hex-colors.html

Find this

Code:

<!-- ADD TICKER's CONTENT #1 HERE--------------------->



<p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex9/encrypter.htm" target="_top">Source

code encrypter</a>&nbsp;</small></font></strong><br>

<font face="Verdana" size="2">Scramble the source of any chunk of code using

this unique script.</font></p>



<!-- END CONTENT #1----------------->

these are the text blocks, Just edit them to suit your content

You'll see how easy it is, The first part is the url of your link, Then the text after it, once you've done a couple you'll get the knack ;)

if you want to add more, make sure you......

Code:

<!--ADD YOUR TICKER CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.-->

<!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->

Thats it, so now we need to save the file, and upload the file (exfile.htm) to our forums root directory.

Thats it, Now click onto your homepage and suprise your members with your New feature

Please click Install if you use and i'll support you 100%

:D reserved :rolleyes:

Thanks Gerry! :up:

Another useful option for those folks looking to do little touches on their sites! Thanks for participating so much and contributing to the community my friend!

I'll be installing it shortly! :D

Quote:

Originally Posted by ArnyVee (Post 1767957)

OK Buddy Glad to help, perhaps a link for a demo, kind sir ;)

is there a demo site with this working?

Quote:

Originally Posted by hoopsta (Post 1768030)

is there a demo site with this working?

will be shortly Bear with me

I've got it started (still testing), but you can use my site for the demo http://www.waltdisneyboards.com/forums.php

Gerry, I'd like to ask a question. I noticed that the text wasn't aligned towards the top. Where do I put the valign="top" piece?

Also, what do I do to change the color (or eliminate, rather) the borders on the iFrame?

Quote:

Originally Posted by ArnyVee (Post 1768041)

thanks. You have a lot of cool hacks on your wite. But I don't see that one working yet. I'll check back.

Quote:

Originally Posted by hoopsta (Post 1768045)

thanks. You have a lot of cool hacks on your wite. But I don't see that one working yet. I'll check back.

I'll add the demo to the first post when its installed

Quote:

Originally Posted by ArnyVee (Post 1768041)

would you mind telling me which hack you use for the Top 5 Stats ?

Quote:

Originally Posted by ArnyVee (Post 1768041)

Hi Arny,

Not sure what you mean about the align= top?? It works OK on my Test Site?? Post me a link when you get it up?

To make the Border disappear in the ticker.txt file find

Code:

frameborder=1

and change to

Code:

frameborder=0

Just going to get my demo done on my site ;) bear with me for a sec....

Alright i loaded it and everything but a couple of small problems.
1. Can this scroll right to left, like a stock ticker..... Does this automatically scroll?
2. Can this be centered in the navbar
3. I cannot get it to scroll at all, i probably screwed something up:D

I love this idea, i have been looking for one that is quality for a long time.

Thanks for the help

Code:

<script language="JavaScript1.2">



//IFRAME TICKER- By Dynamic Drive (http://www.dynamicdrive.com)



//configure delay between changing messages (3000=3 seconds)

var delay=3000



var ie4=document.all



var curindex=0

var totalcontent=0



function get_total(){

if (ie4){

while (eval("document.all.content"+totalcontent))

totalcontent++

}

else{

while (document.getElementById("content"+totalcontent))

totalcontent++

}

}



function contract_all(){

for (y=0;y<totalcontent;y++){

if (ie4)

eval("document.all.content"+y).style.display="none"

else

document.getElementById("content"+y).style.display="none"

}

}



function expand_one(which){

contract_all()

if (ie4)

eval("document.all.content"+which).style.display=""

else

document.getElementById("content"+which).style.display=""

}



function rotate_content(){

get_total()

contract_all()

expand_one(curindex)

curindex=(curindex<totalcontent-1)? curindex+1: 0

setTimeout("rotate_content()",delay)

}



window.onload=rotate_content



</script>



<BODY bgColor=#333333>



<div align="center">

  <!--ADD YOUR TICKER CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.-->

  <!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->

  <strong><font color="#FFFFFF" face="Verdana">Welcome to Diversified Online Gamers!!!</font></strong>

</div>

<div id="content1" style="display:none">



  <div align="center"><font color="#FFFFFF">

  <!-- ADD TICKER's CONTENT #2 HERE--------------------->

    

<strong>  <<strong><font face="Verdana">Welcome to Diversified Online Gamers!!!</font></strong></small></font>

    </p></strong>

    

    <!-- END CONTENT #2----------------->

    </font></div>

</div>



<div id="content2" style="display:none">



  <div align="center"><font color="#FFFFFF">

  <!-- ADD TICKER's CONTENT #3 HERE--------------------->

    

    <strong><font color="#FFFFFF" face="Verdana">Welcome to Diversified Online Gamers!!!</font></strong>

</div>

  <!-- END CONTENT #3----------------->

  </font></div>

</div>

<div id="content3" style="display:none">

Gerry, it's working now. :up:

I forgot that you had the "show 'member'" in there. So, I removed that (and noticed where to put the "0" for the frameborder too ;) ) and it should be good.

Now, just working on aligning the text to the top to make it look nicer. :)

Quote:

Originally Posted by hoopsta (Post 1768049)

would you mind telling me which hack you use for the Top 5 Stats ?

No problem sir! :)

I use the Cyb-Advanced Forum Stats. If you're using vB 3.8, go here https://vborg.vbsupport.ru/showthread.php?t=201274 ... if you're using vB 3.7, go here https://vborg.vbsupport.ru/showthread.php?t=177778

Thanks for comments, by the way! :up:

The demo on my site is working other than the text being down a bit (almost as if there are some line breaks in there somewhere), so I'm adjusting that now.

I have it blending into (no iFrame border or differentiating background color) my site. So, Gerry could use this one as another option in his demos. :D

thanks Arny... I just uploaded the stat hack. I like this newsticker thing to....

No problem Hoopsta! :)

Yes, Gerry does a lot of helpful and fun modifications for our community. :up:

I'm happy that others have liked the ideas as well. :D

this is a dumb question, but once this is set up all we need to do is edit: exfile.htm and that will change newsticker info?

Quote:

Originally Posted by Jon Tolzien (Post 1768065)

Hi Jon, To answer your Questions

1. This will scroll from bottom to top if you want, for right to left you'll need something like this, My scrolling marquee hack https://vborg.vbsupport.ru/showthread.php?t=207241

2. if you align this in the centre of the navbar, then it will mess up the forum breadcrumb and make the navbar wider, It need to be in its own "cell" next to the login, if you want an iframe in the centre then you can just add My scrolling Forum news to the header https://vborg.vbsupport.ru/showthread.php?t=207002 demo: http://www.ukbusinesslive.co.uk/forum/scroller.htm

3. To get this hack to scroll bottom to top go to the ticker.txt file and find

Code:

scrolling=no

Just change the attribute to=yes

You can see how this works on my demo: www.ukbusinesslive.co.uk/forum

Quote:

Originally Posted by hoopsta (Post 1768087)

this is a dumb question, but once this is set up all we need to do is edit: exfile.htm and that will change newsticker info?

Thats right, edit the exfile.htm file and upload the file to your forum root directory ;)

I've addd a demo on my forum www.ukbusinesslive.co.uk/forum :D

Gerry...I think I know why mine is not 'centered'. I adjusted the size (height) and it probably threw it off. How do we make it so that it's "fluid" and maybe centered based on the size and not a set pixel size?

Could that be the problem?

Quote:

Originally Posted by ArnyVee (Post 1768096)

Arny

If you look at the exfile.htm file and look at each block

Code:

<p align="left"><small><strong><font face="Verdana"><a href="http://www.ukbl.co.uk" target="_top">Business Hosting</a>&nbsp;</font></strong></small><br>

<small><font face="Verdana">Join us on our very own Hosting Site.</font></small></p>

you will see

Code:

<p align="left">

Just change that for center, and your text will be central ;)

Code:

<p align="center">

Sorry Gerry, I mean to say "centered", but top to bottom as opposed to left to right.

Quote:

Originally Posted by ArnyVee (Post 1768112)

Sorry Gerry, I mean to say "centered", but top to bottom as opposed to left to right.

Ha Ha You love making me work :eek:

Hang in there buddy i'll take a look at the code again ;)

You need to add the valign="middle" attribute also like this

Code:

<p align="center" valign="middle">

so I tried to find this in my Navbar

<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>

and it only appears in my default style, not my modded ones which I use. LOL! Go figure!

Didn't work Gerry. So, I just adjusted it back up to "80" on the height and it's centered now. But, there has to be a way to valign="top" or "middle" in there. The "p align" works as far as centering (although I don't want it like that, I like the left align and moved it back to left). But, I can't get the valign to go to "top" or even "middle" when you change the height of the iFrame. Strange.

Well, I'll work with it at 80 for now and see if I need to revisit that in the future :)

Now, gonna go and add "real" info and links in the mod :up:

Quote:

Originally Posted by DobieGillis? (Post 1768135)

Have a go adding the code, in the nearest alternative part, as long as your in the navbar template for that style.

if you keep the opening and closing tags on the code you can quickly cut it out and re paste elsewhere, if the box comes out in the wrong place ;)

Code:

<!--<UKBL Iframe Ticker Start>----------------------------------------------------------------------->



Code goes here



<!--<UKBL Iframe Ticker Start>----------------------------------------------------------------------->

Quote:

Originally Posted by UKBusinessLive (Post 1768141)

Code:

<!--<UKBL Iframe Ticker Start>----------------------------------------------------------------------->



Code goes here



<!--<UKBL Iframe Ticker Start>----------------------------------------------------------------------->

will give it a shot.

Quote:

Originally Posted by ArnyVee (Post 1768138)

Damm :( I guess someone will come along and tell us ;)

Any way Arny i've kept mine central and change the hieght so that it looks good with just 3 lines, The link and 2 lines of text, Thats all i need for my site.

:)

got it working but the contect is pretty lame. Any suggestions on changing content fprovide? Do I replace the www.dynamicdrive.com/dynamicindex9/encrypter.htm" with another content provider i.e. foxnews, or whatever?

Quote:

Originally Posted by DobieGillis? (Post 1768157)

???????????? :confused:

I think you must be talking about something else here buddy :eek:

Quote:

Originally Posted by UKBusinessLive (Post 1768162)

???????????? :confused:

I think you must be talking about something else here buddy :eek:

no I'm not. Where is the source of the info that is scrolling? How do I change that?

never mind, I get it.

Quote:

Originally Posted by DobieGillis? (Post 1768164)

no I'm not. Where is the source of the info that is scrolling? How do I change that?

Thats in the exfile.htm file which you need to edit and upload to your forums root directory, its all in the first post ;)

Not sure where you got this from ??

Code:

www.dynamicdrive.com/dynamicindex9/encrypter.htm

I get it, I thought the feed was coming from another source, you add your own content. Doh!

Quote:

Originally Posted by DobieGillis? (Post 1768175)

I get it, I thought the feed was coming from another source, you add your own content. Doh!

You got me worried there buddy :D:D

Gerry, I just noticed that everything in the navbar template is sitting at the same level. So, it must be something that has to be adjusted within the entire template and not just the part of the code only. It seems to be one of those things where the coding is being over-ridden.

Quote:

Originally Posted by UKBusinessLive (Post 1768177)

You got me worried there buddy :D:D

not even drinking yet, lol! With all your mods on my site, maybe I should rename it UKBL Part 2?

Quote:

Originally Posted by ArnyVee (Post 1768182)

I'm trying to see where its differnt from the rest of the navbar, I guess its because of the height of the iframe and the text automatically goes to the top. :confused:

Gerry, I set it back to the 200 x 80 that you originally had and you can see on the site that it's at the same level as the login area and RSS icon, etc. So, something is overriding the code, I assume.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01497 seconds Memory Usage 1,909KB 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 (22)bbcode_code_printable (20)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: