The Arcive of Official vBulletin Modifications Site.

Latest Threads Ticker [jQUery] · **Released**: 04-29-2011

Description:

This display the latest 10 threads in manner resemble news ticker.

Demo: http://www.jquerynewsticker.com/

Installation:

Code:

Be sure that:
"vBulletin Options > vBulletin Options > External Data Provider"

Enable External Javascript = yes

1- Open headinclude template.

2- At the end of the template ADD the following code:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="js/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

3- Open additional.css template

4- At the end of the template ADD the following code:

Code:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* StatorLatest Threads Ticker  */
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#ticker-wrapper * {
        margin-left: auto;
        margin-right: auto;

}

#ticker-wrapper.has-js {
    margin: 20px auto 20px auto;
    padding: 0px 20px;
    width: 900px;
    height: 30px;
    display: block;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #f8f0db;
    font-size: 1.1em;
}
#ticker {
    width: 830px;
    height: 30px;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f8f0db;
}
#ticker-title {
    padding: 5px;
    color: #990000;
    font-weight: bold;
    background-color: #f8f0db;
    text-transform: none;
}
#ticker-content {
    margin: 0px;
    padding: 5px;
    position: absolute;
    color: #1F527B;
    font-weight: normal;
    background-color: #f8f0db;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2em;

}
#ticker-content:focus {
    none;
}
#ticker-content a {
    text-decoration: none;    
    color: #1F527B;
}
#ticker-content a:hover {
    text-decoration: underline;    
    color: #0D3059;
}
#ticker-swipe {
    padding-top: 9px;
    position: absolute;
    top: 0px;
    background-color: #f8f0db;
    display: block;
    width: 800px;
    height: 23px; 
}
#ticker-swipe span {
    margin-left: 1px;
    background-color: #f8f0db;
    border-bottom: 1px solid #1F527B;
    height: 12px;
    width: 7px;
    display: block;
}
#ticker-controls {
    padding: 8px 0px 0px 0px;
    list-style-type: none;
    float: left;
}
#ticker-controls li {
    padding: 0px;
    margin-left: 5px;
    float: left;
    cursor: pointer;
    height: 16px;
    width: 16px;
    display: block;
}
#ticker-controls li#play-pause {
    background-image: url('../images/controls.png');
    background-position: 32px 16px;
}
#ticker-controls li#play-pause.over {
    background-position: 32px 32px;
}
#ticker-controls li#play-pause.down {
    background-position: 32px 0px;
}
#ticker-controls li#play-pause.paused {
    background-image: url('../images/controls.png');    
    background-position: 48px 16px;
}
#ticker-controls li#play-pause.paused.over {
    background-position: 48px 32px;
}
#ticker-controls li#play-pause.paused.down {
    background-position: 48px 0px;
}
#ticker-controls li#prev {
    background-image: url('../images/controls.png');
    background-position: 0px 16px;        
}
#ticker-controls li#prev.over {
    background-position: 0px 32px;        
}
#ticker-controls li#prev.down {
    background-position: 0px 0px;        
}
#ticker-controls li#next {
    background-image: url('../images/controls.png');    
    background-position: 16px 16px;    
}
#ticker-controls li#next.over {
    background-position: 16px 32px;    
}
#ticker-controls li#next.down {    
    background-position: 16px 0px;    
}
.js-hidden {
    display: none;
}
#no-js-news {
    padding: 10px 0px 0px 45px; 
    color: #F8F0DB;
}
.left #ticker-swipe {
    left: 80px;
}
.left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
    float: left;
}
.left #ticker-controls {
    padding-left: 6px;
}
.right #ticker-swipe {
    right: 80px;
}
.right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
    float: right;
}
.right #ticker-controls {
    padding-right: 6px;
}

5- Open navbar template

6- At the end of the template ADD the following code:

Code:

<!--ticker-->
<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
    <script type="text/javascript">
<!--
    for (var i = 0; i < threads.length; i++)
    {
        document.write('<li><a href="{vb:raw vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' + threads[i]['title'] + '</a>' + '&nbsp;&nbsp;&nbsp;' + '<span style="color: red;">Posted By:</span>'+ '&nbsp;' + threads[i]['poster'] + '</a>' + '</li>');
    }
//-->
</script>
</ul>
</div>
<!--ticker-->

7- Upload the " js " folder to your forum root.

FAQs

1- How to change language of " Latest Threads "?

edit your "jquery.ticker.js" file that you uploaded to js folder

scroll down till the end of the file and edit the following variable:

Code:

// plugin defaults - added as a property on our plugin function
    $.fn.ticker.defaults = {
        speed: 0.10,            
        ajaxFeed: false,
        feedUrl: '',
        feedType: 'xml',
        displayType: 'reveal',
        htmlFeed: true,
        debugMode: true,
        controls: true,
        titleText: 'Latest Threads',    
        direction: 'ltr',    
        pauseOnItems: 3000,
        fadeInSpeed: 600,
        fadeOutSpeed: 300
    };    
})(jQuery);

