vb.org Archive - Forum Home Enhancements - Latest Threads Ticker [jQUery]

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Home Enhancements - Latest Threads Ticker [jQUery] (https://vborg.vbsupport.ru/showthread.php?t=262910)

Latest Threads Ticker [jQUery]

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

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:

https://vborg.vbsupport.ru/external/2011/08/64.jpg

Great mod! Is it possible to select from witch forums get the last topics?

Installed!

Is it possible to choose how many posts it grabs?

Looks great now just a quick question....Can i leave out the threads from the likes of the admin only section of the forum??

Quote:

Originally Posted by giorgino (Post 2190462)

Great mod! Is it possible to select from witch forums get the last topics?

See post no.2

Quote:

Originally Posted by ozzy47 (Post 2190512)

Installed!

Is it possible to choose how many posts it grabs?

It grab latest 10 threads and I hink it is ok.
Q: what value you wish?

Quote:

Originally Posted by rammieone (Post 2190570)

Looks great now just a quick question....Can i leave out the threads from the likes of the admin only section of the forum??

At mean time I can adjust it to determine which forums to include not to exclude.

Be great if thats enabled mate,Thank you.

I have Arabic Forum, can you help me in the opposite direction from right to left
With many thanks for your nice job.

How come it isn't working for me?
http://screensnapr.com/v/WTfMjR.png

Is it possible to use the blog feed?

Quote:

Originally Posted by m3lek (Post 2190773)

I have Arabic Forum, can you help me in the opposite direction from right to left
With many thanks for your nice job.

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: false,

        feedUrl: '',

        feedType: 'xml',

        displayType: 'reveal',

        htmlFeed: true,

        debugMode: true,

        controls: true,

        titleText: 'المواضيع الأخيرة',    

        direction: 'rtl',    

        pauseOnItems: 3000,

        fadeInSpeed: 600,

        fadeOutSpeed: 300

    };    

})(jQuery);

Quote:

Originally Posted by giorgino (Post 2190795)

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);

Dear stator

Thank you agin for your help , working great now and nice to meet you

Would there be a way to hide this in certain locations like the arcade?

Thank you work perfect!

tagged,this looks sweet

Quote:

Originally Posted by g0dfather1984 (Post 2190924)

Would there be a way to hide this in certain locations like the arcade?

I hope it works for you
https://vborg.vbsupport.ru/showpost....47&postcount=2

Can someone PLEASE answer my question.

thanks for the mod!
I have a doubt, installation txt fields mentioned are different in relation to the topic, can you tell which is correct?
txt say that in five is in additional.css topic and say that navbar is, what it is.
grateful

Quote:

Originally Posted by MatthewA (Post 2190774)

How come it isn't working for me?
http://screensnapr.com/v/WTfMjR.png

I don't know what is going wrong with you

but try to do steps again.

Quote:

Originally Posted by jack150464 (Post 2191161)

you right it was my fault, I've updated it. Thanks for notification.

How do I change Latest Threads to Portuguese and posted by?
grateful

Quote:

Originally Posted by jack150464 (Post 2191195)

How do I change Latest Threads to Portuguese and posted by?
grateful

I've added FAQs, check it

Quote:

Originally Posted by stator (Post 2191133)

I hope it works for you
https://vborg.vbsupport.ru/showpost....47&postcount=2

That works off of forum ids and the arcade itself doesn't work off of an ID. I think that is also to "include" as I want to "exclude", if I am correct.

Quote:

Originally Posted by g0dfather1984 (Post 2191350)

That works off of forum ids and the arcade itself doesn't work off of an ID. I think that is also to "include" as I want to "exclude", if I am correct.

You right, Sorry for being not clear

IDs up there are ids of forum to be shown

Quote:

Originally Posted by stator (Post 2191468)

You right, Sorry for being not clear

IDs up there are ids of forum to be shown

Thank you for your responses. If you can think of a way to do so, it would be greatly appreciated.

Thanks for your time.

@Stator,If i use this &forumids=1,2,3,4,5 will this mod then only show threads from those forums i have numbered and not from any others or would it still pull random latest threads from all forum ids?
thanks

I have a feeling, It isn't working because my Forum has vBSEO, and the links are usually f13/changelog-370/

Etc. Will this code still work or could you adapt it to work?

Quote:

Originally Posted by rammieone (Post 2191565)

Yes, it will show threads only from forums whose ids are: 1,2,3,4,5 only

and for your note: the target forums or sub-forums may have not a new threads so at this case no threads will not shown up.

Quote:

Originally Posted by MatthewA (Post 2191805)

I have a feeling, It isn't working because my Forum has vBSEO, and the links are usually f13/changelog-370/

Etc. Will this code still work or could you adapt it to work?

Type the following URL in your address bar:

http://www.YOURSITE.com/external.php?&type=js

and tell me what you will see.

how do we disable this in arcade, works fine everywhere but there tried a few ideas but nothing working

I see a Blank White Page.

Thanks bro.Mark as installed and nominated.

oops,it look like this mod need 15 minutes to update latest thread.
How to fix this ?

Quote:

Originally Posted by MatthewA (Post 2191856)

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

Quote:

Originally Posted by andretan88888 (Post 2192340)

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

Thanks Perfect Mod

Installed

5 Stars

Nominated

Is there any way I can turn it off and on without having to edit code each time?

thanks.

nice work,,,

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

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01620 seconds Memory Usage 1,869KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (12)bbcode_code_printable (16)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: