[Javascript] Auto alignment subforums

Today I will show something interesting, auto arranging child boards on phpBB3 and punBB version, beta version.
Now the settings:
ACP > Display > Homepage > Structure and hierarchy:


Credits: StaarK*



1º - Css

Code:

.subforums {
margin: 2px 0 3px 5px;
padding-left: 20px;
background: url(http://community.invisionpower.com/filestore/public/style_images/master/subforum_stem.png) no-repeat left 4px;
overflow: hidden;
float: left;
min-width: 100px;
}

.sub:nth-child(odd) {
float: left;
clear: both;
width: 160px;
position: relative;
}

.sub:nth-child(even) {
float: right;
width: auto;
position: relative;
}

.sub:nth-child(even):last-child {
position: relative;
left: -3px;
}

2º - Javascript
phpBB3

Code:

$(document).ready(function(){
$('.topiclist.forums li.row').each(function(){
$(this).find('.dterm a:has(img)').next().wrap('<li class="sub" />');
$(this).find('.dterm li').wrapAll('<ul class="subforums" />');
$(this).find('.dterm a:has(img)').remove();
});

$('.topiclist.forums').each(function(index){
cm = $(this).html();
cm = cm.replace(/, /gi,'');
$(this).html(cm);
});

});

punBB

Code:

$(document).ready(function(){
$('.subforums').each(function(){
$(this).find('a:has(img)').next().wrap('<li class="sub" />');
$(this).find('a:has(img)').remove();
});

$('.subforums').each(function(index){
cm = $(this).html();
cm = cm.replace(/, /gi,'');
$(this).html(cm);
});

});

ACP > Display > Templates >  General > index_box
find:

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

replace with:

Code:

<ul class="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</ul>

3º - Preview
phpBB3
punBB

---

If you have any questions related to this topic create a topic with the following title: Auto alignment subforums

tutorial is copy !!!

Please tell us from where.

Tutorial will not be accepted before we get answer from where, but it will be open before we get answer.

Credits have been added.

i don't see it will work for punbb ?

its not working with punbb any help please ?

My mistake . I have not added what need to be edited in index_box . Read over again the tutorial .

ohh thanks but got some error in it i mean about alignment

u can see the picture below



i ticked with green mark u can understand it (colours channel must start with same alignment with above as life ok & below Anime) i mean in same line hope u got it

so where was i wrong any help ?

thanks

Thanks alot just what I was looking for Props

every time you create a new category, they will return to normal, why?

how to make that into 3 lists, because with 2 parts, it will be too long down

Hey Eca.

I can make it for u, but tomorrow if you can wait

Hello. I added this tutorial but in some categories it shows me this space and to some others not! Why?

This is perfect. Take a look:

But this is not:

Why does it make me this distance?

Marios94 wrote:[link="/t177-javascript-auto-alignment-subforums#2773"]Hello. I added this tutorial but in some categories it shows me this space and to some others not! Why?

This is perfect. Take a look:

But this is not:

Why does it make me this distance?

Check if you have at description tags such as: [ic]<br>[/ic] or [ic]<p>[/ic]

Thanks! You were right! Its perfect now!

I still have a gap like him =x