Tab switch doesn't load content

Question

I'm using Squarespace to create a tabview with three tabs. Each one contains a Squarespace block, which loads some content from different blogs. The only problem is, the blocks that are hidden act incorrectly when the page resizes. The currently visible block works fine, and resizes as it should, but then when I click on the others, they're all funky and sized improperly.

Here is my tab code:

window.onload=function() {
  // get tab container
  var container = document.getElementById("content_3");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","active");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tab-page");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}
// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tab_" + current).style.display="none";
  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","active");
  document.getElementById("tab_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);

  Y.all('img[data-src]' ).each(function(img) {
    ImageLoader.load(img);
  });

}

I thought that an event on window.resize could fix it, or Squarespace's ImageLoader function (that's the YUI at the bottom, has no effect though), but I've had no luck. The live site is at fbc-monterey.squarespace.com

Answer 1

My answer laid in using radio-controlled web design (source) instead of Javascript. The parent container must have overflow:hidden and the elements are positioned absolutely with a bottom:-600px; value. This way, elements are not moved to the left and right and are technically still within the page width, so on resize there is no problem. Also, we can use visibility:hidden; instead of display:block; which allows the Squarespace blocks to adjust to the page width as we resize the browser window.

The result can be seen at https://fbc-monterey.squarespace.com/