Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications

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
  #92  
Old 08-08-2011, 10:15 PM
Dr.osamA's Avatar
Dr.osamA Dr.osamA is offline
 
Join Date: Aug 2004
Location: Syrie
Posts: 979
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

installed
translated
thank you bro
keep it up
Reply With Quote
  #93  
Old 08-09-2011, 01:03 AM
iDHKHCM iDHKHCM is offline
 
Join Date: Aug 2011
Posts: 74
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by stator View Post
To include certain forums
Edit the code added to navbar template

Code:
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js&forumids=14,5,21,15,9,10">

Screen Shot:

this isnt working on 4.1.5
Reply With Quote
  #94  
Old 08-09-2011, 06:08 AM
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Posts: 1,255
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is this working for anyone running 4.1.5 ?
Reply With Quote
  #95  
Old 08-09-2011, 02:01 PM
archet1337's Avatar
archet1337 archet1337 is offline
 
Join Date: Sep 2009
Location: Norway
Posts: 251
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

If you scroll 4 posts up, you see it is actually running fine on 4.1.5

Or you can click here for a live demo.
Reply With Quote
  #96  
Old 08-12-2011, 05:45 AM
gothicuser's Avatar
gothicuser gothicuser is offline
 
Join Date: Apr 2004
Location: Kernow, Nr. UK
Posts: 468
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I've been trying to apply this mod now for a few hours. I'm using vB4.1.5 totally clean install, with only a few threads/posts.
All I can get is an error (see screenies below)
Firebug tells me it's not defining
Code:
$(function () {
   $('#js-news').ticker();
  });
Went as far as to re-install vB a couple of times, just to assure myself that it was a clean install.
Any suggestions?
Attached Images
File Type: jpg 01.jpg (8.6 KB, 0 views)
File Type: jpg 02.jpg (32.7 KB, 0 views)
Reply With Quote
  #97  
Old 08-14-2011, 12:06 AM
mjfan227's Avatar
mjfan227 mjfan227 is offline
 
Join Date: Jul 2011
Posts: 50
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Using 4.1.5 and it isn't showing up at all.
Reply With Quote
  #98  
Old 08-14-2011, 03:14 AM
iDHKHCM iDHKHCM is offline
 
Join Date: Aug 2011
Posts: 74
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

mines working fine on 4.1.5 make sure you followed the instructions correctly

http://screensnapr.com/v/2ZXcQp.png
Reply With Quote
  #99  
Old 08-18-2011, 02:24 AM
mjfan227's Avatar
mjfan227 mjfan227 is offline
 
Join Date: Jul 2011
Posts: 50
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I did steps 1-7 as per directions, checked and double checked, and it is just not showing up!
Reply With Quote
  #100  
Old 08-18-2011, 06:12 AM
iDHKHCM iDHKHCM is offline
 
Join Date: Aug 2011
Posts: 74
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by mjfan227 View Post
I did steps 1-7 as per directions, checked and double checked, and it is just not showing up!
are forums and threads viewable for ALL usergroups?
Reply With Quote
  #101  
Old 08-23-2011, 06:07 PM
AttalaEA AttalaEA is offline
 
Join Date: Apr 2011
Posts: 95
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I am runing vb 4.1.5 and it doesn't work with me and it shows many lines each line with a thread at the same time below navbar
Reply With Quote
Reply

Thread Tools

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 02:10 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.10413 seconds
  • Memory Usage 2,368KB
  • 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
  • (11)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
  • (3)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