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.

Topic Preview Ange's Tutorial Help(?)

View previous topic View next topic Go down

Solved Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Wed Apr 23, 2014 6:37 pm

Hi allbye
i mostlyaddress 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? thanksloul

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by SLGray on Wed Apr 23, 2014 6:41 pm

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 *


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Wed Apr 23, 2014 6:50 pm

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

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by TheShaka on Wed Apr 23, 2014 7:26 pm

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

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Wed Apr 23, 2014 7:28 pm

yeahloul

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by Luffy on Wed Apr 23, 2014 7:30 pm

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.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Wed Apr 23, 2014 7:32 pm

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 Smile

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by Luffy on Wed Apr 23, 2014 7:39 pm

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*/






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Wed Apr 23, 2014 8:55 pm

it works buggy aswell Very Happy


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Wed Apr 23, 2014 8:58 pm

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

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by Luffy on Wed Apr 23, 2014 8:59 pm

Sorry i deleted my post thats why he posted twice in a row! My apologies..

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

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by Pizza Boi on Wed Apr 23, 2014 9:03 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Wed Apr 23, 2014 9:04 pm

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

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by Pizza Boi on Wed Apr 23, 2014 9:12 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by Ange Tuteur on Wed Apr 23, 2014 10:45 pm

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

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Thu Apr 24, 2014 8:29 am

sorry, i won;t do that again, but thanks for ur help the new code worked well.thumright
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 AngeSmile

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by Ange Tuteur on Thu Apr 24, 2014 9:13 am

Add #closeButton to the preview removal at the bottom and you should be good Very 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();
  });
  });
});

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by J0k3R^ on Thu Apr 24, 2014 11:04 am

*Solved*

thanks:rose:

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Topic Preview Ange's Tutorial Help(?)

Post by SLGray on Thu Apr 24, 2014 11:11 am

Topic Solved & Archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.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