Home » Extensions » Tabber
NoNumber!

Joomla!® Websites & Extensions
development  -  support  -  consultancy

With Tabber you can make content tabs anywhere in Joomla!

If you use Tabber, please post a rating and a review at the Joomla! Extensions Directory.

Description

With Tabber you can make content tabs anywhere in Joomla!

This text right here is placed in tabs (Description, Installing, ...) through Tabber.

You can use the editor button to place an example tab block. The syntax simply looks like:

{tab=Tab Title 1}
Your text...
{tab=Tab Title 2}
Your text...
{/tabs}

Tab links

To make links to certain tabs in your page, you can use Tab Links, like:

{tablink=Tab Title 2}Link text{/tablink}


This is a tablink to the Download tab: Download

Individually styled tabs

To add an extra class to a tab (for styling purposes), you can use:

{tab=Tab Title 1|myclass}

Tabbers stylesheet comes with styling for the classes blue, green and grey.

It's best to overrule styles by adding definitions to your templates stylesheet, so your custom styles don't get overwritten when updating Tabber in the future.

There are also several styling options in the Tabber plugin settings.

Active tab

You can set a different tab to open on default by adding 'active' to that tab tag, like:

{tab=Tab Title 2|active}

So if you want a tab 'My Cool Stuff' with style 'green' and active by default:

{tab=My Cool Stuff|green|active}

Some Tab

...

My Cool Stuff

...

Another Tab

...

Active tab via url

Via hash tag (#)

Since version 1.8.0 the alias (url safe name) of the tab is added to the url once you click on a tab. So if you click on the tab "Download", the url will look like:

some/url#download

You can use this url to link directly to this tab.

This is an option which can be switched off. So if you don't like this feature, just go to the Tabber system plugin settings to change it.

Via url variable (?/&)

Alternatively you can force a tab to open via a variable in the url, like:

index.php?option=com_content&view=article&id=123&tab=Tab Title 2

content/my-article?tab=tabtitle2

With this variable method, it also works if you use different writing styles of the title, like lower case, no spaces, no special characters, number of the tab (1, 2, etc), number of the set + number of the tab (1-1, 1-2, etc).
So if your tabs title is "It's cool!", then you can use: tab=itscool
If this is the 3rd tab of the 2nd set, you can also use: tab=3-2

Page scrolling

You can set Tabber up to automatically scroll to the top of the tab when you click on a tab to open it.

You can overrule this behavior per tab by adding the |noslide attribute:

{tab=Tab Title|noscroll}

If you have no page scrolling setup, you can overrule that per tab by adding the |scroll attribute. The page will then scroll to the top of that tab.

{tab=Tab Title|scroll}

Rounded corners?

The tabs are styled through CSS. This means you can control the styling yourself (overrule styles through your templates stylesheet).

The tabs have rounded corners done through CSS3. This means newer browsers will show rounded corners. But IE8 and earlier (CSS3 not supported) will show straight corners.

Slides?

Also take a look at Slider to make content slides.

Nested tabs

You can nest tabs by giving the nested tab set extra names/ids.

Syntax

This is a nested tab.

To create nested sets, give the tabs of the nested set an extra name or id, like:
{tab-whatever}...{/tabs}

To prevent losing track of what closing tag closes what, you can optionally add the id to the closing tag too (but you don't have to), like:
{tab-whatever}...{/tabs-whatever}

Example syntax:
{tab=Level 1 - First}
    This is the fist tab
    {tab-level2=Level 2 - First}
        First nested tab
    {tab-level2=Level 2 - Second}
        Second nested tab
    {/tabs}
{tab=Level 1 - Second}
     Second main tab
{/tabs}

Example

You can nest tab sets multiple levels deep, if you would ever want/need this for any reason.

Example Tab 1

Some text...

Example Tab 1.1

Example Tab 1.1.1

Some text...

Example Tab 1.1.2

Some text...

Example Tab 1.1.3

Some text...

Example Tab 1.2

Some text...

Example Tab 2

Some text...

Example Tab 2.1

Some text...

Example Tab 2.2

Some text...

The syntax used for above tabs:

{tab-ex=Example Tab 1}
    Some text...
    {tab-ex_sub1=Example Tab 1.1}
    {tab-ex_sub1_sub1=Example Tab 1.1.1}
        Some text...
        {tab-ex_sub1_sub1=Example Tab 1.1.2}
            Some text...
        {tab-ex_sub1_sub1=Example Tab 1.1.3}
            Some text...
        {/tabs}
    {tab-ex_sub1=Example Tab 1.2}
        Some text...
    {/tabs}
{tab-ex=Example Tab 2}
    Some text...
    {tab-ex_sub2=Example Tab 2.1}
        Some text...
    {tab-ex_sub2=Example Tab 2.2}
        Some text...
    {/tabs}
{/tabs}

Notice!

Don't forget to close each tab set with the closing tag {/tabs}

If you don't close every set, you will get unwanted results.

Tutorials

Troubleshooting

Please use the forum for support.

Tabs are not working on all browsers

  • There is markup on the {tab} tags
    It is fine to give styles to the titles withing the {tab} tags, like: {tab=My Title}
    But giving styles to other parts of the tag, or the entire tag, can cause problems, like: {tab=My Title}
    Remove the extra styling or other html tags around and in the {tab} tags that might cause problems.
  • There are javascript errors
    Javascript errors can and usually will cause the tabs to not function. You probably have a mootools or jquery conflict on your site. This is often the case when multiple mootools or jquery scripts are loaded.
    Take a look in the sites output html to see if this is the case.
    For more info about the javascript error(s), you can use Firefox with the Webdeveloper Toolbar (or another browser with a javascript debugger).

Tabs are not working on Internet Explorer (but are working on other browsers)

  • There are problems in the html output structure
    Internet Explorer is pretty picky when it comes to html. It will not handle invalid markup gracefully.
    Check if you have unclosed html tags in your content (see the html view in your editor). Like divs or spans that have no closing tag. Or lost closing tags that have no opening tag.
    You can check your page for html errors on: http://validator.w3.org

Specs

Specifications

Tabber is a Joomla extension compatible with Joomla 1.5, Joomla 1.7 and Joomla 2.5.

The extension consists of:

  • a system plugin
  • an editor button plugin

Requirements

Tabber will only work correctly if your setup meets these requirements:

  • Up-to-date version of Joomla!
  • PHP 5.3+
  • PHP mbstring (Multibyte String) functions should be enabled
  • MySQL 5+

Using PHP 5.2 (or lower)?
PHP 5.2 is old and support for it has stopped with the release of PHP 5.2.16 (16-Dec-2010). This means that PHP 5.2 cannot be considered stable or secure anymore.
If your host will not or cannot provide you with an up-to-date version of PHP, then you have reason enough to look for a decent host.
PHP 5.2 mainly has problems with installation of the zip packages. The extensions might work without problems for you once installed, but I can not give any guarantees on that.
>> For more detailed information, read: No more php 5.2 support - move on to php 5.3

I can not provide support for setups that do not meet the above requirements.

The core Joomla files should of course not be altered in any way.

Installation

The easiest way to install/update is via the NoNumber! Extension Manager.

If you have problems installing Tabber, please try the manual installation process as described here:
docs.joomla.org/Installing_an_extension

Otherwise, please report this on the forum or let me know via the contact form.

Updating

If you want to update to the latest version, you do not have to uninstall first.

The easiest way to install/update is via the NoNumber! Extension Manager.

You can also update simply by installing the package via the Joomla core installation process.

Downgrading

If for some reason you need to downgrade, it is best to uninstall the extension first.

Also, you will have to uninstall the NoNumber! Framework plugin (system) (and the NoNumber Elements plugin if you have it installed).

After that you can simply install the older version zip file.

Please note that I cannot not provide support on older versions!

Open Source License

Tabber is an Open Source Joomla extension. It is in compliance with the GNU/GPL license:
Licence: GNU/GPL GNU General Public License, version 2

Joomla is also Open Source.

Support

Need more help?

Before requesting help, make sure your installation and setup meet the requirements (see the Specs) and your extensions are up-to-date.

If you need more help, please take a look in the NoNumber! Forum.
If you can't find your answer there, please post your question. I am very willing to help!

You can also contact me via the contact form or via chat (if I'm online).

Changelog

Changelog

+ = Added ! = Removed ^ = Changed # = Fixed

26-Jan-2012 : v1.8.5
+ Added translations: et-EE
# Fixed issue with image-only tab titles (thanks to Justin Niebuhr)
# Fixed issue with Tab links not working with tabs with special characters
# Fixed issue with links not working correctly on all setups due to not using JRoute
# Fixed issue with errors on pdf pages (Joomla 1.7+)
# Fixed issue with installer not removing the folder/zip from the tmp

09-Jan-2012 : v1.8.4
# Fixed issue with line-height of the tab titles being jumpy on some templates

16-Dec-2011 : v1.8.3
^ Updated translations: ru-RU, th-TH
^ Cleaned up more code
# Fixed issue with html entities in title converting to url hash
# Fixed issue with invalid w3c html markup (ref attribute in li element)

18-Nov-2011 : v1.8.2
+ Added option to overrule mode by adding click or hover in tag
^ Updated translations: sl-SI
# Fixed issue with hash fragment still being added to url when option is switched off

09-Nov-2011 : v1.8.1
+ Added option to overrule the default code the editor button inserts
^ Updated translations: de-DE
^ Improved cleanup of scripts/styles when there are no tabs on the page
# Fixed issue with hash fragment links not working in all urls with variables
# Fixed issue with typo in css file (.grey instead of .mystyle)

06-Nov-2011 : v1.8.0
+ Added active tab as hash fragments to url (and option to switch this off)
^ Updated translations: fr-FR
^ Cleaned code syntax (no longer guaranteed support for php 5.2.x and lower)
^ Improved matching of titles with special characters via url
^ Improved cleanup of scripts/styles when there are no tabs on the page
# Fixed issue with tags being handled in some edit forms

17-Oct-2011 : v1.7.1
+ Added translations: sv-SE, th-TH
^ Updated translations: es-ES
# Fixed security issue in !NoNumber! Framework plugin
# Fixed issue with w3c validator giving false negatives on html output

08-Oct-2011 : v1.7.0
+ Added ability to set tabs up to change on mouse hover instead of click
^ Improved installer
^ Moved translation language files to main package (no more language packs)
^ Cleaned up some code (like no more use of DS)
# Fixed issue with tags being handled in editor button popup
# Fixed issue with the tablink tag not working outside the area where the tabs are

16-Sep-2011 : v1.6.0
^ Changed !NoNumber! Elements plugin to !NoNumber! Framework
^ Moved common language strings to !NoNumber! Framework files
^ Changed way !MooTools version is detected
^ Improved initial display before script is loaded/executed
^ Improved handling of surrounding whitespace
# Fixed issue with javascript files breaking when using js/css compression
# Fixed issue with invalid characters in element ids (not passing w3c validation)
# Fixed issue with class names showing in print view

29-Jul-2011 : v1.5.2
# Fixed issue with surrounding html tags potentially breaking html structure

21-Jul-2011 : v1.5.1
+ Added option to not use outlines
+ Added option to use versioned scripts and stylesheets
^ Improved handling of styling on tags
^ Improved handling of tags in feeds
^ Improved how inactive content is hidden
# Fixed issue with error on servers that don't have mbstring functions enabled
# Fixed issue with some content not being rendered correctly in inactive tabs

05-Jul-2011 : v1.5.0
+ Added option to show tabs in RTL order
+ Added cookie support for remembering active tabs
^ Changed layout of options
^ Changed use of elements
^ Improved handling of print and pdf pages
# Fixed issue with images and other html in titles
# Fixed issue with inactive content showing shortly before page is loaded
# Fixed issue with !JEventHandler error on some setups

06-Jun-2011 : v1.4.2
# Fixed issue with tabs using custom ending tag no longer working (since v1.4.1)
# Fixed version number

06-Jun-2011 : v1.4.1
+ Added option to overrule the window sliding per tab
+ Added option to define the tag type used for the titles
^ Added better handling of tags when closing tag is not found
# Fixed issue with file inclusion not working on some Joomla 1.5 setups

23-May-2011 : v1.4.0
+ Joomla 1.7 compatible!
+ Added more comments to css file
^ Changed way the mootools version is detected

Commercial License

Tabber is completely free and you DON'T need a Commercial License Code to use it.

However, if you use my extensions on websites that you make money from, I would appreciate it if you purchase a License Code.
The License Code will remove the license message from the extensions administrator screens.

Note: If you don't want to pay for the License Code and want to continue to use the extension for free, please do. You will just have to ignore the license message in the administrator.

Note: If you have donated before and feel you should get some reduction on the price, please contact me about it... we'll sort it out :)

more information...

 

 

Here you can see the difference between the use of the extensions without and with Commercial License Code.

WITHOUT Commercial License CodeWITH Commercial License Code
Full version download yes YES yes YES
Full functionality yes YES yes YES
Message in administrator license_invalid license_valid
Encrypted no NO no NO
Free updates yes YES yes YES
Free support yes YES yes YES
Free RSS news subscription yes YES yes YES
Free holiday to Barbados no NO no NO

Download

Downloads

Tabber is compatible with Joomla 1.5, Joomla 1.7 and Joomla 2.5

NOTE: Tabber needs PHP 5.3+. Please see the specs for more requirements.

  • Are you going to use this extension on a commercial website? Please consider buying a License Code

More downloads...

Please clear your browsers cache after updating an extension.

NOTE: Joomla 1.6 is no longer supported. Joomla 1.6 reached end-of-life in August 2011. If you have a site running on Joomla 1.6 you are urged to upgrade to Joomla! 2.5. Tabber will probably still work on Joomla 1.6, but any issues specific to Joomla 1.6 will not be fixed.

Tip!

Are you using multiple NoNumber! extensions?
Install the NoNumber! Extension Manager to easily keep them up-to-date.

Languages

This extension comes with the following languages:

  • [pt-BR] Brazilian Portuguese
  • [bg-BG] Bulgarian
  • [ca-ES] Catalan
  • [da-DK] Danish
  • [nl-NL] Dutch
  • [en-GB] English
  • [et-EE] Estonian
  • [fr-FR] French
  • [de-DE] German
  • [el-GR] Greek
  • [it-IT] Italian
  • [lt-LT] Lithuanian
  • [ru-RU] Russian
  • [sl-SI] Slovenian
  • [es-ES] Spanish
  • [sv-SE] Swedish
  • [th-TH] Thai

No language pack for your language?

I welcome you to help out and get involved with translations for NoNumber! extensions.

I am using Transifex for the translations of all NoNumber! extensions. So I kindly ask you to join Transifex.

There is a translation team/group set up especially for Joomla projects: OpenTranslators.

To join, see the different steps on the right under: Translator Guide: http://opentranslators.org/en/how-to

You can find all the NoNumber! projects here: https://www.transifex.net/projects/tag/nonumber/

All language files will be updated and packed with every new release of the individual extensions.

OpenTranslators

 
Open Source Training | Online Joomla! Training and Support
MaxCDN | Content Delivery Network | Accelerate your site to the max
hosting joomla