The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

how to make tabbed sub-sections?

View previous topic View next topic Go down

In progress how to make tabbed sub-sections?

Post by romanzo on November 7th 2013, 9:03 am

I was wondering how to make this? Mainly it's like the tabs of chrome and firefox. So anyone know how to do this?

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Chromo on November 8th 2013, 3:39 am

Did you see this on some forum or just your idea?

Chromo
Forumember

Male Posts : 122
Reputation : 19
Language : said the Captain

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 8th 2013, 3:49 am

xKillerZone31 wrote:Did you see this on some forum or just your idea?
See it on http://www.avacweb.com. Why?

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 8th 2013, 5:08 am

Hello romanzo,

There was something similar posted before. This is the source: http://help.forumotion.com/t104506-forum-categories-as-tabs#681626

Its for phpbb3, try the following which I've modified:

Add this to your javascript:
Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management

Name: what you wish
Tick: In the home page

Paste the following and save.
Code:
$(function() {
  $("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
  $(".cat-table:not(:first)").hide();
  $("div.table-title h2").each(function() {
  $("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
  });
  $("#cat-tabs .ct-item").click(function() {
  $("#cat-tabs .ct-abled").removeClass("ct-abled");
  $(this).addClass("ct-abled");
  $(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(0)).slideUp(0)
  }).first().addClass("ct-abled")
  });
Now go to..
Display > Pictures and colors > Colors > CSS stylesheet

Paste the following and hit submit.
Code:
#cat-tabs{
text-align:center;
margin:3px auto;
}
#cat-tabs .ct-item{
box-shadow:0px 8px 6px rgba(255,255,255, 0.3) inset, 0px 8px 6px rgba(0,0,0, 0.1) ;
border-radius:5px 5px 0px 0px;
display:inline;
background:#999;
color:#fff;
margin:5px;
padding:5px;
}
#cat-tabs .ct-abled{
color:#ff5;
background:#666;
}
#cat-tabs .ct-item:hover{
cursor:pointer;
}
The result should be similar to this:


I have a demo set here currently: http://angestesting.forumotion.com/forum

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 8th 2013, 5:25 am

@SethC1995: it work on the main index of the forum but what should I modify so it will work for the sub-sections?

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 8th 2013, 5:37 am

That I am not sure of currently. The script may need a few bit of edits because of this:


Instead of the subforums being displayed in separate tables they're displayed in one table which could make this difficult to modify, considering that most of the classes are shared by the topics in the sub forum.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 8th 2013, 5:51 am

I see, I tried to add your code to sub-forums but it just like a title showing up what category they are in. So in a way sub-category forum have different structure than the main index forum?

Then I hope a way to make this work in sub-categories will come up. Very Happy

EDIT: What do I use if I want to modify the forum index in javascript? Just want to know.Smile

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 8th 2013, 6:12 am

You're correct! The structure is much different, hence I will be studying to see if I can come up with a solution. If I do, I will post it here.

As for your other question you can do much to modify the index.

Firstly you must make sure that your script only runs in the index(or homepage) when creating a new script.


For example:
If I use this and tick 'In the homepage' it will make only the index have a gray background or "wrap".
Code:
$(function() {
$('#wrap').css('background-color', 'gray');
});
of course for testing and grabbing the correct selectors you should consider using a browser with devtools like firefox or chrome.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 8th 2013, 6:24 am

Okay, thanks SethC1995 Smile

Then how about CSS? I think I need a class name or something to modify it appearance.

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 8th 2013, 6:30 am

You would do something like this:

Code:
$(function() {
$('.SELECTOR').addClass('CLASS_NAME');
});
('SELECTOR') - Your selector, say an element without a unique class name.
.addClass('CLASS_NAME') - The name of the class you wish to add to your selected element

Then when you're finished you just write your CSS up:
Code:
.CLASS_NAME{
background-color:#ff0;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 9th 2013, 6:43 am

Thanks SethC1995 for the info. Now I just need to wait if you find something out for the sub-sections. Smile

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 9th 2013, 7:47 am

Gooood news! Very Happy

After studying it I finally figured out what I needed to do. The dl.icons move a bit, but it seems to work better than I expected. Shocked

Also had to move the linklist and forum title some cause the tabs overlapped them. We're using the same selectors so you wont need to put CSS in your sheet again however, I've only needed to modify the cat-tabs position with a bit of CSS in the script. (I didn't want to give you too much css)

Anyway! Here's the code:

Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management > Create new script

Name: Sub-forum tabs
Tick Only: In the subforums
Paste code below, save, and you should be good! Very good
Code:
$(function() {
  $('ul.linklist').eq(1).css('position', 'relative').css('bottom', '20px');
  $('h1.page-title').eq(0).css('position', 'relative').css('bottom', '15px');
  $("h2.hierarchy a.forumtitle").closest(".forums > li > dl.icon").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
  $(".cat-table:not(:first)").hide();
  $("h2.hierarchy a.forumtitle").each(function() {
  $("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
  });
  $('#cat-tabs').css('position', 'relative').css('bottom', '53px');
  $("#cat-tabs .ct-item").click(function() {
  $("#cat-tabs .ct-abled").removeClass("ct-abled");
  $(this).addClass("ct-abled");
  $(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(0)).slideUp(0)
  }).first().addClass("ct-abled")
  });
After you're done the result should be:


If they're not positioned correctly edit the pixels of bottom on this line:
Code:
$('#cat-tabs').css('position', 'relative').css('bottom', '53px');
EDIT:

Just realized a little mistake I made while editing, turns out you will need a liiiittle bit of CSS, but none of the same. Razz

Just put this in your stylesheet to fix that little error:
Code:
ul.linklist.clearfix{
position:relative;
top:0px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 9th 2013, 9:59 am

Cool, as always nice work SethC1995. Thanks for the help really appreciate it. :wouhou:


EDIT: Sorry to trouble but I forgot to mention that the content of the section is shown. Is that possible?

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 9th 2013, 9:14 pm

You're speaking of the topics in the sub forums, yes?



If so, what is it you wanted to do with them?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 10th 2013, 2:32 am

Yes, in the current script you made the table type section is still there mainly we still need to click it view its content so changing it to tab type I just need to click the tab and content of that sub-section is shown.

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 10th 2013, 3:42 am

I'm not sure on doing that, I'm having a really hard time loading the correct amount of threads into the forumbg. I am not able to help you on this right now, sorry TT

This is what I has:
Code:
$(document).ready(function(){
$(".forumbg li.row").load("/f7-teest-test-2 dl.icon:gt(1)");
});
I have to target a specific subforum, then load its threads. The greater problem is incorporating this into the script. Confused

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 10th 2013, 6:07 am

So what you're currently unto is how to make the topic show while removing the table type sub-section?

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 10th 2013, 6:22 am

Do you mean those sublinks?

You can hide them in:
Administration Panel > Display > Homepage > Structure and hierarchy

Scroll to bottom and find 'Sub-level links on index', tick 'non', and save.



As for what I was doing, it was in the sub forums. I was tinkering in the scratch pad to figure something out for you. (Loading the threads from f7 to f1) I really wouldn't know how to incorporate that into the tabs script since I've really only just started understanding javascript. Confused

On top of that I can't seem to get the other threads to appear, only one thread a buncha times.


As I said I might not be able to help with doing that at the moment, apologies.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 10th 2013, 7:36 am

Something like this one (edited only) Clicking the next tab will show that section.


romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 11th 2013, 3:13 am

Well, I've did some studying on load and made some progress.

So far this is what I have: (this demo should be used for index only)
Code:
$(function() {
      $("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
      $(".cat-table:not(:first)").hide();
      $("div.table-title h2").each(function() {
        $("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
      });
      $("#cat-tabs .ct-item").click(function() {
        $("#cat-tabs .ct-abled").removeClass("ct-abled");
        $(this).addClass("ct-abled");
        $(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)));$('.forabg li.row').load('/f1- dl.icon:has("a.topictitle")', { limit: 50 }, function() {
$('dd.dterm').css('position', 'relative').css('left', '50px').css('width', '55%').css('margin-right', '50px');
    });
      }).first().addClass("ct-abled")
    });
Clicking any of the tabs will fetch the contents from /f1-(your first forum), now that we have this, I need to figure out how I can load the contents for each individual tab. Confused

Demo is on my test forum too for now, if you don't want to apply it.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 11th 2013, 3:31 am

Hmmm, so what we have here is you need to load each section manually?

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by Ange Tuteur on November 11th 2013, 3:51 am

Yes, from the method I'm using I load content from /f1- in dl.icon which has the selector '.topictitle'.

From what you said, you wanted to load the contents of TEST 1 when its clicked, load contents of TEST 2 when its clicked, and so on.. I'd have to look into this much further.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: how to make tabbed sub-sections?

Post by romanzo on November 11th 2013, 4:45 am

Yes, thank you for that. Hope you find a easier way to load them all automatically.

romanzo
Forumember

Posts : 62
Reputation : 3
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum