Preview latest topics

Hello again!

It's been a while. How y'all doing?

Please, be aware the stuff below is copyrighted! Thank you.

We've got 2 scripts running on our website. 1 'Preview topics' script running on the sub-forums:

Code:

$(function(){
      var isPunbb = '';
      if ($('.pun').length) var isPunbb = 'class="pun"';
      $('a.topictitle').after('&nbsp;<img id="topicPreview" src="http://i56.servimg.com/u/f56/18/45/41/65/new_wi10.gif" title="Voorbeeldweergave" alt="Voorbeeldweergave" style="cursor:pointer;"/>');
      $('img#topicPreview').click(function() {
        $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);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:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:460px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:16px;">Momentje. Bezig met laden ...</span></center></div></div>');
        $('#topicPreviewing').load($(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
        $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});
      });
    });

in effect giving us something like this in the subs: http://prntscr.com/a5w4xa , and 1 custom built and copyrighted 'Latest Topics' script (running on all the pages):

Code:

$(function(){
var a ="";
    $('#right').css('display','none');
a = $('#right .module .inner').html();
if(a=== null){ return; };
$('.introduction').after('<div class="forabg"><div class="inner rctopicslist"><span class="corners-top"></span><ul class="topiclist"><li class="header"><dl class="icon"><dd class="rctoptitle"><div class="table-title"><h2>Meest Recente Berichten</h2></div></dd><dd class="rctoptime"><span>Datum \& Tijd</span></dd><dd  class="rctopauthor"><span>Auteur</span></dd></dl></li></ul></div></div>');
a = a.replace(/<a href="\/t(.*)<\/a><br>/g,'<div id="topicc"><span id="rctitle"><a href="\/t$1</a></span>').replace(/<a href="\/u(.*)\/a>/g,'<span id="author"><a href="/u$1/a></span><span id="thedate">').replace(/<br><br>/g,'</span></div>');
$('#right .module .inner').html(a);
$('.module .inner #topicc').each(function(){
var   l = $(this).find('#rctitle').html();
var   m = $(this).find('#author').html();
var   n = $(this).find('#thedate').html();
   $('.rctopicslist').append('<ul class="topiclist rcforums"><li class="rcrow"><dl class="icon"><dd class="rctoptitle"><div class="table-title"><h2>'+l+'</h2></div></dd><dd class="rctoptime"><span>'+n+'</span></dd><dd  class="rctopauthor"><span>'+m+'</span></dd></dl></li></ul>');
});
});

giving us something like this: http://prntscr.com/a5w5bt .

Also, we've got a special 'Block Users from Viewing the topics' JS in place, running on the Index as well as the topics:

Code:

$(function(){
if(_userdata.session_logged_in==0){
if(location.href.match(/\/t\d+-(.*)/)){
alert('Je moet ingelogd zijn om berichten te kunnen bekijken. Registreer je nu op Friendcodes of log in!\n\nYou need to be logged in to be able to watch the topics. Please register with Friendcodes now or log in!');
location.href="/";
    }
$('.topiclist a[href^="/t"]').parent().each(function(){
var atext =   $(this).html();
var atext2 = atext.replace(/(.*)href="(.*)"(.*)<\/a>/,'$1href="/"$3<font color="red"></font></a>');
$(this).html(atext2);
})}
});

Now, in the 'Latest topics' table, we want the same 'Preview Topic' symbol and function like in the first script, combining the two, just behind the topic titles. Could someone please built us a properly functioning script for that?

Thanks in advance.


Forum version: phpBB3
Forum address: http://www.friendcodes.nl

Hey,

I think it may be as simple as changing the first scripts placement to "in all the pages", although this will apply the preview image to all

Code: .topictitle

links. However, if your links are from elsewhere -- a widget for example -- I'd recommend changing this selector in the first script :

Code: a.topictitle

to this :

Code: a.topictitle, .module a[href^="/t"]

If that doesn't work let me know.

Alright, thnx man. But neither of them worked, unfortunately.

I tried:

1. Setting the original script to 'All the Pages' -> no change
2. Altered the script to this:

Code:

$(function(){
      var isPunbb = '';
      if ($('.pun').length) var isPunbb = 'class="pun"';
      $('a.topictitle, .module a[href^="/t"]').after('&nbsp;<img id="topicPreview" src="http://i56.servimg.com/u/f56/18/45/41/65/new_wi10.gif" title="Voorbeeldweergave" alt="Voorbeeldweergave" style="cursor:pointer;"/>');
      $('img#topicPreview').click(function() {
        $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);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:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:470px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:16px;">Momentje. Bezig met laden ...</span></center></div></div>');
        $('#topicPreviewing').load($(this).siblings('a.topictitle, .module a[href^="/t"]').attr('href')+' .post:eq(0)');
        $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});
      });
    });

and tried with both 'All the Pages' as well as 'Subs' only. Nothing worked.

Try replacing the script with this :

Code:

