You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

div elements inside tabs Created Jun 16, 2009

This thread is solved

Views: 1280     Replies: 8     Last reply on monday  
You must login first before you can use this feature

stefanie

Posts: 2

Registered:
Jun 16, 2009

div elements inside tabs

Posted: Jun 16, 2009

First hello to everyone.

I'm trying to use the jQuery tabs with div elements inside the tabs. Currently I'm not getting this to work. The tabs containing div elements are empty.
I've created a test based on the simple tab example:

<div class="panes">
<div class="pages">First tab content. Tab contents are called "panes"</div>

<div class="pages">
<div class="dcontent">
<h1>Second tab content</h1>
<p>The content is empty</p>
</div>
</div>
<div class="pages">Third tab content</div>
</div>

<script>
$(function() {
$("ul.tabs").tabs("div.panes > div.pages");
});
</script>

Does someone know, how to work with div elements inside tabs?

aker

Posts: 3

Registered:
Jun 17, 2009

» div elements inside tabs

Posted: Jun 17, 2009

Reply to: div elements inside tabs, from stefanie
Having same issue,
Temporal solution: use P and avoid the div inside the tabs.

stefanie

Posts: 2

Registered:
Jun 16, 2009

» » div elements inside tabs

Posted: Jun 17, 2009

Reply to: » div elements inside tabs, from aker
Using paragraphs is not an option for me. Currently I'm thinking to build a new tab plugin, because I haven't found one using jQuery, that is fitting my needs.

Bowromir

Posts: 8

Registered:
Jun 10, 2009

» » » div elements inside tabs

Posted: Jun 17, 2009

Reply to: » » div elements inside tabs, from stefanie
I have the same problem as well.. The page tab remains empty when trying to load an external .php page which uses <divs>..

cambler

Posts: 1

Registered:
Jun 25, 2009

So this is likely it...

Posted: Jun 25, 2009

Reply to: div elements inside tabs, from stefanie
The issue seems to be that every <div> tag is set to display:none when initialized. That includes, properly, every <div> tag immediately under the <div class="panes"> tag. But it also includes all <div> tags nested inside, arbitrarily deep.

Looking at the code in tools.tabs-1.0.1.js, I note that the functions that show() and hide() only seem to work on the second-level <div> tag, setting the "display" attribute to block when showing and "none" when not. Nested <div> tags aren't touched.

So the question becomes, "what is setting nested <div> tags to display: none in the first place? Turns out that it's the CSS specific to the divs in question. The CSS line beginning with "div.panes div" has a display: none that is affecting ALL divs. Taking this line out renders all divs and also allows the initialization code to only work on the second-level div.

Your other option, of course, is to assign a class to the second-level <div> and add that class to the CSS. All further, nested <div> elements, not being a member of that class, won't pick up the display: none attribute.

I just started using this toolset yesterday and immediately ran into this, so I'm glad I could help out here.

Xeonz

Posts: 3

Registered:
Jul 1, 2009

» So this is likely it...

Posted: Jul 1, 2009

Reply to: So this is likely it..., from cambler
man this is soo stupid that it hides nested div elements by default... really a bit poor especially considering there is not mention of this shortcoming in the demo notes... wasted loads of time trying to figure wtf was going on with ajax tab pages not working properly!!!

greggo

Posts: 1

Registered:
Jul 28, 2009

Simple fix

Posted: Jul 28, 2009

Reply to: » So this is likely it..., from Xeonz
Rather than

div.panes div { display:none; etc... } for the pane styling, use

div.panes > div { display:none; etc... }

and it will only apply to the first div in a pane.

Incompl

Posts: 1

Registered:
13 days ago

» div elements inside tabs

Posted: 13 days ago

Reply to: div elements inside tabs, from stefanie
Thank you for this, this was being very annoying and took me hours to figure out.

decibel83

Posts: 1

Registered:
on monday

» » div elements inside tabs

Posted: on monday

Reply to: » div elements inside tabs, from Incompl
I tried that, but it does not work for me..
I only see the first <div>, but not all others, even if I modify the CSS styles with "div.panes > div { display:none; etc... }"

Could you help me please?