Widget: Active Topics Since Last Visit

This is just a little something I came up with while practicing. At the click of a button this widget will display a list of the active topics since your last visit. You can also toggle its display as well, by clicking the button again to hide the list of topics.


There is a limit to the amount of topics that can be displayed at once, so don't worry. To deal with a large amount of topics a scroll bar will be added after the widget exceeds 120px. If you're interested in this widget, read on to find out how to install it.

To save you time the script, css, and widget are all in one code so you can edit the entire widget in one area.

Please navigate to..
Administration Panel > Modules > Portal & Widgets > Forum widgets management > Create a new widget

Widget name: Topics Since Last Visit
Use a table type: No
Widget Title: Your choice
Widget source:

Code:

<script>
jQuery(document).ready(function(){
jQuery('#newTopics').hide();
if(!document.getElementById('logout')) {
jQuery('#loadNewestBlock').hide();}
jQuery('#showNewest').click(function() {
jQuery('#newTopics').slideToggle();
jQuery('#topicShown').load('/search?search_id=newposts a.topictitle');
 });
});
</script>
<style>
/*Topic Load Button*/
#loadNewestBlock{
text-align:center;
margin:10px;
}
#showNewest{
font-size:10px;
font-weight:bold;
color:#fff;
background-color:#257;
border-radius:5px;
padding:10px;
box-shadow:0px -10px 6px rgba(0,0,0, 0.2) inset, 0px 10px 6px rgba(255,255,255, 0.2) inset;
}
#showNewest:hover{
color:#ff8;
background-color:#368;
cursor:pointer;
}
/*Topic Titles*/
#newTopics a.topictitle{
display:block;
font-weight:normal;
padding-top:3px;
padding-left:3px;
border-bottom:1px solid #ddd;
}
#newTopics a.topictitle:hover{
text-decoration:none !important;
}
#newTopics a.topictitle:before{
content:"•";
}
/*Topic Box*/
#lastVisitTitle{
text-align:center;
font-weight:bold;
font-size:10px;
border-bottom:1px solid #ccc;
background:#257;
color:#fff;
padding:3px;
box-shadow:0px 8px 6px rgba(255,255,255, 0.2) inset;
}
#newTopics{
max-height:120px;
overflow-y:auto;
border-radius:5px;
border:1px solid #DDD;
background-color:#F3F3F3;
box-shadow: 0px 0px 0px 1px #fff inset, 0px 0px 3px 1px rgba(128, 128, 128, 0.2) inset;
}
</style><div id="loadNewestBlock"><span id="showNewest" title="Show/Hide">Load Newest Topics</span></div><div id="newTopics"><div id="lastVisitTitle">Topics Since Last Visit</div><span id="topicShown"></span></div>

When you're done save the widget, drag and drop 'Topics since last visit' onto your forum, and save the structure. When new topics are active on your forum they will be displayed when you click the button. I'll also note this has only been tested on phpbb2 and phpbb3.

If you have any questions or bugs to report please let me know. Enjoy!

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

hi i like to say thanks 1st
2nd
i think im lost here a little
i put that code in widget but looks i miss something here
why ?    its only show me a button and when press show me the line topics since last visit nothing more
 

If there are no topics displayed, then there were no new topics since your last visit. Once you log out, the topics from that session are cleared. I think I should include a message which notifies that.

1st thanks i miss that there was no new topics at that time
worked 100%
i just wonder now about make it right to left not left to right if you dont mind
you know right to left for Arabic forum
thanks again the Script is cool

Try adding this to your CSS :

Code:

#loadNewestBlock { text-align:right; }

Ange Tuteur wrote:Try adding this to your CSS :

Code:

#loadNewestBlock { text-align:right; }

frist sorry for late i was have little proplem with my stomich
any way
after add the CSS
Still left not right  
any more tips ?

In the CSS of the widget is this :

Code:

#loadNewestBlock{
text-align:center;
margin:10px;
}

change it to :

Code:

#loadNewestBlock{
text-align:right;
margin:10px;
}

hi again sorry for late to reply i was all the past with no internet at home
any way the code didnt work
but i like to say i find the way by a luck try
in the par

Code:

    #newTopics a.topictitle{
    display:block;
font-weight:normal;
    padding-top:3px;
    padding-right:3px;

i did just add this

Code:

        text-align:right;

to be like that

Code:


    #newTopics a.topictitle{
    display:block;
        text-align:right;
font-weight:normal;
    padding-top:3px;
    padding-right:3px;

and i solved the problem thanks to your tip telling me the CSS in the widget

I found this great widget only now and it works great! BUT when i click on a new topic it directed me everytime to the first post of a topic...
It is possible that it shows me the newest post of a topic?