Ajax Tabs Content auto width

[gordonlips]

1) Script Title: Ajax Tabs Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem: I have 2 questions.

The content div area automatically gets as tall as it's content, however the width is static set at:

<div id="countrydivcontainer" style="border:1px solid gray; width:400px; margin-bottom: 1em; padding: 10px">

Is it possible to make the div the size of the content? For example load in an html page that has a div with a width of 300px, that countrydivcontainer becomes 300px wide, however another page loaded in would contain a 800px wide div, and the countrydivcontainer would expand. Now I'd have to set it at 800px, and that 300px page will leave a big white gap.

The second question, and I know this is far more complicated, is it easy to implement an auto-refresh at an interval? For example I'd want to load in a page in one of the tabs and have the page fetched every 5 seconds.

I ask these questions hoping they are child's play to an experienced JS coder, if not I understand, if so any help would be greatly appreciated.

[ddadmin]

For 1), what happens if you simply don't define an explicit width for the content container? ie:

<div id="countrydivcontainer" style="border:1px solid gray; margin-bottom: 1em; padding: 10px">

For 2), you might try adding some code that dynamically selects a tab every x seconds. Each time the tab is selected, the script should fetch its contents again, essentially refreshing it. Given the below sample Ajax Tabs Content:

<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer" id="favorite">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="countrycontainer">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

setInterval(function(){countries.expandit(2)}, 5000)

</script>

You might add to it the code in red above to say select the 3rd tab every 5 seconds.

[gordonlips]

thanks for replying

with no defined width, it becomes 100% of the page


as far as selecting a tab at interval, that will work, but can it be set to only do that when that tab was selected in the first place? Like when I have tab 1 selected, select it every 5 seconds, however if tab 2 is selected don't do the refresh

[gordonlips]

I found a work around using a separate script that updates a specified div, then I load in a page with the div on it and it gets updated. I had to also include the server side code in the div because it fails to initialize, but the 5 second interval does work. So when I click the tab with changing content it calls upon a page with the div in it, and that div has the asp code in it. I also have the asp code in a different file that the ajax refresher reads and populates the div with- if I didn't include the initial code there would be a 5 second delay before anything displayed. Weird work around and messy, but it's fast and looks great.

[gordonlips]

still haven't found a solution for the auto-width though

[ddadmin]

This looks more like just a CSS issue. What about changing the content container from the default DIV tag to a SPAN instead? ie:

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<span id="countrydivcontainer">
This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.
</span>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

If that doesn't work, another option is to set the DIV container to position:absolute; which causes a DIV's width to become elastic based on the content's width inside.

[gordonlips]

neither worked well

There's something I forgot to mention- I know the width I want for the different tabs. Essentially the problem is that one tab contains a list that displays well at 400px wide. The other tab contains an iframe with a chat room that needs to be at least 800px wide. The current "solution" is to set the width to 800px, but that means if you have the window 400px wide, you'd have to scroll over to read the 400px text which is ugly. Provided 90% of users have atleast 800px wide resolution, it still bothers me and looks kinda dumb having this div that's twice the size of the content. Is there a way to make different tabs have different widths?

[ddadmin]

In that case you can just add an onClick event handler inside each of the tab's LI element that when clicked on changes the content container's width to the desired width. For example:

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li onClick="document.getElementById('countrydivcontainer').style.width='500px'"><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li onClick="document.getElementById('countrydivcontainer').style.width='800px'"><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div id="countrydivcontainer" style="background:yellow">
This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>