Dynamic Page Sections


#1

Hi there,

I am working on the page http://unbouncepages.com/custom-listing-cards/, and what I am trying to do is make this section have a dynamic height that scales depending on the height of #listings-container (which scales depending on how many rows of cards there are, i.e. 1 row, 2 rows, 3 rows).

One thought was making the section the maximum height (i.e. 3 rows = 1204px), and then trying to scale the section back.

However, this leaves the .lp-positioned-content elements (i.e. text elements, images etc) remaining where they are (due to the way Unbounce builds the pages with absolutely positioned elements).
SEE REPLY (I was only allowed to paste one image)

Does anyone know how this can/could be done? Or have any suggestions?


A currently solution that I think might work but have yet to test is:

Target every individual element and section that exist below the listing card section and adjust their top positioning manually, i.e.

[Initial Height of Listings Section] - [New Height of Listings Section] = [Height Difference]

Therefore… every element and section must have their height and top reduced by [Height Difference] to “flex upwards”.



#3

It looks like I have figured this out (next step is pagination).

You can test it out here, http://unbouncepages.com/custom-listing-cards/o.html

There will be 7 objects initially in theData, and if you want to test the dynamicism of the listings section, just change the number of theData.splice(-1, 1) calls made.

To test,
a) To view 3 row height, do not include theData.splice(-1, 1)
b) To view 2 row height, include up to 3 theData.splice(-1, 1) calls
c) To view 1 row height, include at least 4 theData.splice(-1, 1) calls

Copy the code below into the console,

/* if needed theData.splice(-1, 1); */

theData.forEach(function(listing) {
  
  // Build the listing stats
  var price = listing.price;
  var baths = listing.baths;
  var beds = listing.beds;
  var sqft = listing.main_floor_area;

  // Build the listing address 
  var unitNum = listing.unit;
  var streetNum = listing.num;
  var streetName = listing.street;
  var streetType = listing.streettype;
  var area = listing.area;
  var city = listing.city;
  var slug = listing.slug;
  var province = 'BC';
  var manualAddressONE = unitNum + '-' + streetNum + ' ' + streetName + ' ' + streetType; 
  var manualAddressTWO = city + ', ' + province;

  // Build the listings cards
  $('#listings-container').append('<div id="' + slug + '" class="shortListing-outer-container"> <div class="shortListing-image-container"><img src="https://s-media-cache-ak0.pinimg.com/736x/73/de/32/73de32f9e5a0db66ec7805bb7cb3f807.jpg" /><div class="shortListing-price-container"><p>$' + price + '</p></div> </div> <div class="shortListing-stats-container"><div>' + beds +'Beds</div><div>' + baths + 'Baths</div><div>' + sqft + 'sqft</div></div> <div class="shortListing-address-container"><div>' + manualAddressONE + '</div><div>' + manualAddressTWO + '</div></div> <div class="shortListing-cta-container"><a><span class="shortListing-cta-view">VIEW NOW</span></a></div> </div>');
  
}); // theData 

/* Migrate elements up/down the page depending on how many rows of cards there are on dynamic listings section of the page
*/

// 1. Assess number of cards on page

var numCards = $('.shortListing-outer-container');
var numRows;
var pixelChange;

if (numCards.length >= 7) {
  numRows = 3;
} else if (numCards.length >= 4) {
  numRows = 2;
} else {
  numRows = 1;
}

if (numRows == 1) {
  pixelChange = 600;
} else if (numRows == 2) {
  pixelChange = 300;
} else {
  pixelChange = 0;
}

console.log(numCards.length);
console.log(numCards);
console.log(numRows);
console.log(pixelChange);

// Create array of elements below the dynamic section that need to migrate
var elementsToMove = ['#lp-pom-image-805', '#lp-pom-text-68', '#lp-pom-text-69', '#lp-pom-box-91', '#lp-pom-image-93', '#lp-pom-text-94', '#lp-pom-text-95', '#lp-pom-box-75', '#lp-pom-image-985', '#lp-pom-text-72', '#lp-pom-text-73', '#lp-pom-box-97', '#lp-pom-image-99', '#lp-pom-text-100', '#lp-pom-text-101', '#lp-pom-text-408', '#lp-pom-text-409', '#lp-pom-form-389', '#lp-pom-text-649', '#lp-pom-text-146', '#lp-pom-button-766', '#lp-pom-image-960'];

// Create array of sections that need to have their height changed
var sectionsToMove = ['#lp-pom-root', '#lp-pom-root-color-overlay', '#lp-pom-block-543'];

elementsToMove.forEach(function(ele) {
  var top = $(ele).css('top');
  var newTop = parseInt(top);
  newTop = newTop - pixelChange;
  $(ele).css('top', newTop);
});

sectionsToMove.forEach(function(sec) {
  var height = $(sec).css('height');
  var newHeight = parseInt(height);
  newHeight = newHeight - pixelChange;
  $(sec).css('height', newHeight);
});