Problem Solving

Tabs render as simple headings

Each tab is initially rendered as a simple HTML <h2>, <h3>or <h4> element, where the value of n depends on the level of the tab, the tab template and how you have Magic Tabs configured.

You may see this briefly while a page loads. Then the Magic Tabs JavaScript does its stuff and transforms these headings and their content into beautiful tabs.

If you continue to see headings, here are some things that could be wrong:

Tabs do not operate in edit mode

Magic Tabs transforms a page as it completes loading.

In edit mode and on dashboard pages the tabs are disabled and a marker shown in their place, so you will see all tabs and their content strung out down the page. 

When  the page is saved and published, the Magic Tabs JavaScript is loaded and transforms the page to tabs as it completes loading into the visitors browser.

Transition while a page loads

Magic Tabs transforms a page as it completes loading. For a large or complex page, this means you may briefly see content without the tabs while the page loads.

If you want to hide this, use block Design and Custom Teplate > Advanced (cog) > Custom Class to add the class 'magic-tabs-hide' to any blocks (including Magic Tabs blocks) you want to remain hidden until everything is ready. Magic Tabs will then show the hidden blocks and tabs when everything has loaded.

  • Applied in block design, 'magic-tabs-hide' hides a block when not in edit mode and is removed when tab sets are ready.
  • 'magic-tabs-hide' can also be applied in area design, so hiding an entire area while tabs are rendered and so avoiding the need to add to block design for individual tabs and their content. This can be convenient if a tab set fills an entire area.

See Hidden Blocks.

A tab set needs to be within an area

Some important points to bear in mind:

  1. Tab sets cannot go across the boundaries to an area.
  2. There must be at least 2 tabs in a set.
  3. Each tab needs to contain one or more blocks.
  4. Each layout is effectively a block containing nested concrete5 areas. You can have a complete set of tabs within a cell of a layout, or complete layout within a single tab, but you cant skew tabs in and out of layouts.

Each tab must wrap one or more blocks

Here is a simple example of sequence of blocks within an area. You can have other blocks before and after, but this sequence of wrapping what you want within each tab with Magic Tabs blocks is the essential part:

  1. Magic Tabs Block 'Tab A'
  2. One or more blocks in tab A
  3. Magic Tabs Block 'Tab B'
  4. One or more blocks in tab B
  5. Magic Tabs Block 'Tab C'
  6. One or more blocks in tab C
  7. Magic Tabs End

The above will then show as a Tabs A, B and C. Clicking each will show the associated tab content.

In most cases, if a set of tabs does not follow the above structure or is incomplete, Magic Tabs will leave it as simple headings.

Layouts give unexpected results

Each column within a layout is rendered as a psudo-area.

For users familiar with other (less advanced) tab addons that depended on layouts, this can be initially confusing because the layout based tabs of the other addons will not map directly into Magic Tabs. The blocks need to be moved so the Magic Tabs blocks and their content are organised linearly within a single page area, or a single layout cell within a page area.

A layout is effectively a block containing nested concrete5 areas.

  • You can have a complete set of tabs within a cell of a layout.
  • You can have a complete layout within a single tab.
  • You cannot skew tabs in and out of layouts.

See Tabs and Layouts.

Broken HTML can prevent tabs rendering

An html error on a page can confuse a browser about the page structure and either prevent concrete5 from completely rendering a page or confuse JavaScript on the page from selecting the correct page elements.

This can cause bigger problems than just preventing Magic Tabs from doing its stuff. Other addons can be affected and the concrete5 dashboard bar at the top of the page can be prevented from showing fully.

If a page is completely broken, you should still be able to get to the site dashboard by entering the dashboard URL directly http://www.yoursite.com/index.php/dashboard/.

Some tests to make:

  1. If you are developing custom block templates, swap to one of the supplied block templates, both for Magic Tabs and other blocks on the page.
  2. Change the page or complete site to a default theme. This is an especially important diagnostic check if you are developing a custom theme. You won't loose any work; areas that are not in the default theme are retained and will reappear when you swap back to your custom theme.

More general information can be found in The block does not work! If you are using an HTML block, consider using my free Safe HTML block template.

Your browser developer console may also be of use here; the Log tab can sometimes provide diagnostics about broken HTML.

Broken JavaScript can prevent tabs rendering

A JavaScript error on a page or in a theme can prevent other JavaScript from running. As with HTML errors, this can cause bigger problems than just preventing Magic Tabs from doing its stuff and can prevent other addons from working, interfere with the dashboard bar at the top of the page and even prevent a page from being edited.

Your browser developer console will always log JavaScript errors. This is often the quickest way to find out if a problem stems from JavaScript or from HTML.

As with HTML errors, if a page is completely broken, you should still be able to get to the dashboard by entering the dashboard URL directly http://www.yoursite.com/index.php/dashboard/ and revert the page version, change the theme or uninstall a problem addon.

You can take the same steps as with HTML errors, but first:

  1. If you have recently upgraded Magic Tabs, try refreshing the page a few times with F5 and CTL-F5. Sometimes a browser cache can take its time to load an update to a JavaScript file, so leaving it out of step with the update. This would normally sort itself out in an hour or so anyway when your browser periodically reloads the cached file, but a forced reload can help things along.
    See "Problems immediately after updating" below.
  2. If you are developing custom block templates, swap to one of the supplied block templates, both for Magic Tabs and other blocks on the page.
  3. Change the page or complete site to a default theme. This is an especially important diagnostic check if you are developing a custom theme. You won't loose any work; areas that are not in the default theme are retained and will reappear when you swap back to your custom theme.

