Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Latest Threads Ticker [jQUery] Details »»
Latest Threads Ticker [jQUery]
Version: 1.00, by stator stator is offline
Developer Last Online: May 2023 Show Printable Version Email this Page

Category: Forum Home Enhancements - Version: 4.x.x Rating:
Released: 04-29-2011 Last Update: 05-18-2011 Installs: 152
Template Edits
Re-useable Code Additional Files Translations  
No support by the author.

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

Download Now

File Type: zip Latest Threads Ticker [jQUery].zip (8.7 KB, 1022 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #32  
Old 05-04-2011, 08:24 PM
MatthewA MatthewA is offline
 
Join Date: Aug 2010
Posts: 11
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I see a Blank White Page.
Reply With Quote
  #33  
Old 05-05-2011, 04:09 PM
andretan88888 andretan88888 is offline
 
Join Date: Jun 2010
Posts: 23
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks bro.Mark as installed and nominated.
Reply With Quote
  #34  
Old 05-05-2011, 05:15 PM
andretan88888 andretan88888 is offline
 
Join Date: Jun 2010
Posts: 23
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

oops,it look like this mod need 15 minutes to update latest thread.
How to fix this ?
Reply With Quote
  #35  
Old 05-05-2011, 08:58 PM
stator's Avatar
stator stator is offline
 
Join Date: Jan 2009
Location: Egypt
Posts: 99
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MatthewA View Post
I see a Blank White Page.
That is the problem, it supposed to see latest threads,
please ask for fix for this problem @ vBulletin.com
as I am don't know how to fix it.
and inform me as soon as you get a fix
Reply With Quote
  #36  
Old 05-05-2011, 08:59 PM
stator's Avatar
stator stator is offline
 
Join Date: Jan 2009
Location: Egypt
Posts: 99
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by andretan88888 View Post
oops,it look like this mod need 15 minutes to update latest thread.
How to fix this ?
I am not sure of this, anyway, I think even 15 min are not that big
Reply With Quote
  #37  
Old 05-08-2011, 07:44 PM
Last_Zero's Avatar
Last_Zero Last_Zero is offline
 
Join Date: Jan 2011
Posts: 108
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks Perfect Mod

Installed

5 Stars

Nominated
Reply With Quote
  #38  
Old 05-08-2011, 08:37 PM
ProFifaLeagues's Avatar
ProFifaLeagues ProFifaLeagues is offline
 
Join Date: Aug 2009
Location: Uk
Posts: 1,191
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks Stator
Reply With Quote
  #39  
Old 05-09-2011, 12:13 AM
midgetgrimm midgetgrimm is offline
 
Join Date: Apr 2011
Location: Florida, USA
Posts: 41
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is there any way I can turn it off and on without having to edit code each time?
Reply With Quote
  #40  
Old 05-09-2011, 04:32 AM
JAFRI's Avatar
JAFRI JAFRI is offline
 
Join Date: Jun 2009
Posts: 203
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thanks.

nice work,,,
Reply With Quote
  #41  
Old 05-09-2011, 07:26 AM
MrD's Avatar
MrD MrD is offline
 
Join Date: Aug 2003
Location: Germany/NRW
Posts: 419
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hi,
nice Mod, tagged.
Is it possible to display different static Threads?
Maybe Thread a from Forum 1 and Thread b,c from Forum 3
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:54 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.14010 seconds
  • Memory Usage 2,365KB
  • 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
  • (9)bbcode_code
  • (2)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
  • (11)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)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