Joomla Templates Club 406,261 posts

[railer Friend railerJoin date: October 2007Posts: 236Downloads:102Uploads:9 Thanks: 17 Thanked: 24 times in 1 posts]

#185231

I’m having some difficulty with setting up the tabbed section underneath the slideshow.

First, the tutorial instructions says that the module position should be “ja-tabs”, but nothing displays when set to that. I tried just “tabs” and it shows the tabs, but they are positioned lower than in the demo.

The image height of my slideshow images is 500 pixels high. And the height setting of the JA Slideshow module is also 500 pixels.

Why are my tabs lower than in the demo. I checked and re-checked all the settings.

I have JA Slideshow version 2.5.6 installed and the site is running on J2.5.9.

One thing that is different is that I have the width of my site (template) specified at 1050px and also the slideshow width (and image size width) set to 1050px. Would that cause this problem?

It’s also very confusing that the demo “backend settings” image doc uses the JA ContentSlider module, but how would one use the HTML code mentioned in the JA Tabs plugin description in anything but a Custom HTML module?

Thanks,
Railer

[Stork11 Friend Stork11Join date: March 2011Posts: 2273Downloads:0Uploads:142 Thanks: 55 Thanked: 431 times in 393 posts]

#484410

Hello Railer,

Would you mind getting me a few screenshots for more clarifications? A picture is worth a thousand words so I shall know what you are trying to achieve.

Regards.

[railer Friend railerJoin date: October 2007Posts: 236Downloads:102Uploads:9 Thanks: 17 Thanked: 24 times in 1 posts]

#485167

Hi Stork,

There are quite a few things that seem to be incorrect.

1. Whenever I use the “ja-tabs” module position, nothing displays at all. I don’t think you need a screenshot to understand that. It only displays when I use “tabs”, but the tabs don’t overlap the slideshow module like it does in the demo.

2. In the backend setting pic I noticed in the instructions that it has this:

“Check in configuration in your site if it does not have this line “var $absolute_path by ‘your absolute path’;” you have to add its there to run.”

I definitely don’t have the “$absolute_path” in my configuration.php file. This site was migrated from 1.5 to 2.5 using SP Upgrade which does require the admin install a clean version of 2.5, so it ought to be an up to date version of configuration.php. However, when I publish a JA Content Slider module into a visible position called “tabs”, it slides the various content items — works properly. But as I mentioned above, the tabs aren’t overlapping the JA Slideshow II module.

Unless you, or someone else, can help me solve these problems, it’s looking like I’ve not choice but to install the quickstart version separately and see what the working configs are.

Btw, “ja-tabs” isn’t defined in the templateDetails.xml file as a module position.

Thanks,
Railer

[railer Friend railerJoin date: October 2007Posts: 236Downloads:102Uploads:9 Thanks: 17 Thanked: 24 times in 1 posts]

#485172

Okay, I installed the JA Orisite demo to see the settings — which, btw, brought this site close to maxing out the available storage space on the server.

Here’s what I found out…

You need to create your JA Content Slider modules first (Sport Today, Most Read, Popular in demo), assigning them to the “ja-tabs” position, as in the backend settings image. Then you need to create a Custom HTML module inserting the following code ssnippet into the text box:

{jatabs type=”modules” module=”ja-tabs” position=”top” mouseType=”click” animType=”animFade”} {/jatabs}

Assign the custom HTML module to the postion “tabs” and publish it (hide the title), and you should be good. It would help if the JA devs would publish information about this next to steps 2.6., 2.7, and 2.8 in the tutorial. As far I can see, there is nothing there explaining the need for this Custom HTML module to tie the three JA Content Slider modules together.

Hope this helps someone else.

Railer

[railer Friend railerJoin date: October 2007Posts: 236Downloads:102Uploads:9 Thanks: 17 Thanked: 24 times in 1 posts]

#485173

Here’s a new issue with the tabs css:

Only the highlighted tab has the gray background filling out the full depth of the tab. On the other tabs, the gray background color fills out the part from the top of the tab to just underneath the tab text.

Does anyone have any idea why this is happening?

Thanks,
Railer

[railer Friend railerJoin date: October 2007Posts: 236Downloads:102Uploads:9 Thanks: 17 Thanked: 24 times in 1 posts]

#485594

Here is a screenshot of the tab background depth issue…

When I rollover the second tab (News & Events), the hover state of the second tab changes to a full depth background, and the background of the first tab rises up to only half the depth of the tab (just under the baseline of the text.)

---

Attachments:

1. 

[Stork11 Friend Stork11Join date: March 2011Posts: 2273Downloads:0Uploads:142 Thanks: 55 Thanked: 431 times in 393 posts]

#485662

Hello Railer,

Please tell me what you did to cause the problem. It’ll help me diagnose problem quicker.

And can you PM me with your site information (your site URL, your site admin account) and your FTP account? So I can help you out.

BTW, please include this forum thread URL in your PM, so I can follow it.

Regards.

[railer Friend railerJoin date: October 2007Posts: 236Downloads:102Uploads:9 Thanks: 17 Thanked: 24 times in 1 posts]

#485715

HI Stork — My post dated March 3rd pretty much states what it is that I did. I just set it up in that manner, once I figured out that a custom HTML module in the tabs position controlled the other ja-tabs modules.

One thing that I noticed is that if I “inspect the element” in Chrome, and I highlight the following:

<div class=”ja-tabs-title-top” style=”height: 30px;”>

It indicates that the height value is set to 30px instead of 50px.

And in the styles pane it shows the following:

element.style {height: 30px;}

If I change the value to 50px in Chrome’s element inspector, the tab background extends downward to the correct depth, at least live my browser.

How do I edit the element.style height value for this?

I’m sending you my site info in a PM.

Thanks for your help.

Railer

[railer Friend railerJoin date: October 2007Posts: 236Downloads:102Uploads:9 Thanks: 17 Thanked: 24 times in 1 posts]

#485718

Okay, forget about the PM, mentioned above.

I’ve solved my problem, well, I’ve overridden whatever it was that was causing the tab background height problem.

I went to the following file:

/plugins/system/jatabs/jatabs/themes/ja_orisite/style.css

At around line 44 I found this class for ja-tabs-title-top, which governs the tab background:

.ja_orisite .ja-tabs-title-top {
height: 50px !important;
position: relative;
border-bottom: 1px solid #e5e6e7
background: url(pattern.gif) repeat-x left bottom #fff
}

I added in the bold face text above, “!important” to override the inline style, which if I’m not mistaken is hardcoded into the theme/template somewhere.

Hope this helps someone else encountering this problem.

It would be good to know where the hardcoded class is that is causing this issue is located. What might I have done to cause this?

Thanks for your interest Stork11.

Best,
Railer

1 user says Thank You to railer for this useful post

1. Stork11

[Author]

Posts