More general information can be found in The block does not work!

Vertical Tabs or Accordions not rendering cleanly

On later current concrete5 versions, the way blocks are wrapped on full width page types can interfere with the way Magic Tabs are rendered for Vertical templates and nested accordions.

To allow this rendering problem to be corrected, Magic Tabs provides some global settings that can be adjusted to alter the way the grid box model is transformed when Magic Tabs are rendered. See Global Settings > Theme Grid.

Google Map only renders on first tab

JavaScript that creates complex display elements often takes information from the visibility or dimensions of their containing DOM element. A consequence is that if they are first rendered inside a DOM element that is hidden they get the wrong information and have glitches in their display. A typical example is Google Maps, where a map will not render if its canvas area is hidden, such as on a tab that is initially closed.

A similar problem can be encountered with any script based block that takes its dimensions from its visible container, including some galleries and sliders. 

The following solution delays the rendering of the block until it is visible. Developers can use this to unilaterally improve the rendering of a problematic map or other block that is heavy on JavaScript. The solution has been implemented in the core Google Maps block and some marketplace blocks.  However, not all affected third party blocks implement this, so you may need to create a block template (or remind the third party block developer that they need to update their block).


$(document).ready(function(){
  var t;
  var startWhenVisible = function (){
    if ($('#id').is(':visible')){
      window.clearInterval(t);
      initialiseWhatever();
      return true;
    } 
    return false;
  };
  if (!startWhenVisible()){
    t = window.setInterval(function(){startWhenVisible();},100);      
  }
});

In this example, initialiseWhatever() is the method that starts the JavaScript or JQuery plugin before this modification, such as initialising Google Maps. You can see this in action in the view.php for the core Google Maps block.

If the containing DOM is visible ('#id'), it is run straight away. There is no appreciable overhead or change to the way the plugin works.

If not, a polling event is started to run every 100ms (a reasonable value that many users won't even notice), and the JavaScript or jQuery started when its container becomes visible. An important part to never forget is to clear the timer when the plugin is started: window.clearInterval(t)

If the script is not using jQuery, the equivalent in pure JavaScript is:


window.onload = function() {
  var t;
  var elem;
  var startWhenVisible = function (){
    elem = document.getElementById('id');
    if (elem.offsetWidth > 0 || elem.offsetHeight > 0){
      window.clearInterval(t);
      initialiseWhatever();
      return true;
    } 
    return false;
  };   
  if (!startWhenVisible()){
    t = window.setInterval(function(){startWhenVisible();},100);      
  }
}

Smooth Scroll hijacks tab clicks

If a theme or addon provides smooth scrolling, they typically initialise a jQuery plugin to work with all #anchor links on a page, or at least all #anchor links in the Main area of a page.

For example, a smooth scroller called scrollSmoothly() could be initialised with:

$('a[href*=#]:not([href=#])').scrollSmoothly()

Trouble is, such a zealous approach to smooth scrolling will catch other uses of #anchor links that would be better left alone, such as Magic Tabs. The solution is to restrict the links the smooth scroller is applied to:

$('a[href*=#]:not([href^=#jl_magic_tabs]):not([href=#])').scrollSmoothly()

Now the smooth scrolling jQuery plugin has been configured to ignore any Magic Tabs #anchors, and Magic Tabs is able to function.

Problems immediately after updating

Sometimes you could update Magic Tabs with a new version and the tabs stop working or otherwise break.

The first thing to do is read the release notes - ideally before updating. While I try to avoid incompatible updates, occasionally improved functionality, new features or a bug fix can have consequences for tab settings or custom templates.

Another possibility is cached versions of files getting out of step. So clear all the concrete5 caches and see if that helps.

Its not just the concrete5 caches that can get out of step. Sometimes a browser cache can take its time to load an update to a JavaScript or CSS file, so leaving it behind the new version of Magic Tabs. This can be particularly lingering if you have implemented Apache mod_expires. 

A browser cache will normally sort itself out in an hour or so anyway when your browser periodically reloads the cached file, but a forced reload can help things along, so try refreshing the page a few times with F5 and CTL-F5. See Broken JavaScript can prevent tabs rendering

You could also try using a cache breaker addon such as Cache Buster. From concrete5 v8.4.4 onwards, some cache breaking functionality is integrated into the concrete5 core.

Some server setups use another level of cache, often called a proxy cache or secondary cache, or a content delivery network (CDN). These can also cause the JavaScript or CSS files delivered to a browser to lag behind the current version. So after updating please remember to clear/refresh any proxy services you use to speed up your site.

Sometimes such cache lag problems can be tricked by enabling or disabling the concrete5 CSS and JavaScript Cache on the Cache Settings dashboard page. As with over-sticky browser cache, a cache breaker can also help push an updated JavaScript or CSS asset through a proxy cache.

Getting further help

If you need further help, please open a support request by clicking 'Get Help' on the addon page on concrete5.org.

Concrete 5.7 and v8+ - Get help for Magic Tabs on concrete5.7+.

Concrete 5.6 - Get help for Magic Tabs on concrete5.6.

 

Further documentation

There is much more you can do with Magic Tabs. Have a look through these pages for examples, ideas and detailed documentation.

This Example

This example uses a set of tabs with the Bootstrap 3 Themes only template with transitions set slide up/down at a 400ms speed.

The Accordion responsive threshold is set to 10,000px so the tab set will always render as an accordion.

The various jumps and links between tabs are made using Jump and Linking to Specific Tabs.

Magic Tabs documentation

To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs. If you have the Buttons Factory Pro addon, you can use…