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
Active Topics in Sidebar
Topic Started: Mar 29 2012, 10:14 AM (20,034 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code Name: Active Topics in Sidebar

What the code does: Preview

How to use the code: Install as instructed. The only thing you need to edit is the amount variable, which can be a range from 1 to 20, 1 being one latest post will display, 20 being twenty latest posts will display.

How to install the code:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Javascripts
Code:
 
<style type="text/css">
div.margin {
margin-left: 220px !important;
}
</style>
Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
(function($) {
var amount = '5';
if (location.href.indexOf('/site') === -1 && location.href.indexOf('/search/?c=5') === -1) {
$('#main').before('<div id="sidebar" style="padding: 10px; width: 200px; position: absolute"><div id="portal"><div id="latest" class="portal_box"><h2>Latest Posts</h2></div><div></div>');
$('#main').addClass('margin');

$.get(main_url + 'search/?c=5&force_ads', function(data) {
$('tr[class*="row"]:lt(' + amount + ')', data).each(function() {
var replies = $(this).find('td.c_cat-replies a').text();
var repliesLink = $(this).find('td.c_cat-replies a').attr('href');
var tTitle = $(this).find('td.c_cat-title:eq(0) > a').text();
var tTitleLink = $(this).find('td.c_cat-title:eq(0) > a').attr('href');
var lPoster = $(this).find('td.c_cat-lastpost a').text();
var lPosterLink = $(this).find('td.c_cat-lastpost a').attr('href');
$('#latest').append('<h4><a href="' + tTitleLink + '">' + tTitle + '</a></h4><div class="portal_content"><a href="' + lPosterLink + '">' + lPoster + '</a><br />Replies: <a href="' + repliesLink + '" rel="nofollow">' + replies + '</a></div>');
});
var sidebarHeight = $('#sidebar').height();
$('#main').css('min-height', sidebarHeight + 'px');
$.get(location.href);
});
}
})(jQuery);
//]]>
</script>
Edited by Cory, Dec 1 2016, 12:56 PM.
Offline Profile Quote Post Goto Top
 
tigerdesi
Member
[ * ]
Thanx
Offline Profile Quote Post Goto Top
 
The epicDan-ZNR
Member
[ * ]
Is there a way to move it to the right?
Is there a way to move it to the right?
Edited by The epicDan-ZNR, Mar 29 2012, 10:48 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Change 'margin-left' to 'margin-right' and add right: 0; after style=" in the code, you can change the zero to the amount of pixels you want the sidebar to move left (such as 10px). You can also add top: 0;, changing zero to the amount of pixels you want the sidebar to move down.
Offline Profile Quote Post Goto Top
 
Im Gold
Member
[ *  * ]
Posted Image

As you can see it is comming on the way top, anyway it can be at the point when the forum starts instead of the top board?

forums: http://ea-rs.us
soo like it should start where the red rectangle is

Posted Image
Cory
Mar 29 2012, 10:52 AM
Change 'margin-left' to 'margin-right' and add right: 0; after style=" in the code, you can change the zero to the amount of pixels you want the sidebar to move left (such as 10px). You can also add top: 0;, changing zero to the amount of pixels you want the sidebar to move down.
I read this, but i did not understand it :(
Edited by Im Gold, Mar 29 2012, 02:35 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
To make it appear beside the categories on the index, add the following below the JavaScript (Below the Board wrapper):
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#sidebar').insertBefore('div.category:eq(0)')
$('#main').addClass('index');
$('#sidebar').nextAll().wrapAll('<div class="margin" />');
}
</script>
Also add the following above the ending style tag (Javascripts wrapper):
Code:
 
div.index {
margin-left: 0 !important;
}
What part don't you understand, I assume it's about changing the pixels? The 'margin-right' is a change and the 'right: 0;' and 'top: 0;' is an addition. The pixel change is to basically keep increasing the number until the sidebar is in the position you desire, because simply adding 'right: 0;' may make it look a bit off-position. When you use a number, you must use a unit (if our case, px), you don't have to specify a unit when the value is 0.
Offline Profile Quote Post Goto Top
 
tigerdesi
Member
[ * ]
It is not work
Edited by tigerdesi, Mar 30 2012, 02:21 AM.
Offline Profile Quote Post Goto Top
 
Im Gold
Member
[ *  * ]
okay soo so far i have this is the javascripts
Code:
 
<style type="text/css">
div.margin {
margin-right: 180px !important;
</style>


and thisbelow the board
Code:
 
<script type="text/javascript">
(function ($) {
var amount = '5';
if (location.href.indexOf('/site') < 1 && location.href.indexOf('/search/?c=5') < 1) {
$('#main').before('<div id="sidebar" style="right: 0; padding: 10px; width: 200px; position: absolute"><div id="portal"><div id="latest" class="portal_box"><h2>Latest Posts</h2></div><div></div>');
$('#main').addClass('margin');

$.get(main_url + 'search/?c=5', function (data) {
$('tr[class*="row"]:lt(' + amount + ')', data).each(function () {
$(this).find('td.c_cat-title > a, td.c_cat-lastpost a, td.c_cat-replies a').appendTo('#latest');
});

$('#latest a[href*="/topic"]').wrap('<h4 />');
$('#latest a[rel]').each(function () {
$(this).next('a[href*="/profile"]').andSelf().wrapAll('<div class="portal_content" />');
var next = $(this).next('a[href*="/profile"]')
$(this).insertAfter(next).before('<br />Replies: ');
});
});
}
})(jQuery);
</script>


and it appears like this Posted Image
Cory
Mar 29 2012, 03:24 PM
To make it appear beside the categories on the index, add the following below the JavaScript (Below the Board wrapper):
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#sidebar').insertBefore('div.category:eq(0)')
$('#main').addClass('index');
$('#sidebar').nextAll().wrapAll('<div class="margin" />');
}
</script>
Also add the following above the ending style tag (Javascripts wrapper):
Code:
 
div.index {
margin-left: 0 !important;
}

Now can you explain to mewhere do i add these exactly im having a hard time figuring it out :/
Edited by Im Gold, Mar 30 2012, 09:06 AM.
Offline Profile Quote Post Goto Top
 
The epicDan-ZNR
Member
[ * ]
Im Gold
Mar 30 2012, 09:01 AM
okay soo so far i have this is the javascripts
Code:
 
<style type="text/css">
div.margin {
margin-right: 180px !important;
</style>


and thisbelow the board
Code:
 
<script type="text/javascript">
(function ($) {
var amount = '5';
if (location.href.indexOf('/site') < 1 && location.href.indexOf('/search/?c=5') < 1) {
$('#main').before('<div id="sidebar" style="right: 0; padding: 10px; width: 200px; position: absolute"><div id="portal"><div id="latest" class="portal_box"><h2>Latest Posts</h2></div><div></div>');
$('#main').addClass('margin');

$.get(main_url + 'search/?c=5', function (data) {
$('tr[class*="row"]:lt(' + amount + ')', data).each(function () {
$(this).find('td.c_cat-title > a, td.c_cat-lastpost a, td.c_cat-replies a').appendTo('#latest');
});

$('#latest a[href*="/topic"]').wrap('<h4 />');
$('#latest a[rel]').each(function () {
$(this).next('a[href*="/profile"]').andSelf().wrapAll('<div class="portal_content" />');
var next = $(this).next('a[href*="/profile"]')
$(this).insertAfter(next).before('<br />Replies: ');
});
});
}
})(jQuery);
</script>


and it appears like this Posted Image
Cory
Mar 29 2012, 03:24 PM
To make it appear beside the categories on the index, add the following below the JavaScript (Below the Board wrapper):
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#sidebar').insertBefore('div.category:eq(0)')
$('#main').addClass('index');
$('#sidebar').nextAll().wrapAll('<div class="margin" />');
}
</script>
Also add the following above the ending style tag (Javascripts wrapper):
Code:
 
div.index {
margin-left: 0 !important;
}

Now can you explain to mewhere do i add these exactly im having a hard time figuring it out :/
Works fine for me.

http://gamingossip.com/index/
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
tigerdesi: It will only show the latest active topics from the Active Topics page, if you don't have any latest topics display on that page, only the H2 will appear.

Im Gold: The script you added in the original post, the additional script I posted above will go right below that script (underneath the </script> tag). The CSS you added in the original post, the additional CSS I posted above will go inside the style tags (above the </style> tag).

You basically want to use this:

Javascripts:
Code:
 
<style type="text/css">
div.margin {
margin-right: 180px !important;
}

div.index {
margin-left: 0 !important;
}
</style>
Below the Board:
Code:
 
<script type="text/javascript">
(function ($) {
var amount = '5';
if (location.href.indexOf('/site') < 1 && location.href.indexOf('/search/?c=5') < 1) {
$('#main').before('<div id="sidebar" style="right: 0; padding: 10px; width: 200px; position: absolute"><div id="portal"><div id="latest" class="portal_box"><h2>Latest Posts</h2></div><div></div>');
$('#main').addClass('margin');

$.get(main_url + 'search/?c=5', function (data) {
$('tr[class*="row"]:lt(' + amount + ')', data).each(function () {
$(this).find('td.c_cat-title > a, td.c_cat-lastpost a, td.c_cat-replies a').appendTo('#latest');
$.get(location.href);
});

$('#latest a[href*="/topic"]').wrap('<h4 />');
$('#latest a[rel]').each(function () {
$(this).next('a[href*="/profile"]').andSelf().wrapAll('<div class="portal_content" />');
var next = $(this).next('a[href*="/profile"]')
$(this).insertAfter(next).before('<br />Replies: ');
});
});
}
})(jQuery);
</script>

<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#sidebar').insertBefore('div.category:eq(0)')
$('#main').addClass('index');
$('#sidebar').nextAll().wrapAll('<div class="margin" />');
}
</script>
Offline Profile Quote Post Goto Top
 
