FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 12 users online :: 0 Registered, 0 Hidden and 12 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Topic Preview

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Topic Preview Captu103

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

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
lightningterror
lightningterror
Member
Gender : Unspecified
Posts : 20
Points : 3673
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postlightningterror 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;
}
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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();
      });
    });
});
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Paradiseng
Paradiseng

Gender : Male
Posts : 98
Points : 3843
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.nigerianpalace.com

PostParadiseng Sat 26 Apr 2014, 08:39

this is not showing up in my forum which is punbb version
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Paradiseng
Paradiseng

Gender : Male
Posts : 98
Points : 3843
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.nigerianpalace.com

PostParadiseng Sun 27 Apr 2014, 17:56

http://www.paradiseng.com

My Browser is Chrome
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.

Topic Preview Captu153
Paradiseng
Paradiseng

Gender : Male
Posts : 98
Points : 3843
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.nigerianpalace.com

PostParadiseng Mon 28 Apr 2014, 16:37

I don't know if there could be any script conflicting it
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Paradiseng
Paradiseng

Gender : Male
Posts : 98
Points : 3843
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.nigerianpalace.com

PostParadiseng Mon 28 Apr 2014, 19:42

I have added it
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Paradiseng
Paradiseng

Gender : Male
Posts : 98
Points : 3843
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.nigerianpalace.com

PostParadiseng 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Michael_vx
Michael_vx

Gender : Male
Age : 32
Posts : 302
Points : 4066
Reputation : 76
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sat 07 Jun 2014, 08:54

Hi, try adjusting with this :
Code:
#topicPreview-container {
  left:5% !important;
  right:5% !important;
}
Michael_vx
Michael_vx

Gender : Male
Age : 32
Posts : 302
Points : 4066
Reputation : 76
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Wed 11 Jun 2014, 00:35

You're welcome and thanks. Very Happy
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Sponsored content

PostSponsored content

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