UKBL ~ Newsticker IFrame in Navbar
[CENTER]
Working Demo: http://www.ukbusinesslive.co.uk/forum
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 ;)
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
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> </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> </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> </font></strong></small><br>
<small><font face="Verdana">Display a second, "roaming" 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
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> </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%