Current date/time is March 28th 2024, 7:06 pm

Search found 1 match for preview-filter

Add a preview button for topics

Add a preview button for topics


With this tutorial you will be able to add a preview button to the titles of your topics for your Forumotion forum, as in the example below.

Topics tagged under preview-filter on The forum of the forums Captur41

Exclamation Attention : This will work for all forum versions, so long as you haven't made any heavy modifications to the template topics_list_box !


Adding the JavaScript

Go to Administration Panel > Modules > JavaScript codes management and create a new JavaScript.

Title: Topic Preview
Placement: In the sub-forums
Paste the following code and submit.
Code:
$(function(){
  var isPunbb = '';
  if ($('.pun').length) var isPunbb = 'class="pun"';
  $('a.topictitle').after('&nbsp;<img id="topicPreview" src="https://i56.servimg.com/u/f56/18/45/41/65/new_wi10.gif" title="Preview topic" alt="Preview" style="cursor:pointer;"/>');
  $('img#topicPreview').click(function() {
    $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);cursor:pointer;z-index:10;"></div><div id="topicPreview-container" '+isPunbb+' style="width:auto;top:20%;left:15%;right:15%;padding:4px;position:fixed;z-index:50;background:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:400px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:18px;">Loading...</span></center></div></div>');
    $('#topicPreviewing').load($(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
    $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});
  });
});


When finished, save the script and you should now be able to preview topics on your forum. thumright

Modification of the style

#topicPreview is the button which triggers the popup, you can give this a background, border..

#preview-filter is the overlay which displays when you click the button. The overlay is a small transparent image.

#topicPreview-container is the container which holds the loaded content. This is the ID which gives the popup its gray background. The default background-color can be overridden by using !important.
Code:
#topicPreview-container { background:#F00 !important; }


.topicPreview-loading can be used to style the loading texts i.e. give it a different color, font..
Code:
.topicPreview-loading { font-family:papyrus, sans-serif }




by Ange Tuteur
on July 7th 2014, 7:10 am
 
Search in: Tips & Tricks
Topic: Add a preview button for topics
Replies: 1
Views: 10263

Back to top

Jump to: