Topic Preview

* This topic is for testing, bugs may be present and if found should be reported to THIS topic *

Hello everyone,

Here is an old project I worked on which allows you to preview the first post of a topic. From testing, this works on all versions however, punbb suffers style related issues.

When applied the script adds an icon next to topic titles.


After clicking this icon you will be met with the first message of that topic without having to switch pages.


To test this please do the following :
Administration Panel > Modules > Javascript codes management > Create a new script

Title : Topic preview
Placement :
- In the subforums : if you only want it in the subforums
- In all pages : if you want it for both the subforums and search results
Paste the code below and submit :

Code:

$(function() {

    // The preview image added after a topic title
    $('a.topictitle').after(' <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;" />');
   
    // fallback for punbb to fix design issues
    if ($('.pun').length) var isPunbb = 'class="pun"';
    else var isPunbb = '';
   
    // Once the preview image is clicked
    // we appened the HTML below to the document
    $('img#topicPreview').click(function() {
        $('body').append(
       
            '<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0, 0.5);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:#D1D1D1;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;">'+
                '<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>'
           
        );
       
        // Load the first post of a topic
        $('#topicPreviewing').load($(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
       
        // Remove preview on click of the filter
        $('div#preview-filter').click(function() {
          $('#preview-filter, #topicPreview-container').remove();
      });
    });
});

Once done you should now be able to test the topic preview system. If you have any questions or encounter a bug please remember to leave it here in this topic.

Many thanks and happy testing.

Ange you should add a close button on this tutorial also , just like on the profile popup

Edit: Well since you were afk i took the pleasure of doing it myself , seems to work pretty fine if you ask me

JS

Code:

$(function() {

    // The preview image added after a topic title
    $('a.topictitle').after(' <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;" />');
   
    // Once the preview image is clicked
    // we appened the HTML below to the document
    $('img#topicPreview').click(function() {
        $('body').append(
       
            '<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div>'+
           
            '<div id="topicPreview-container" style="top:20%;left:15%;right:15%;padding:4px;position:fixed;z-index:50;background:#D1D1D1;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;">'+
              '<div class="topicprv_popup_nav">'+
                '<span class="topicprv_tab" id="close_prvpopup" style="float:right;margin-top:-4px;">Close</span></div>'+
                '<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>'
        );
       
        // Load the first post of a topic
        $('#topicPreviewing').load(jQuery(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
       
        // Remove preview on click of the filter
        $('#preview-filter, #close_prvpopup').click(function () {
            $('#preview-filter, #topicPreview-container').remove();
        });
    });
});

CSS

Code:

.topicprv_popup_nav {
    background:rgba(0,0,0,0.1);
    margin:-4px -4px 10px -4px;
    padding:3px;
    padding-top:10px !important;
    height:20px;
    border-bottom:1px solid #AAA;
    -webkit-border-radius:5px 5px 0px 0px;
      -moz-border-radius:5px 5px 0px 0px;
            border-radius:5px 5px 0px 0px;
}
.topicprv_tab {
    cursor:pointer;
    -webkit-border-radius:4px 4px 0px 0px;
      -moz-border-radius:4px 4px 0px 0px;
            border-radius:4px 4px 0px 0px;
    border:1px solid #AAA;
    border-bottom:none;
    -webkit-box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
      -moz-box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
            box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
    background:#BBB;
    margin:0 2px;
    padding:3px;
}
.topicprv_tab:hover {
    position:relative;
    top:1px;
    color:#D41141;
    background-color:#D1D1D1;
}

Sorry, the fan in my laptop died. It works nice, I was actually thinking of an X button or something. Luckily I had the resources from my editor project left over.

Something like this :

Code:

$(function() {

    // The preview image added after a topic title
    $('a.topictitle').after(' <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;" />');
   
    // Once the preview image is clicked
    // we appened the HTML below to the document
    $('img#topicPreview').click(function() {
        $('body').append(
       
            '<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div>'+
           
            '<div id="topicPreview-container" style="top:20%;left:15%;right:15%;padding:4px;position:fixed;z-index:50;background:#D1D1D1;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;">'+
                '<style>'+
                    '#closeButton {color:#fff;font-size:10px;font-weight:bold;background:rgba(0,0,0,0.6);box-shadow:0px 0px 2px rgba(0,0,0,1) inset;text-shadow:0px 0px 1px #000;display:inline-block;border-radius:30px;padding:3px 6px;cursor:pointer;position:absolute;top:-8px;right:-8px;}'+
                    '#closeButton:hover {background:#D56262;}'+
                '</style>'+
                '<div id="closeButton">X</div>'+
                '<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>'
           
        );
       
        // Load the first post of a topic
        $('#topicPreviewing').load(jQuery(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
       
        // Remove preview on click of the filter
        $('div#preview-filter, #closeButton').click(function() {
          $('#preview-filter, #topicPreview-container').remove();
      });
    });
});

Minor update :

► Fixed punbb design issues by adding a class if the current version is punbb

You can find the updated code in the first post.

this is not showing up in my forum which is punbb version

Paradiseng wrote:this is not showing up in my forum which is punbb version

Could you provide the following information for me please ?

► Forum URL
► Browser

Thank you

http://www.paradiseng.com

My Browser is Chrome

Do you have any scripts which conflict with it ? I've done a test from the browser and it inserted the preview button.

I don't know if there could be any script conflicting it

Could you add it to your javascipts so that I may see ? Make sure to only place it in the sub-forums.

thanks

I have added it

I have analyzed your forum again and noticed my console threw an error. I'll list it below for you :

Syntax error : ; missing before statement
This is occurring from a script set in all the pages; more specifically http://www.paradiseng.com/99394.js

When one of these scripts throws an error it stops all other scripts after it from running on the page. I believe you should review your installed JavaScripts and disable them one by one to figure out which is causing the error.

Thanks so much for your help. I have done what you have said I should be still nothing is happening.

It should work now if you've sorted that error. Add it to all pages to see if it works.

hi there
1st thanks ange for this code works good
test on phpbb2
i have only one thing to ask about
is this possible to make the pup up little biger
(change the size as i wish)
thanks again

Hi, try adjusting with this :

Code:

#topicPreview-container {
  left:5% !important;
  right:5% !important;
}

yeah Strike and cool
i just added this
      top:7% !important;
because when i changed the height from 400 to 600 the pup window was out range
any the line i added did the job
really thanks
cool Script

You're welcome and thanks.

This feature is now available on the Support Forum.
http://help.forumotion.com/t134113-add-a-preview-button-for-topics

Topic archived