The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Add a preview button for topics

View previous topic View next topic Go down

Add a preview button for topics

Post by Ange Tuteur on July 7th 2014, 7:10 am

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.


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="http://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 }



Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum