Results 1 to 2 of 2

Thread: Ajax Tabs Content, changing content causes div to empty shortly

  1. #1
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default 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

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

  3. The Following User Says Thank You to codeexploiter For This Useful Post:

    MJJ (12-08-2009)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •