Robert Holzler

Slider Content Blank (Combining Sliders)

6 posts in this topic

I am combining BT Content Slider with NoNumer Tabs in order to get sliding content within a tabed content block.

The problem is that the BT Content Slider content only shows up in the first tab. I copied a BT Content Slider module (3 duplicate modules) and assigned one to each tab to rule out contet related issues.

Example URLs:

http://grapeinc.com/ams/ <== First content tab - Has conent

http://grapeinc.com/...seminarcalendar <== First content tab - Has conent

post-208475-0-42811000-1434733099_thumb.

http://grapeinc.com/...mecoursescd-mp3 <== Second content tab - blank

post-208475-0-24220300-1434733100_thumb.

http://grapeinc.com/...ecoursesdvd-mp4 <== Third content tab - blank

post-208475-0-24220300-1434733100_thumb.

Senario #2

If I turn off the BT Content Slider in Tab #1 and Tab #3, I get a blank content block in Tab #2, but the navigation arrows are there.

post-208475-0-13160900-1434733458_thumb.

One more wierd thing: in senario #2, when I inspect the content in Tab #2 with Firebug, the content suddenly appears.

Any ideas on how to resolve this?

Share this post


Link to post
Share on other sites

Hi there.

With extensions like Tabs, it is hard to make them to work correct with extensions like slider, specially responsive module.

Because responsive modules need to be calculated width when the webpage is loaded.

But when these modules are put in a tab module, exclude first tab, other tabs are hidden as you see.

So browser can't calculate width of modules in second tab and so far.

And solution is: You must delay script of tab module a bit of time.

It mean, the script of tab module run when page is loaded and script of slider is same.

We need to script of slider runs first, to make browser can get correctly width, then after a time about 500ms, we run script of tabs.

If function of the tab module is

$(document).ready(function(){

$('.tab-module').initTab();

});

We will delay it with function setTimeout like this

$(document).ready(function(){

setTimeout(function(){

$('.tab-module').initTab();

}, 500);

});

This is only example, maybe you need to ask NoNumber support team for detail.

I hope you will understand my bad reply. It is hard to understand if you don't know Javascript.

Thanks

Share this post


Link to post
Share on other sites

Ok please try other solution.

First please edit file

http://grapeinc.com/ams/media/tabs/css/style.min.css

Find this rule

.nn_tabs .tab-content > .tab-pane {

display: none;

}

and change it to

.nn_tabs .tab-content > .tab-pane {

display: block;

}

This step make all Tab Content is showed when page loaded, so the browser can calculate sliders' width.

Continue open file /ams/media/tabs/js/script.min.js

Change setTimeout function from

setTimeout(function(){nnTabs.init();},nn_tabs_init_timeout);

to

setTimeout(function(){jQuery('.nn_tabs .tab-content > .tab-pane:gt(1)').hide(); nnTabs.init();},500);

I hope it will help you.

Share this post


Link to post
Share on other sites

The provided solution did not work. Thanks for trying. I did find a workarround using iframes.

Workarround

  1. Install a blank template (no branding, just white)
  2. Create the BT Slider modules assigning them to all pages, but NO position.
  3. Place the BT Slider modules inside articles using NoNumber Modules Anywhere
  4. Create menu items (pages) using the articles from step 3 and the blank template from step 1
  5. Insert iFrame pages into the NoNumber Tabs

While it is not an ideal solution, it does work.

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now