Simple Machines Community Forum

Customizing SMF => Modifications and Packages => Topic started by: shadav on October 26, 2020, 06:04:07 PM

Title: Tabbed Info
Post by: shadav on October 26, 2020, 06:04:07 PM
Link to the mod (https://custom.simplemachines.org/index.php?mod=4272)
This will put the Info Center into tabs

thanks to this article on a how to create tabs: inspirationalpixels.com/creating-tabs-with-html-css-and-jquery/

thanks to vicram10 for helping to get it working correctly (stupid divs and if statements anyways)

you can easily change the looks of the tabs with the provided css, i tried to make it match closely to the default theme

you can change the animation in the tabbedinfo.js file

find
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

replace with one of the below

fade
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

slide 1
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);

slide 2
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);


if you want to see a demo
hostingspot.net/testing/smf20/
or
4rearth.info

please note that the Upcoming Calendar tab will not work unless there is actually an event or holiday

you can change which tab is active (default open upon page load) by changing
<li class="active"><a href="#tab3">to
<li><a href="#tab3">
and then find
<div id="tab3" class="tab active">change to
<div id="tab3" class="tab">
then on whichever tab you want as default, lets say recent posts simply add the class="active"
so change
<li><a href="#tab1">to
<li class="active"><a href="#tab1">
and then change
<div id="tab1" class="tab">to
<div id="tab1" class="tab active">
===
added licence (GNU General Public License)
basically do what you like except please do give credit where credit is due...
I'm not really good at scripts and things so :p I welcome anyone who's willing to improve on it

fixed issue with buttons still showing up even though the recent or calendar weren't turned on in admin
also changed the default active tab to the forum stats (for those that don't have recent posts turned on, you can change this with the codes above)

fixed missing jquery

added a second file, Tabbed_Info_Lite.zip, for those that may already have installed tabbed profile mod (https://custom.simplemachines.org/mods/index.php?mod=4273)
Title: Re: Tabbed Info
Post by: Shambles on October 26, 2020, 06:59:08 PM
Can you provide a better image of what this looks like?

The image provided is too small.

(https://i.imgur.com/wbmKeNU.jpg)
Title: Re: Tabbed Info
Post by: shadav on October 26, 2020, 08:23:03 PM
Quote from: Shambles on October 26, 2020, 06:59:08 PM
Can you provide a better image of what this looks like?

The image provided is too small.

(https://i.imgur.com/wbmKeNU.jpg)

it's actually a gif ;) if you click on it it should be a bit bigger and show how it works

This puts the Info Center on the board index into tabs, The Forum Stats is set to default (active)
you can click on the Recent Posts, Upcoming Calendar or Users Online tabs to open those (replacing the current tab)
Title: Re: Tabbed Info
Post by: pocttopus on October 29, 2020, 03:35:39 PM
Is there any chance to be available this mod for 2.1RC3 version?
Title: Re: Tabbed Info
Post by: shadav on October 29, 2020, 03:50:04 PM
Quote from: pocttopus on October 29, 2020, 03:35:39 PM
Is there any chance to be available this mod for 2.1RC3 version?

sorry but I haven't even played with 2.1, waiting on a final version
Title: Re: Tabbed Info
Post by: Antechinus on October 29, 2020, 05:30:50 PM
Your test site theme looks to be missing its CSS. ;)
Title: Re: Tabbed Info
Post by: shadav on October 29, 2020, 05:51:08 PM
Quote from: Antechinus on October 29, 2020, 05:30:50 PM
Your test site theme looks to be missing its CSS. ;)
what do you mean?
it was prob my host being stupid....I keep getting emails about database errors, last week I kept getting 503 errors every few minutes....
Title: Re: Tabbed Info
Post by: Antechinus on October 29, 2020, 05:55:15 PM
When I go to https://adserver.business/test/smf/ it just shows the raw HTML. It might have borked the settings path to the CSS if the db is playing up.
Title: Re: Tabbed Info
Post by: pocttopus on October 30, 2020, 02:11:59 AM
Quote from: shadav on October 29, 2020, 03:50:04 PM
Quote from: pocttopus on October 29, 2020, 03:35:39 PM
Is there any chance to be available this mod for 2.1RC3 version?

sorry but I haven't even played with 2.1, waiting on a final version
You can try without waiting for final version.  ::) ;)

Quote from: shadav on October 29, 2020, 05:51:08 PM
Quote from: Antechinus on October 29, 2020, 05:30:50 PM
Your test site theme looks to be missing its CSS. ;)
what do you mean?
it was prob my host being stupid....I keep getting emails about database errors, last week I kept getting 503 errors every few minutes....

(https://i.postimg.cc/PpXN6Zrh/Screenshot-192.jpg) (https://postimg.cc/PpXN6Zrh)
Title: Re: Tabbed Info
Post by: shadav on October 30, 2020, 10:42:44 AM
ug....thanks....contacted my host (yet again)
Title: Re: Tabbed Info
Post by: shadav on January 01, 2021, 05:02:13 PM
Quote from: pocttopus on October 29, 2020, 03:35:39 PM
Is there any chance to be available this mod for 2.1RC3 version?

well I finally got around to installing 2.1rc3 to play with...
I may work on updating this to work, but kind of silly since Kindred was nice enough to already post a way to do this for 2.1rc3 :) and it's a lot easier
https://www.simplemachines.org/community/index.php?topic=575937.0
Title: Re: Tabbed Info
Post by: -Rock Lee- on January 01, 2021, 10:37:23 PM
Oh it seems interesting also to be able to modify to see what result is achieved, I'm going to test it on a test site I have and see what I get :)!


Regards!
Title: Re: Tabbed Info
Post by: pocttopus on February 13, 2021, 02:45:50 AM
Quote from: shadav on January 01, 2021, 05:02:13 PM
Quote from: pocttopus on October 29, 2020, 03:35:39 PM
Is there any chance to be available this mod for 2.1RC3 version?

well I finally got around to installing 2.1rc3 to play with...
I may work on updating this to work, but kind of silly since Kindred was nice enough to already post a way to do this for 2.1rc3 :) and it's a lot easier
https://www.simplemachines.org/community/index.php?topic=575937.0
Thanks and try to make it available for installation for 2.1rc3... either through this mod or Kindred can make a separate... it would be same for the users because it's nice to have this one on 2.1rc3.

Thanks again.  ;)