Welcome Guest [Log In] [Register]
Support Staff Recommendation
All communities remaining on zIFBoards/InvisionFree should check their conversion opt-in selection in their Admin CP (menu item Tapatalk Conversion)
(Read More)
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Recent Updates Remade
Topic Started: Jun 20 2013, 11:54 AM (16,979 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code Name: Recent Updates Remade

What the code does: Preview

Xero originally created this code and it can be found here. The reason I remade it is because three of the tabs on his code are broken due to AJAX being restricted on those pages, ?force_ads isn't used, and the code performs 7 AJAX requests on every page load. This code performs no AJAX requests on page load and only performs the AJAX request when the tab is clicked. The AJAX clicks are only activated once so users won't keep jumping back and fourth through tabs for repetitious AJAX requests, after the data was successfully grabbed it's a simple show and hide process.

The Online Users tab is a new feature that wasn't introduced in Xero's code.

How to use the code: Install as instructed, no editing is required.

Put this below the code if you want to hide the Recent Updates table from guests:
Code:
 
<script type="text/javascript">
//<![CDATA[
if ($.zb.logged_in === false) {
$('#recent_updates').hide();
}
//]]>
</script>
How to install the code:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p479384/Recent_Updates.js"></script>
Offline Profile Quote Post Goto Top
 
klownz
Member Avatar
Member
[ *  * ]
Holy crap you really don't mess around lol!

So for me I only have to add this one: <script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p479384/Recent_Updates.js"></script>

OR do I still need the other codes installed that I got from the other thread you was helping me in?

And seriously thank you for fixing this up, I think it will really help my forum.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Only install the code found in this topic.
Offline Profile Quote Post Goto Top
 
klownz
Member Avatar
Member
[ *  * ]
Cheers boss, you are a legend!!!!
Ok I hate to badger you but two things on it seem different to the other one "board feed" takes a while to load up... that's no problem though, I just wanted to give you feedback.
The main thing that seems different is when you flick through pages the box is blank and we have to click on things to see them.... on that other code & forum I saw, "board feed" was default and as a guest I could see it straight away (first feature I noticed actually) ... The feature is brilliant but I really wanted guests to not have to click on anything I want the "board feed" to be what they see before they realize they even have the other options to click on.

If its not possible to make it instantly visible can you tell me how to change the txt options to click on so they are red... by forum is dark themed so red will stand out and guests should spot they have to click a bit easier. :up: :up: :up: :up: :up:

Edited by klownz, Jun 20 2013, 01:11 PM.
Offline Profile Quote Post Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
What is this code actually ment to do? I thought it would be like the latest post's show up there but I have made some posts since adding it and this is what I see

Posted Image

Also anyway I can move it to the bottom of the board?


This is what I put below the board
Code:
 
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p479384/Recent_Updates.js"></script>
<script type="text/javascript">
//<![CDATA[
if ($.zb.logged_in === false) {
$('#recent_updates').hide();
}
//]]>
</script>


EDIT: Now I feel dumb didnt realize you had to flick through the tabs lol

So now only thing is can this be moved to the bottom of the board?
Edited by welshtony, Jun 20 2013, 06:07 PM.
Offline Profile Quote Post Goto Top
 
JohnSlider
Member
[ *  * ]
Does clicking 'reload' do anything? I would think it would refresh the box, but it doesn't seem to. Also, would it be to much of a pain to make the original size of the box much shorter so that it only displays "Please Select an Option" and then expands larger to show the data in the tabs?
Also, this is badass.
Edited by JohnSlider, Jun 20 2013, 07:31 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
klownz: I wanted to limit the AJAX as much as possible and having the Board Feed display by default would use AJAX on every page regardless of clicking somewhere.

You can style the default message with CSS:
Code:
 
#message {
color: red;
}
welshtony: Add this below the code to move it to the bottom:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('#recent_updates').appendTo('#main');
//]]>
</script>
JohnSlider: The Reload link reloads the entire page.

Put this below the code to alter the height:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('#message').css('line-height', '50px').parent('#recent_content').css('height', '50px');

$('th.cu').click(function () {
$('#recent_content').css('height', '150px');
});
//]]>
</script>
Offline Profile Quote Post Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
Worked great :)

Thanks mate
Offline Profile Quote Post Goto Top
 
JohnSlider
Member
[ *  * ]
Cory, what do you think about an option where the first tab is this section:

Posted Image

And have it replace the board statistics box?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You mean, have that display instead of the default message?
Offline Profile Quote Post Goto Top
 
JohnSlider
Member
[ *  * ]
Yeah
Offline Profile Quote Post Goto Top
 
Azuvala
Member Avatar
Member
[ * ]
Is there any possibility of replacing one of the tabs with a different page/other information?

I really like the code I have on my board for Online Users, since it also shows the ones who have been on in the last 24 Hours. It's a little redundant for me to have that tab also. Is there any chance I could replace it to show the blogroll instead?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
JohnSlider: Do you have any codes that currently run AJAX on every page? That's what making a default update appear would require. It doesn't really matter to me all that much, but it's always something to consider.

Azuvala: Sure, just use this instead:
Code:
 
<script type="text/javascript">
// By Cory

//<![CDATA[
$('#main').prepend('<table id="recent_updates"><thead><tr><th colspan="5" class="l">Recent Updates - <em id="reload" class="cu">Reload</em></th><tr></thead><tbody><tr><th id="feed" class="c cu">Board Feed</th><th id="status" class="c cu">Status Updates</th><th id="recent" class="c cu">Active Topics</th><th id="replies" class="c cu">Replies to Your Topics</th><th id="blog-tab" class="c cu">Blogroll</th></tr><tr><td colspan="5" style="padding: 1px"><div id="recent_content" style="overflow: auto; height: 150px"><div id="message" class="c" style="font-style: italic; line-height: 150px">Please select an option</div></div></td></tr></tbody></table>');

