News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Tabbed Info

Started by shadav, October 26, 2020, 06:04:07 PM

Previous topic - Next topic

shadav

Link to the mod
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

Shambles

Can you provide a better image of what this looks like?

The image provided is too small.


shadav

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.



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)

pocttopus

Is there any chance to be available this mod for 2.1RC3 version?

shadav

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

Antechinus

Your test site theme looks to be missing its CSS. ;)

shadav

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....

Antechinus

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.

pocttopus

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....


shadav

ug....thanks....contacted my host (yet again)

shadav

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

-Rock Lee-

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!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

pocttopus

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.  ;)

Advertisement: