The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Latest Threads Ticker [jQUery] Details »» | |||||||||||||||||||||||||||
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 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> 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; } 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>' + ' ' + '<span style="color: red;">Posted By:</span>'+ ' ' + threads[i]['poster'] + '</a>' + '</li>'); } //--> </script> </ul> </div> <!--ticker--> 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); 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); 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>' + ' ' + '<span style="color: red;">Posted By:</span>'+ ' ' + threads[i]['poster'] + '</a>' + '</li>'); } //--> </script> </ul> </div> <!--ticker--> 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>' + ' ' + '<span style="color: red;">Posted By:</span>'+ ' ' + threads[i]['poster'] + '</a>' + '</li>'); } //--> </script> </ul> </div> <!--ticker--> 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
Show Your Support
|
11 благодарности(ей) от: | ||
abouobaide, abyanhost, BlueCheri, Bubble #5, doctorsexy, Donavaz, Manoel J?nior, Mazinger, RichieBoy67, sodasusu, Toorak Times |
Comments |
#182
|
||||
|
||||
how can show Latest Threads on my forum home? work fine on every sub forum, but not on my main page
https://www.worldgamez.net/forum.php |
#183
|
|||
|
|||
Kind of works in 4.2.1.
Can't get the images to show up. Verified the image path is OK. I counted 4 places in additional CSS where there is a path to images. Does anyone know of any other references to the images Didn't see any in the js script, but this should be a simple thing to fix |
#184
|
||||
|
||||
If i want to use it like an info ticker, where an admin/mod can make a post (in private) but is seen by public, & it goes to ticker, how do you delete the current info? (if i don't want 10 latest posts)
Can you just edit the thread or delete that thread, & make a new post in the specified section.? Does that make sense.? lol *Added* I've done step 1-7, but nothing happened.? Do i need to edit js in order to work or just to adjust different settings, forums, etc. I uploaded the folder to forum root (as well as images folder even though there is no instruction to. lol) But i see nothing on any page.? I'm using 4.2.0 PL4 |
#185
|
|||
|
|||
thank you very much
|
#186
|
||||
|
||||
Not working for me on 4.2.
|
#187
|
|||
|
|||
not working 4.2.0
|
#188
|
||||
|
||||
Working VB 4.2.2
|
#189
|
|||
|
|||
Not Working VB 4.2.2
|
#190
|
|||
|
|||
Works just fine on 4.2.2
|
#191
|
||||
|
||||
Here's a fix for those running anything new than 1.9 jquery.
The ticker script is pretty old so you need to include Jquery migrate: http://blog.jquery.com/2013/05/08/jq...-2-1-released/ And then grab the latest ticker script from the demo site. |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|