$(function(){$(function(){
      var isPunbb = '';
      if ($('.pun').length) var isPunbb = 'class="pun"';
      $('a.topictitle, .table-title a').after('&nbsp;<img id="topicPreview" src="http://i56.servimg.com/u/f56/18/45/41/65/new_wi10.gif" title="Voorbeeldweergave" alt="Voorbeeldweergave" style="cursor:pointer;"/>');
      $('img#topicPreview').click(function() {
        $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);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:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:470px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:16px;">Momentje. Bezig met laden ...</span></center></div></div>');
        $('#topicPreviewing').load($(this).siblings('a.topictitle, .module a[href^="/t"]').attr('href')+' .post:eq(0)');
        $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});
      });
})});

Make sure the placement is :
- In the sub-forums
- In the homepage

or : All pages

OK, the symbol is visible now on the latest topics, however it's stuck in 'Loading' mode http://prntscr.com/a6k86t ... , no matter what placement I choose.

My bad I forgot to change one of the selector sets. Try now :

Code:

$(function(){$(function(){
      var isPunbb = '';
      if ($('.pun').length) var isPunbb = 'class="pun"';
      $('a.topictitle, .table-title a').after('&nbsp;<img id="topicPreview" src="http://i56.servimg.com/u/f56/18/45/41/65/new_wi10.gif" title="Voorbeeldweergave" alt="Voorbeeldweergave" style="cursor:pointer;"/>');
      $('img#topicPreview').click(function() {
        $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);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:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:470px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:16px;">Momentje. Bezig met laden ...</span></center></div></div>');
        $('#topicPreviewing').load($(this).siblings('a.topictitle, .table-title a').attr('href')+' .post:eq(0)');
        $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});
      });
})});

Cool. I like it. It's differnt then the other previews found on the forums Well, it does what it says... it previews the latest topic and not the whole bunch of posts in a topic. It doesn't seem to be working as a guest tho.... Guests should be able to use the preview mode.

Perhaps, this script is blocking it?

Code:

var CopyrightNotice='Samantha Melissa S. Block Users from Viewing the Forum. Copyright 2014-2016 by Samantha Melissa S. at Friendcodes.nl . All Rights Reserved. Use, modification, and/or distribution of this script is NOT allowed without direct permission from Samantha . This entire copyright notice MUST remain in the original, copied, or modified script';
$(function(){
if(_userdata.session_logged_in==0){
if(location.href.match(/\/t\d+-(.*)/)){
alert('Je moet ingelogd zijn om berichten te kunnen bekijken. Registreer je nu op Friendcodes of log in!\n\nYou need to be logged in to be able to watch the topics. Please register with Friendcodes now or log in!');
location.href="/";
    }
$('.topiclist a[href^="/t"]').parent().each(function(){
var atext =   $(this).html();
var atext2 = atext.replace(/(.*)href="(.*)"(.*)<\/a>/,'$1href="/"$3<font color="red"></font></a>');
$(this).html(atext2);
})}
});

Thanks Ange!

Grtz.

Samantha & Roxanne.

I think it's not working for guests because the base URL it's loading is your index page, and the script is attempting to load that page and find

Code: .post:eq(0)

which is null. If you want, you can return an error by replacing this :

Code:

$('#topicPreviewing').load($(this).siblings('a.topictitle, .table-title a').attr('href')+' .post:eq(0)');

by :

Code:

$('#topicPreviewing').load($(this).siblings('a.topictitle, .table-title a').attr('href')+' .post:eq(0)', function() {
  if (!$('#topicPreviewing .post').length) {
    $('#topicPreviewing').html('MESSAGE ERROR');
  }
});

That should display a message if the post cannot be retrieved.

What I meant is that the preview @ 'Latest Topics' should be loading, but not the topic itself in Guest View when people click on them. That view should remain blocked. I want guests to be shown just the latest post in preview mode. And preview mode isn't loading very well at the moment as a guest (it does when logged in), eventhough the posts do exist. In other words: things work fine, except as a guest because the preview doen't load very well (post is not being displayed).

EDIT: And it just seems to pick a random post from the topic now I just noticed It's not even the latest in some cases. That's new...

Hmm.. before I can figure out the later, try disabling the prior script you mentioned.

OK, did that. Took 'SECURITY: Samantha Melissa S. - Block Users from Viewing the Forum (Index/Topics)' offline. But that script served a purpose on the forum, please keep in mind.

Well that seems to be the cause. Try replacing this script with :

Code:

var CopyrightNotice='Samantha Melissa S. Block Users from Viewing the Forum. Copyright © 2014-2016 by Samantha Melissa S. at Friendcodes.nl . All Rights Reserved. Use, modification, and/or distribution of this script is NOT allowed without direct permission from Samantha . This entire copyright notice MUST remain in the original, copied, or modified script';
$(function(){
if(_userdata.session_logged_in==0){
if(location.href.match(/\/t\d+-(.*)/)){
alert('Je moet ingelogd zijn om berichten te kunnen bekijken. Registreer je nu op Friendcodes of log in!\n\nYou need to be logged in to be able to watch the topics. Please register with Friendcodes now or log in!');
location.href="/";
    }
}
});

