Customizing SMF > Modifications and Packages

Tabbed Info

(1/2) > >>

shadav:
Link to 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

--- Code: ---// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
--- End code ---

replace with one of the below

fade

--- Code: ---// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
--- End code ---

slide 1

--- Code: ---// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
--- End code ---

slide 2

--- Code: ---// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);
--- End code ---


if you want to see a demo
adserver.business/test/smf/
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

--- Code: ---<li class="active"><a href="#tab3">
--- End code ---
to

--- Code: ---<li><a href="#tab3">
--- End code ---

and then find

--- Code: ---<div id="tab3" class="tab active">
--- End code ---
change to

--- Code: ---<div id="tab3" class="tab">
--- End code ---

then on whichever tab you want as default, lets say recent posts simply add the class="active"
so change

--- Code: ---<li><a href="#tab1">
--- End code ---
to

--- Code: ---<li class="active"><a href="#tab1">
--- End code ---

and then change

--- Code: ---<div id="tab1" class="tab">
--- End code ---
to

--- Code: ---<div id="tab1" class="tab active">
--- End code ---

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



--- End quote ---

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?

--- End quote ---

sorry but I haven't even played with 2.1, waiting on a final version

Navigation

[0] Message Index

[#] Next page

Go to full version