I need to fade in initially hidden divs which are hidden with display:none. When they are faded in, I need the display to be "inline-block" not "block" so they can display inline with each other rather than drop below each other. Is this possible?
.sectionBlock{
width:163px;
height: 261px;
padding:5px 5px;
position: relative;
/*display: inline-block;*/
display: none;
overflow: hidden;
margin: 0 6px 11px 6px;
}
.
...
$('.sectionBlock').fadeIn('slow');
...
Try using .fadeTo() instead. As far as I'm aware, that doesn't affect the display property.
try this:
.sectionBlock {
opacity: 0;
}
$('.sectionBlock').animate({'display': 'inline-block', 'opacity': '1'}, 'slow');
alternatively you can float the divs:
.sectionBlock {
float: left
}
I went for a different way of thinking about this. I am now outputting all the sectionBlocks into a hidden div and appending them to the container and fading the container in. Works perfectly.
$('.sectionBlock').clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').fadeIn('slow');
I am cloning them because I am paging them and need to reuse them after emptying the container. If anyone is interested, here is my full code. Far from optimal right now but it does the trick:
//work out how many section blocks we have
var numberOfElements = $('.sectionBlock').length; //total number of section blocks
var maxNumberPerPage = 8; //maximum number of blocks per 1 page layout
var maxNumberFL = 7; //maximum number of blocks on the first and last pages
var maxNumberMid = 6; //maximum number of blocks on the mid pages
var virtualPage = 1; //set the start page to 1
//work out the total number of pages
var totalPages = 1;
if (numberOfElements <= maxNumberPerPage){
//we leave it set to 1
} else if (numberOfElements <= (maxNumberFL*2)){
totalPages = 2;
} else {
totalPages = 2;
additionalElements = numberOfElements - (maxNumberFL*2); //because we have 14 for the first and last pages
additionalPages = (parseInt(additionalElements/maxNumberMid)+1);
totalPages = totalPages + additionalPages;
}
var nextButton = '<div class="sectionBlock" id="nextButton">Next >></div>'
var prevButton = '<div class="sectionBlock" id="prevButton"><< Previous</div>'
if (numberOfElements <= maxNumberPerPage){
//1 page
$('.sectionBlock').clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').fadeIn('slow');
} else {
//we have extra pages so we only show [maxNumberFL] on the page and append the next button
$('.sectionBlock:lt('+maxNumberFL+')').clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').append(nextButton);
$('.sectionBlockWrapper').fadeIn('slow');
}
$('#nextButton').live('click', function(){
$('.sectionBlockWrapper').fadeOut('slow', function(){
$('.sectionBlockWrapper').empty();
virtualPage = virtualPage + 1;
if (numberOfElements > (maxNumberFL*2)){
if (virtualPage == totalPages){
//this is the last page of a multi page
var startAt = parseInt((maxNumberMid * virtualPage) -4);
var endAt = startAt + maxNumberMid;
$('.sectionBlock').slice(startAt-1,9999).clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').prepend(prevButton);
$('.sectionBlockWrapper').fadeIn('slow');
} else {
//this is a mid page of a multi page
var startAt = parseInt((maxNumberMid * virtualPage) -4);
var endAt = startAt + maxNumberMid;
$('.sectionBlock').slice(startAt-1,endAt-1).clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').prepend(prevButton);
$('.sectionBlockWrapper').append(nextButton);
$('.sectionBlockWrapper').fadeIn('slow');
}
} else {
//this is the second and last page
$('.sectionBlock').slice(maxNumberFL, maxNumberFL*virtualPage).clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').prepend(prevButton);
$('.sectionBlockWrapper').fadeIn('slow');
}
});
});
$('#prevButton').live('click', function(){
$('.sectionBlockWrapper').fadeOut('slow', function(){
$('.sectionBlockWrapper').empty();
virtualPage = virtualPage - 1;
if (numberOfElements > (maxNumberFL*2)){
if (virtualPage == 1){
//this is the first page of a multi page
var startAt = parseInt((maxNumberMid * virtualPage) -4);
var endAt = startAt + maxNumberMid;
$('.sectionBlock').slice(0,maxNumberFL).clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').append(nextButton);
$('.sectionBlockWrapper').fadeIn('slow');
} else {
//this is a mid page of a multi page
var startAt = parseInt((maxNumberMid * virtualPage) -4);
var endAt = startAt + maxNumberMid;
$('.sectionBlock').slice(startAt-1,endAt-1).clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').prepend(prevButton);
$('.sectionBlockWrapper').append(nextButton);
$('.sectionBlockWrapper').fadeIn('slow');
}
} else {
//this is the first page
$('.sectionBlock').slice(0, maxNumberFL).clone().appendTo($('.sectionBlockWrapper'));
$('.sectionBlockWrapper').append(nextButton);
$('.sectionBlockWrapper').fadeIn('slow');
}
});
});