AJAX Content Area

[planb]

1) Script Title: AJAX TAB CONTENT2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm


3) Describe problem:

I have 2 issues which I'm hoping someone will be able to help with.

First: I modified the CSS to create the Tab Styles I would like to have, I modified the Script to call the 'loader' from my server. I applied the code to a test page applying the instructions. The only other modification was that I changed the 'DIV' ID that homes the Tabs but I also changed the ID in the corresponding script. Theoritically, I thought it should work. The tabs are working, but the content area does not seem to work. The content will appear in the content area DIV, but the DIB itself wont expand and it acts as if it is not containing the content.

Please note, in the example page provided below, only the first Tab (selected) is linked to live content (page). The other 2 tabs are not linked to actual pages. Also, the content area contains a background image (in CSS) which seems to be working fine.


Example Location: http://adsenseproject.com/misc/ajax_mess.htm

Secondly: Anyone knows of a way to make the content slide into the content area rather than just appear..?

Thanks in advance.

[planb]

I guess this another area where AJAX fails then.

Thanks all.

[jscheuer1]

Looks fine to me, maybe just a little off. I see you are using a lot of absolute positioning. That often throws off layouts in unexpected ways.

[planb]

Thanks John.. I think the absolute positioning could be a problem, that's exactly why I did the test page in isolation from the actual page that will home the Tabs. I'll try Floating everything and see how we go. I initially thought that because the content area is an independent DIV it wouldn't matter, but I'll change the content positioning and try it again. I'll let you know.

One last thing, when you say 'it looks fine' do you mean the Content area is actually expanding with the content?

Thanks.

- Carlos.

[jscheuer1]

Well, with no border on the content area and only one example content that actually gets fetched, it is hard to tell. Both floats and absolute positioning have potential problems with that. If you don't have an element below the float that clears it, it may act as though it is absolutely positioned. With uncleared floats and with absolutely positioned elements, the element doesn't really take up any layout space. You are better off with default positioning (which is static and need not be specified) if things can work out that way. Absolute positioned elements can be 'given' layout space by placing a relatively positioned block level element like a division with set dimensions around them. This also will make the absolutely positioned element's top: and left: coords relative to the container, instead of to the page.