Ajax Tabs Content, changing content causes div to empty shortly

1) Script Title: Ajax Tabs Content

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

3) Describe problem: If the content of a DIV is changed (by clicking on a Tab) you see the div go empty and show 'Requesting content...' + loading.gif. I would much like the content to change without anything happening in between.

I know how to change the 'Requesting content...' tekst to nothing in the .js, but I dont know how to keep the div from emptying alltogether.

I use content of different lenghts and I want the height of the DIV to change accordinly. I the DIV empties the height becomes 0px with means everything below the div goes up for a milisecond before it goes down again when the new content loads.

(min-height in CSS doesn't fix the problem really)

Thanks

MJJ

If you don't want to remove the tab content while the ajax call is taking place, you need to modify ajaxtabs.js before you include it in your page like the following manner (highlighted the line that I have commented):

Code:

---

ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){
        var divId=tabinstance.contentdivid        document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"
        if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
                document.getElementById(divId).innerHTML=page_request.responseText
                ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)
        }
}

---

As far as your second query is concerned the idea is to find the scrollHeight of the tab's content element in which you have loaded the content now and set the element's height as its scrollHeight explicitly. This can be achieved in the following manner:

Code:

---

instance.onajaxpageload=function(pageurl){
        var tabContentDivElement = document.getElementById(divId);
        if(typeof tabContentDivElement === "object"){
                tabContentDivElement.style.height = tabContentDivElement.scrollHeight + "px";
        }
}

---

This is a custom event supported by this script. Check the docs for more details about this event.

The important thing regarding this code is I have used a generic code the object name "instance" should be replace with your own ajaxtab object name. Like that "divId" should be replaced with the correct ID value of the div element.

Hope this helps.