Topic Preview Ange's Tutorial Help(?)
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
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

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

Re: Topic Preview Ange's Tutorial Help(?)
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 *

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

Re: Topic Preview Ange's Tutorial Help(?)
sorry i didnt notice this and im not a member of this site neither 

Re: Topic Preview Ange's Tutorial Help(?)
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.


|
Re: Topic Preview Ange's Tutorial Help(?)
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

Re: Topic Preview Ange's Tutorial Help(?)
Looks like this:

The codes:

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


|
Re: Topic Preview Ange's Tutorial Help(?)
no, by the time i "installed" to my forum its looking like that :S
Re: Topic Preview Ange's Tutorial Help(?)
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.
Re: Topic Preview Ange's Tutorial Help(?)
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

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
Re: Topic Preview Ange's Tutorial Help(?)
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

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
Re: Topic Preview Ange's Tutorial Help(?)
Hello,
If you have read the post :
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.
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.

Re: Topic Preview Ange's Tutorial Help(?)
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
is it something wrong or i forgot something?
thank u Ange

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

Re: Topic Preview Ange's Tutorial Help(?)
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();
});
});
});
Re: Topic Preview Ange's Tutorial Help(?)
Topic Solved & Archived

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum