Recent Tutorials
Who is online?
In total there are 7 users online :: 2 Registered, 0 Hidden and 5 Guests

djblah, SLGray

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Topic Preview

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 29 Jan 2014, 23:23

* 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. Wink

Many thanks and happy testing. Smile


Last edited by Ange Tuteur on Wed 23 Apr 2014, 16:34; edited 1 time in total
avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1263
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Mon 14 Apr 2014, 23:05

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

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

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;
}
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 17 Apr 2014, 19:59

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();
      });
    });
});
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 23 Apr 2014, 16:37

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.
avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1443
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Sat 26 Apr 2014, 08:39

this is not showing up in my forum which is punbb version
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 27 Apr 2014, 01:55

@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 Smile
avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1443
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Sun 27 Apr 2014, 17:56

http://www.paradiseng.com

My Browser is Chrome
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 28 Apr 2014, 04:27

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

avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1443
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Mon 28 Apr 2014, 16:37

I don't know if there could be any script conflicting it
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 28 Apr 2014, 16:53

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

thanks Smile
avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1443
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Mon 28 Apr 2014, 19:42

I have added it
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 29 Apr 2014, 06:18

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.
avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1443
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Tue 29 Apr 2014, 18:20

Thanks so much for your help. I have done what you have said I should be still nothing is happening.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 30 Apr 2014, 10:08

It should work now if you've sorted that error. Add it to all pages to see if it works.
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1654
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Fri 06 Jun 2014, 04:54

hi there
1st thanks ange for this code works good
test on phpbb2 Smile
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 07 Jun 2014, 08:54

Hi, try adjusting with this :
Code:
#topicPreview-container {
  left:5% !important;
  right:5% !important;
}
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1654
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Sat 07 Jun 2014, 19:32

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 Very Happy
any the line i added did the job
really thanks
cool Script
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 11 Jun 2014, 00:35

You're welcome and thanks. Very Happy
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 09 Jul 2014, 04:34

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

Topic archived

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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