$('em.cu, th.cu').css('cursor', 'pointer');

$('th.cu').css('width', '20%').click(function () {
$('th.cu').css('font-weight', '400');
$(this).css('font-weight', '700');
});

$('#feed').one('click', function () {
$.get(main_url + 'stats/feed/?force_ads', function (data) {
var html = $('#board_feed', data).html();
$('#recent_content').append('<table id="feed-table" class="topic">' + html + '</table>');
});
});

$('#status').one('click', function () {
$.get(main_url + 'stats/status_updates/?force_ads', function (data) {
var html = $('#status_updates', data).html();
$('#recent_content').append('<table id="status-table" class="topic">' + html + '</table>');
});
});

$('#recent').one('click', function () {
$.get(main_url + 'search/?c=5&force_ads', function (data) {
var html = $('#search_results_topics + table.forums', data).html();
$('#recent_content').append('<table id="recent-table" class="forums">' + html + '</table>');
});
});

$('#replies').one('click', function () {
$.get(main_url + 'search/?c=6&force_ads', function (data) {
var html = $('#search_results_topics + table.forums', data).html();
$('#recent_content').append('<table id="replies-table" class="posts">' + html + '</table>');
});
});

$('#blog-tab').one('click', function () {
$.get(main_url + 'stats/blogroll/?force_ads', function (data) {
var html = $('#blogroll tbody', data).html();
$('#recent_content').append('<table id="blog-table"><tbody>' + html + '</tbody></table>');
});
});

$('th.cu').click(function () {
$('#recent_content table, #message').hide();
});

$('#feed').click(function () {
$('#feed-table').show();
});

$('#status').click(function () {
$('#status-table').show();
});

$('#recent').click(function () {
$('#recent-table').show();
});

$('#replies').click(function () {
$('#replies-table').show();
});

$('#blog-tab').click(function () {
$('#blog-table').show();
});

$('#reload').click(function () {
location.reload();
});

if ($.zb.logged_in === false) {
$('#replies').hide();
$('th.cu').css('width', '25%');
}
//]]>
</script>
Offline Profile Quote Post Goto Top
 
JohnSlider
Member
[ *  * ]
I don't believe I do.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this:
Code:
 
<script type="text/javascript">
// By Cory

$('#main').prepend('<table id="recent_updates" style="margin: 10px 0"><thead><tr><th colspan="5" class="l">Recent Updates - <em id="reload" class="cu">Reload</em></th><tr></thead><tbody><tr><th id="feed" class="c cu">Board Feed</th><th id="status" class="c cu">Status Updates</th><th id="recent" class="c cu">Active Topics</th><th id="replies" class="c cu">Replies to Your Topics</th><th id="online" class="c cu">Online Users</th></tr><tr><td colspan="5" style="padding: 1px"><div id="recent_content" style="overflow: auto; height: 150px"></div></td></tr></tbody></table>');

$('em.cu, th.cu').css('cursor', 'pointer');

$('th.cu').css('width', '20%').click(function () {
$('th.cu').css('font-weight', '400');
$(this).css('font-weight', '700');
});

$.get(main_url + 'index/?force_ads', function (data) {
var html = $('#stats_members', data).html();
var htmlPrev = $('#stats_members', data).prev('td.c_mark').html();
var htmlNext = $('#stats_members', data).parent('tr').next('tr').html();
$('#recent_content').append('<table><tr><td class="c_mark" rowspan="2">' + htmlPrev + '</td><td>' + html + '</td></tr><tr>' + htmlNext + '</tr></table>');
});
$.get(location.href);

$('#feed').one('click', function () {
$.get(main_url + 'stats/feed/?force_ads', function (data) {
var html = $('#board_feed', data).html();
$('#recent_content').append('<table id="feed-table" class="topic">' + html + '</table>');
});
});

$('#status').one('click', function () {
$.get(main_url + 'stats/status_updates/?force_ads', function (data) {
var html = $('#status_updates', data).html();
$('#recent_content').append('<table id="status-table" class="topic">' + html + '</table>');
});
});

$('#recent').one('click', function () {
$.get(main_url + 'search/?c=5&force_ads', function (data) {
var html = $('#search_results_topics + table.forums', data).html();
$('#recent_content').append('<table id="recent-table" class="forums">' + html + '</table>');
});
});

$('#replies').one('click', function () {
$.get(main_url + 'search/?c=6&force_ads', function (data) {
var html = $('#search_results_topics + table.forums', data).html();
$('#recent_content').append('<table id="replies-table" class="posts">' + html + '</table>');
});
});

$('#online').one('click', function () {
$.get(main_url + 'online/?force_ads', function (data) {
var html = $('#active_list tbody', data).html();
$('#recent_content').append('<table id="online-table"><tbody>' + html + '</tbody></table>');
$('#online-table td.c_foot').hide();
});
});

$('th.cu').click(function () {
$('#recent_content table, #message').hide();
});

$('#feed').click(function () {
$('#feed-table').show();
});

$('#status').click(function () {
$('#status-table').show();
});

$('#recent').click(function () {
$('#recent-table').show();
});

$('#replies').click(function () {
$('#replies-table').show();
});

$('#online').click(function () {
$('#online-table').show();
});

$('#reload').click(function () {
location.reload();
});

if ($.zb.logged_in === false) {
$('#replies').hide();
$('th.cu').css('width', '25%');
}
</script>
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply