Topic Preview Ange's Tutorial Help(?)

Hi all  
i mostly address to Ange Tuteur because it was he tutorial.
well, i followed his tutorial for topic preview in sub-forums but it worked really buggy for my forum, punbb btw.
the tutorial is here: http://fmdesign.forumotion.com/t186-topic-preview

that was supposed to be looking like 



but its very buggy and ugly at my forum.



how can be fixed this? thanks  

Did you read the first sentence of the tutorial:

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

sorry i didnt notice this and im not a member of this site neither

Why you not ask in her forum? Lazy for register?

yeah  

There are other preview topic tutorials. I personally am using an other one that i like! If you want i can give you the codes.

Marios94 wrote:There are other preview topic tutorials. I personally am using an other one that i like! If you want i can give you the codes.

sure, why not

Looks like this:


The codes:

Javascript:

Code:

/*Topic Preview Forumotion Add On
 *Created by Rideem3 of forum.malware-site.www
 *Use of this script is prohibited without this full copyright in place
 */
if (/\/?f\d+.*/.test(window.location.pathname)) {
    $(function () {
        $('a.topictitle').after('<a href="#" style="margin-left: 5px;" class="preview_topic"><img src="***IMAGE LINK***" title="***HOVER TEXT***" /></a>');
        $('.preview_topic').click(function () {
            var url = this.previousSibling.href;
            $('body').prepend('<div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;" class="modal" id="document_modal"></div>');
            $('.pun').prepend('<div id="topic_popup" class="popupWrapper" style="z-index: 10001;"></div>');
            $('#topic_popup').load(url + ' .post:first', function () {
                $('#document_modal').click(function () {
                    $('#document_modal, #topic_popup').remove();
                });
            });
            return false;
        });
    });
}

CSS:

Code:

/*Begin Preview Code*/
.popupWrapper {
    background-color: rgba(70, 70, 70, 0.6);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);
    left:250px;
    margin-top: 3;
    max-height: 400px;
    max-width: 900px;
    overflow: auto;
    padding: 4px;
    position: fixed !important;
    top: 100px;
}
/*End Preview Code*/

it works buggy aswell  

no, by the time i "installed" to my forum its looking like that :S

My friend it seems that the javascript does not work properly. I don't know why.

Hi

Try disabling your Javascripts one by one again and see if anything's causing this (I would recommend trying Marios's code for this one instead of the one in Ange's tut)

Regards,
Pizza Boi

my last pic is the topic preview with Mario's code

Hi

Well, I'll look into it (Seriously gotta reduce my look into it list...); however, I suggest waiting for Ange to provide an answer since he/she is the one who made the code.

Regards,
Pizza Boi

Hello,

If you have read the post :

@Ange Tuteur wrote: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.

This is because its parent is not present and so the selectors that style it wont work. I have applied a fallback for punbb which you can find by the link below.

http://fmdesign.forumotion.com/t186-#983

I'd appreciate if in the future you have any questions for the codes that are undergoing testing, that you post them directly in that topic so I can come back to them. I do not want to search through different forums and topics to find out what a issue was with a code so I can fix it. If it is directly in its testing topic I can get to it quickly. Plus it's better to report these things to the developer since they know the way around their code the best.

sorry, i won;t do that again, but thanks for ur help the new code worked well.   
just something last: i have put the new class for punbb + the close button X settings (plus css) to one js, all working perfect but when i press to close preview it doesnt

the codes:

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;">'+
                '<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($(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();
      });
    });
});

is it something wrong or i forgot something? 
thank u Ange  

Add #closeButton to the preview removal at the bottom and you should be good

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;">'+
                '<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($(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
      
       // Remove preview on click of the filter
        $('#preview-filter, #closeButton').click(function() {
          $('#preview-filter, #topicPreview-container').remove();
      });
    });
});

*Solved*

thanks