Im Gold
Member
[ *  * ]
Cory
Mar 30 2012, 07:22 PM
tigerdesi: It will only show the latest active topics from the Active Topics page, if you don't have any latest topics display on that page, only the H2 will appear.

Im Gold: The script you added in the original post, the additional script I posted above will go right below that script (underneath the </script> tag). The CSS you added in the original post, the additional CSS I posted above will go inside the style tags (above the </style> tag).

You basically want to use this:

Javascripts:
Code:
 
<style type="text/css">
div.margin {
margin-right: 180px !important;
}

div.index {
margin-left: 0 !important;
}
</style>
Below the Board:
Code:
 
<script type="text/javascript">
(function ($) {
var amount = '5';
if (location.href.indexOf('/site') < 1 && location.href.indexOf('/search/?c=5') < 1) {
$('#main').before('<div id="sidebar" style="right: 0; padding: 10px; width: 200px; position: absolute"><div id="portal"><div id="latest" class="portal_box"><h2>Latest Posts</h2></div><div></div>');
$('#main').addClass('margin');

$.get(main_url + 'search/?c=5', function (data) {
$('tr[class*="row"]:lt(' + amount + ')', data).each(function () {
$(this).find('td.c_cat-title > a, td.c_cat-lastpost a, td.c_cat-replies a').appendTo('#latest');
$.get(location.href);
});

$('#latest a[href*="/topic"]').wrap('<h4 />');
$('#latest a[rel]').each(function () {
$(this).next('a[href*="/profile"]').andSelf().wrapAll('<div class="portal_content" />');
var next = $(this).next('a[href*="/profile"]')
$(this).insertAfter(next).before('<br />Replies: ');
});
});
}
})(jQuery);
</script>

<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#sidebar').insertBefore('div.category:eq(0)')
$('#main').addClass('index');
$('#sidebar').nextAll().wrapAll('<div class="margin" />');
}
</script>
I copied the code exactly as you posted and this is how it appears
Posted Image
Offline Profile Quote Post Goto Top
 
tigerdesi
Member
[ * ]
Thanks Cory
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Im Gold: Please add it to your board or a test board so I can see what you're doing wrong.

Also, please link to large images instead of posting them so we don't have to scroll down the page so much.
Offline Profile Quote Post Goto Top
 
Im Gold
Member
[ *  * ]
Ive added it to a test board

http://w11.zetaboards.com/Destiny_rs/index/

have a look Cory
Edited by Im Gold, Apr 5 2012, 03:55 PM.
Offline Profile Quote Post Goto Top
 
Ogk
Member
[ * ]
Hey is it possible to shorten it on the right side? It goes over the border a lil as you can see in the picture.

Posted Image
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