HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media


Welcome to TinyPortal. Please login or sign up.

March 01, 2024, 01:39:18 AM

Login with username, password and session length
  • Total Members: 3,881
  • Latest: fords8
  • Total Posts: 195,080
  • Total Topics: 21,209
  • Online today: 71
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 89
  • Total: 89

[Block] Tabbed Block via Mouse Over

Started by Freddy, September 23, 2010, 05:35:46 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.


Name of Snippet: Tabbed Block via Mouse Over
SMF/TP versions tested:
SMF 1/ TinyPortal v1.0.5 beta 1 & 0.9.8
SMF 2RC3 / TinyPortal 1.0 beta 5.2
Block Type: php block or article
Author: Freddy, based on code by StormLrd and using code from Dynamic Drive
Link to Discussion:
Other Requirements: Just the correct package from below to fit your version of SMF

This is a mod package + block code made by request, building on work by StormLrd and Dimdom.

It's been designed to be compatible with TP 0.9.8 and 1.0.

Edit 23 Sep 2010 : Now there is an SMF2 Version below.  Same process to install , I just updated the code.

Steps :

1) Download the zip file attached for your version of SMF.

2) Upload to SMF with package manager.

3) Apply mod and follow instructions.

4) Create your PHP block (or article) and paste in the code you were given by the readme file.

5) Hope it works ...

6) Configure/expand it how you like.  Plenty of block codes should be able to work with this; it's a matter of experimentation.

The package installer will create a new folder in your forum directory called 'tabbed_block' - inside there is a file called mouseoverTabContent.php and this is what does all the work to create the tab contents.

In the 'old' SMF 1 version the style (CSS) of the tabbed block is set in the block code.  Although this will work it's not the best way to add CSS to a block as the code will not validate - even though browsers are not that fussy about where it is.  It depends on how fussy you your self are about validation or are happy for hacks like this to just work - I have left it alone for now, but you could take a look at the SMF 2 Version to see how it is done.

In the SMF2 version I have put the CSS into a separate file found in the tabbed_block folder that will get installed.  The CSS is loaded dynamically with javascript and means it should validate.  Ahh peace at last...

Everything is commented so you should be able to work out what to do.  If not just ask.

Demo can be found here... running on SMF 1. I no longer have a demo running of this;

Thanks to everyone who helped out :)

Click here to jump to a post showing how to modify the code to show something else in a tab... it's for SMF 1 but the principle is the same...