and re-enable it of course.

Now for the topics in the list on the homepage. Do you want it to show the first post or the latest post ?

I replaced the script, but as a guest, we can just enter the topic from the 'Latest Topics' again... That's not right. Just the Preview should be opening the latest post, the entire topic shouldn't be made public.

I haven't figured out which one is best yet, first or latest. I feel like it should be the first post, like found on the rest of the forum, just to keep people curious and have them keep coming back to register or log in. The preview mode should serve as an example mode only. On the other hand, in 'latest topics' view, showing the latest in preview mode would be more intelligent. Please feel free to show me the different scripts.

Edit: In the 'Latest Topics' pane I just tried clicking different topic links. Some of them show the message alright, like the 'Mirror's Edge' topic: http://prntscr.com/a6lo0b <-- the way it should be, where others don't ... Odd. I guess it just works for topics, not posts atm.

Well for the first post only you'll have to change the latest topics script into this :

Code:

$(function(){
var a ="";
    $('#right').css('display','none');
a = $('#right .module .inner').html();
if(a=== null){ return; };
$('.introduction').after('<div class="forabg"><div class="inner rctopicslist"><span class="corners-top"></span><ul class="topiclist"><li class="header"><dl class="icon"><dd class="rctoptitle"><div class="table-title"><h2>Meest Recente Berichten</h2></div></dd><dd class="rctoptime"><span>Datum \& Tijd</span></dd><dd  class="rctopauthor"><span>Auteur</span></dd></dl></li></ul></div></div>');
a = a.replace(/<a href="\/t(\d+).*?>(.*?)<\/a><br>/g,'<div id="topicc"><span id="rctitle"><a href="\/t$1-">$2</a></span>').replace(/<a href="\/u(.*)\/a>/g,'<span id="author"><a href="/u$1/a></span><span id="thedate">').replace(/<br><br>/g,'</span></div>');
$('#right .module .inner').html(a);
$('.module .inner #topicc').each(function(){
var  l = $(this).find('#rctitle').html();
var  m = $(this).find('#author').html();
var  n = $(this).find('#thedate').html();
  $('.rctopicslist').append('<ul class="topiclist rcforums"><li class="rcrow"><dl class="icon"><dd class="rctoptitle"><div class="table-title"><h2>'+l+'</h2></div></dd><dd class="rctoptime"><span>'+n+'</span></dd><dd  class="rctopauthor"><span>'+m+'</span></dd></dl></li></ul>');
});
});

and as for the topic links your other script should prevent viewing of them. Although I noticed some inconsistencies, so try replacing that script with this :

Code:

$(function(){
  var CopyrightNotice='Samantha Melissa S. Block Users from Viewing the Forum. Copyright © 2014-2016 by Samantha Melissa S. at Friendcodes.nl . All Rights Reserved. Use, modification, and/or distribution of this script is NOT allowed without direct permission from Samantha . This entire copyright notice MUST remain in the original, copied, or modified script';
  if(!_userdata.session_logged_in && /\/t\d+/.test(window.location.href)){
    alert('Je moet ingelogd zijn om berichten te kunnen bekijken. Registreer je nu op Friendcodes of log in!\n\nYou need to be logged in to be able to watch the topics. Please register with Friendcodes now or log in!');
    window.location.href = '/';
  }
});

ALRIGHT! Way better now. It'll block them posts as well now, not just the topics Nearly there now.

What script should be used to show the last post (and not some random pick) in Preview Mode @ 'Latest Topics', Ange?

For that you'll need to edit the preview script to this :

Code:

$(function(){$(function(){
      var isPunbb = '';
      if ($('.pun').length) var isPunbb = 'class="pun"';
      $('a.topictitle, .table-title a').after('&nbsp;<img id="topicPreview" src="http://i56.servimg.com/u/f56/18/45/41/65/new_wi10.gif" title="Voorbeeldweergave" alt="Voorbeeldweergave" style="cursor:pointer;"/>');
      $('img#topicPreview').click(function() {
        $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);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:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:470px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:16px;">Momentje. Bezig met laden ...</span></center></div></div>');
        $('#topicPreviewing').load($(this).siblings('a.topictitle, .table-title a').attr('href') + ($(this).siblings('a.topictitle')[0] ? ' .post:eq(0)' : ' .post:last'));
        $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});
      });
})});

It should get the last post, or

Code: .post:last

which is being used.

YAY! WOOHOO!!! You're a sweetheart Ange And now, finally, for some dinner

Grtz.

Sam & Rox

PS: Alright, fair enough. I'm gonna use 'the latest' for a while. Thanks for both dude, I bookmarked this ticket so I can fall back to it lateron if needed. You can scrap and dump this ticket on the pile.