Language:
Change "latest threads" to language you wish, e.g.

Portuguese = ?ltimos T?picos
German = Aktuelle Themen and so on ....

2- How to change direction of the ticker?

edit your "jquery.ticker.js" file that you uploaded to js folder

scroll down till the end of the file and edit the following variable:

Code:

// plugin defaults - added as a property on our plugin function
    $.fn.ticker.defaults = {
        speed: 0.10,            
        ajaxFeed: false,
        feedUrl: '',
        feedType: 'xml',
        displayType: 'reveal',
        htmlFeed: true,
        debugMode: true,
        controls: true,
        titleText: 'Latest Threads',    
        direction: 'rtl',    
        pauseOnItems: 3000,
        fadeInSpeed: 600,
        fadeOutSpeed: 300
    };    
})(jQuery);

Direction:
left to right = ltr
right to left = rtl

3- How to change language of " Posted by: "?

In the code added to "Navbar" template, change "Posted by"

Code:

<!--ticker-->
<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
    <script type="text/javascript">
<!--
    for (var i = 0; i < threads.length; i++)
    {
        document.write('<li><a href="{vb:raw  vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' +  threads[i]['title'] + '</a>' + '&nbsp;&nbsp;&nbsp;' +  '<span style="color: red;">Posted By:</span>'+ '&nbsp;'  + threads[i]['poster'] + '</a>' + '</li>');
    }
//-->
</script>
</ul>
</div>
<!--ticker-->

4- How to include certain forums:

In the code added to "Navbar" template, add the red part"

Code:

<!--ticker-->
 <div id="ticker-wrapper" class="no-js">
 <ul id="js-news" class="js-hidden">
 <script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js&forumids=1,2,3,4,5"></script>
     <script type="text/javascript">
 <!--
     for (var i = 0; i < threads.length; i++)
     {
         document.write('<li><a href="{vb:raw  vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' +  threads[i]['title'] + '</a>' + '&nbsp;&nbsp;&nbsp;' +  '<span style="color: red;">Posted By:</span>'+ '&nbsp;'  + threads[i]['poster'] + '</a>' + '</li>');
     }
 //-->
 </script>
 </ul>
 </div>
 <!--ticker-->

5- Is it possible to use the blog feed?

yes, but the available type is "XML"

edit your "jquery.ticker.js" file that you uploaded to js folder

scroll down till the end of the file and edit the following variables:

Code:

    // plugin defaults - added as a property on our plugin function
    $.fn.ticker.defaults = {
        speed: 0.10,            
        ajaxFeed: true,
        feedUrl: 'http://www.YOURSITE.com/RSS.xml',
        feedType: 'xml',
        displayType: 'reveal',
        htmlFeed: false,
        debugMode: true,
        controls: true,
        titleText: 'Latest Blog Feeds',    
        direction: 'ltr',    
        pauseOnItems: 3000,
        fadeInSpeed: 600,
        fadeOutSpeed: 300
    };    
})(jQuery);

If you Like it, don't forget to Mark As Installed

If you really liked it, Don't forget to Rate it

If you really really liked it, Don't forget to Nominate it for MOTM

yeppuda · #**152** 02-12-2012, 08:16 AM

for 4.x.x:

Code:

<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js&forumids=1,2,3,4,5"></script>
     <script type="text/javascript">

True ?

for 3.8.x:

Code:

<script type="text/javascript" src="[vboptions.bburl]/external.php?&type=js&f=1,2,3,4,5"></script>
     <script type="text/javascript">

Coder, help please

tommydamic68 · #**153** 02-14-2012, 12:12 AM

For 3.8 users-here is the CSS code. you will have to adjust it to your site. it took me days to get the answer so enjoy it freely and simply! iv'e made the code bold where you will need to adjust it for your site.

Code:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* StatorLatest Threads Ticker  */
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#ticker-wrapper * {
        margin-left: auto;
        margin-right: auto;

}
#ticker-wrapper.has-js {
    margin: 20px auto 20px auto;
    padding: 0px 20px;
    width: 870px;
    height: 30px;
    display: block;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #f8f0db;
    font-size: 1.1em;
}
 #ticker-wrapper{position:relative}

#ticker {
    width: 830px;
    height: 30px;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f8f0db;
}
#ticker-title {
    padding: 5px;
    color: #990000;
    font-weight: bold;
    background-color: #f8f0db;
    text-transform: none;
}
#ticker-content {
    margin: 0px;
    padding: 5px;
    position: absolute;
    color: #1F527B;
    font-weight: normal;
    background-color: #f8f0db;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2em;

}
#ticker-content:focus {
    none;
}
#ticker-content a {
    text-decoration: none;    
    color: #1F527B;
}
#ticker-content a:hover {
    text-decoration: underline;    
    color: #0D3059;
}
#ticker-swipe {
    padding-top: 9px;
    position: absolute;
    top: 0px;
    background-color: #f8f0db;
    display: block;
    width: 800px;
    height: 23px; 
}
#ticker-swipe span {
    margin-left: 1px;
    background-color: #f8f0db;
    border-bottom: 1px solid #1F527B;
    height: 12px;
    width: 7px;
    display: block;
}
#ticker-controls {
    list-style-type: none;
    margin: 0;
    padding: 8px 0 0;
    position: absolute;
    right: 30px;
    top:45;
}
#ticker-controls li {
    padding: 0px;
    margin-left: 5px;
    float: left;
    cursor: pointer;
    height: 16px;
    width: 16px;
    display: block;
}
#ticker-controls li#play-pause {
    background-image: url('../images/controls.png');
    background-position: 32px 16px;
}
#ticker-controls li#play-pause.over {
    background-position: 32px 32px;
}
#ticker-controls li#play-pause.down {
    background-position: 32px 0px;
}
#ticker-controls li#play-pause.paused {
    background-image: url('../images/controls.png');    
    background-position: 48px 16px;
}
#ticker-controls li#play-pause.paused.over {
    background-position: 48px 32px;
}
#ticker-controls li#play-pause.paused.down {
    background-position: 48px 0px;
}
#ticker-controls li#prev {
    background-image: url('../images/controls.png');
    background-position: 0px 16px;        
}
#ticker-controls li#prev.over {
    background-position: 0px 32px;        
}
#ticker-controls li#prev.down {
    background-position: 0px 0px;        
}
#ticker-controls li#next {
    background-image: url('../images/controls.png');    
    background-position: 16px 16px;    
}
#ticker-controls li#next.over {
    background-position: 16px 32px;    
}
#ticker-controls li#next.down {    
    background-position: 16px 0px;    
}
.js-hidden {
    display: none;
}
#no-js-news {
    padding: 10px 0px 0px 45px; 
    color: #F8F0DB;
}
.left #ticker-swipe {
    left: 80px;
}
.left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
    float: left;
}
.left #ticker-controls {
    padding-left: 6px;
}
.right #ticker-swipe {
    right: 80px;
}
.right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
    float: right;
}
.right #ticker-controls {
    padding-right: 6px;
}

abyanhost · #**154** 02-17-2012, 04:20 PM

Quote:

Originally Posted by Merjawy

If the board is using Arabic UTF-8, java won't decode Arabic terms correctly.
It works fine if Windows-1256 is used.

It works fine in my Arabic UTF-8 board "abyanboard" vb Version 4.1.10.

Simply open the file jquery.ticker.js by notepad++ and convert it to UTF-8 without BOM.
Edit "Latest threads" = " آخر المواضيع " , also direction "rtl", as per the instructions in the mod.
save the file and upload it to js directory.

Regards,

dany_danay · #**155** 02-20-2012, 12:19 PM

I want to show certain threads, i try to add:
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js&forumids=14&threadid=31608"></script>
but it show another thread from the same subforum.. any ideas?
Please!!

CuteC@t · #**156** 03-30-2012, 06:17 AM

How do I turn it off ? Do I have to remove all codes..........plz someone guide me!

hacker_ · #**157** 03-31-2012, 06:59 PM

for more seo in vBSEO how to edit this?

<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
<script type="text/javascript">

</script>
</ul>
</div>

because the link did not appear as if the vBSEO thus
http://websiteforum/showthread.php?t=11
and the real link for the vBSEO is this
http://websiteforum/f13/la-primera-p...ion-11-post17/
how to fix this code in de navbar?

egyptsons · #**158** 04-04-2012, 09:49 PM

it works fine
but controls image not appears
see here
http://www.egyptsons.com/misr

egyptsons · #**159** 04-04-2012, 10:10 PM

Quote:

Originally Posted by egyptsons

it works fine
but controls image not appears
see here
http://www.egyptsons.com/misr

It work fine now after i upload the image to the domain root

skido · #**160** 04-06-2012, 08:27 PM

Very nice, installed ..works perfect

Feel free to look here to see it running http://unitedextremegamers.net/forum.php

Thanks again!

CuteC@t · #**161** 04-07-2012, 08:03 AM

Quote:

Originally Posted by egyptsons

It work fine now after i upload the image to the domain root

what is domain root ?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04845 seconds Memory Usage 2,363KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (12)bbcode_code (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)pagenav_pagelinkrel (11)post_thanks_box (12)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (1)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

11 благодарности(ей) от:
abouobaide, abyanhost, BlueCheri, Bubble #5, doctorsexy, Donavaz, Manoel J?nior, Mazinger, RichieBoy67, sodasusu, Toorak Times

Благодарность от:
yeppuda

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!