I’m trying to load in AJAX content into an empty but the div won’t resize to the size of the content being loaded. Instead it looks like overlapping the empty dive like a z-index affect.
Are there some guidelines on setting divs?
this is my set up:
My XHTML:
static content
ajax content
My CSS:
* { padding: 0; margin: 0; }
#wrap {
position: relative;
margin: 0 auto;
width: 955px;
padding: 0px;
border-left: 1px solid #BDBDBD;
border-right: 1px solid #BDBDBD;
border-bottom: 1px solid #BDBDBD;
}
#content-fill { }
#files_left_pane { float: left; height: 100%; }
#files_left_pane { float: left; height: 100%; }
This is the code that handles the AJAX:
function cabinet_tabs(){
$(“.tab_content”).hide(); //Hide all content
$(“#files_left_pane > ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
$(“#files_right_pane > .tab_content:first”).show(); //Show first tab content
//On Click Event
$(“#files_left_pane > ul.tabs li”).live(‘click’, function() {
$(“#files_left_pane > ul.tabs li”).removeClass(“active”); //Remove any “active” class
$(this).addClass(“active”); //Add “active” class to selected tab
$(“#files_right_pane > .tab_content”).hide(); //Hide all tab content
var activeTab = $(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
$(“#files_right_pane > table.zebra tr:even”).addClass(‘alt’);
// AJAX
$(‘.view-prospects’).live(‘click’, function(){
$.post(‘resources/ajax/ajax.php’, {
action : ‘prospects’,
uid : uid
}, function(data){
$(‘#files_right_pane > #prospects’).html(data);
});
});
}
