I have a widget that I usually use to load topics from specific forums. I just rewrote it a little bit from the original purpose of what I used it for. I use a bit of AJAX and some localStorage, so I don't constantly send a request on page change.
Add this to a widget :
- Code:
[panda=html]<div id="loadedTopics-a" class="topicBox">
<noscript>Unable to get topics, please enabled JavaScript to use this widget.</noscript>
</div><a href="#" class="refresh">Refresh</a>
<script type="text/javascript">//<![CDATA[
(function() {
var forum_id = 101,
recent_count = 6,
title_length = 30,
cache_time = 29*60*1000,
storage = window.localStorage,
block = document.getElementById('loadedTopics-a');
if (storage['topics'+forum_id] && storage['topicsExp'+forum_id] > +new Date - cache_time) block.innerHTML = storage['topics'+forum_id];
else loadTopics();
block.nextSibling.onclick = function() {
for (var i=0,a=block.childNodes; i<a.length; i++) a[i].innerHTML = 'loading...';
loadTopics();
return false;
};
function loadTopics() {
jQuery(block).load('/f'+forum_id+'- .forumbg:not(.forumbg.announcement) a.topictitle:lt('+recent_count+')',function() {
for (var i=0,a=block.childNodes; i<a.length; i++) if (a[i].innerHTML.length > title_length) a[i].innerHTML = a[i].innerHTML.slice(0,title_length).trim() + '...';
if (storage) storage['topics'+forum_id] = block.innerHTML, storage['topicsExp'+forum_id] = +new Date;
});
};
})();
//]]></script>
There's a few things you can use to customize the results of the widget.
forum_id : the id of the forum you want to load
recent_count : the amount of topics you want to display
title_length : the max amount of characters you want in the topic title
cache_time : the amount of time the topics are cached. mm*ss*ms
You can use the refresh button to forcefully refresh the widget, basically update the localStorage for the widget. If you make any changes, just click refresh so they take effect on your end.
Then add some CSS for the topic title style :
- Code:
[panda=css].topicBox a.topictitle {
color:#666;
background:#EEE;
border:1px solid #CCC;
border-radius:3px;
display:block;
margin:2px 0;
padding:3px;
}
That's mostly the method I use, but if there's better way, feel free. I'm not the best
Ohh if you want to change who sees it, just edit the widget permissions by clicking the following bouton.