[shopgeometry]

My question:

I’m trying to implement http://themergency.com/footable/ with your theme.
[CHECK YOUR EMAIL FOR MY LINK…….]

Everything is working fine except it seems my tables (located on the WINE page)
are not working correctly as they are not visible when they are
initialized. I need to alter how the pages is being generated to call footable after the page has been shown.
But I can’t seem to figure out where that is taking place.

The normal header script is:

$(function() {
$(‘table’).footable();
});

Where would I build that into the page generation?

[shopgeometry]

It needs to function exactly how you have the google maps loading on .page.active

[ahmetsali]

Hi, you can try to reinitialize that $(‘table’).footable(); function call just before the closing bracket of setActivePage() function in main.js between line 74 – 125.

        // CHANGE PAGE
	function setActivePage() {
            
            ...

            $(‘table’).footable();    // line: 120
       }

[shopgeometry]

$(‘html’).removeClass(‘no-overflow’).addClass(‘safe-mod’);

setActivePage();
$.address.change(function() {
setActivePage();
$(‘table’).footable();
}

});

}

i’ve probably screwed up this syntax.
is this right?

[ahmetsali]

You have an extra closing bracket in your code;

$('html').removeClass('no-overflow').addClass('safe-mod');	
		
		setActivePage();
		$.address.change(function() {
			setActivePage();
			$(‘table’).footable();
			}  // ***remove this line
			
			});
		
	}

also you have inserted $(‘table’).footable(); code snippet in line: 69 in main.js. You may need to insert it just before the closing bracket in line: 131, in order to work prorperly.

[shopgeometry]

While putting that code in both the spot you pasted and before line 131 triggers the event to happen, it’s still occurring before the page is loaded.

It needs to function like how you fixed the google map on the contact page. If you don’t load the map after the page is loaded, the location pin and center point of the map wouldn’t be right.

I’m thinking it might need something similar to:

if($(‘.page.active .map iframe’).length) {
var map = $(‘.page.active .map’).html();
$(‘page.active .map’).empty();
setTimeout(function() { $(‘.page.active .map’).html(map); }, 100);
}

but I havent quite nailed it. Thoughts?

[ahmetsali]

I just checked your site again, when i resize the browser below 768px, table expand script is working as it should as i see it now.

[shopgeometry]

If you refresh the page while you’re on the “wine” page everything works fine.

But if you load the site at any other page (most people arriving at the welcome page first) and then click over to wine, you’ll see that it wasn’t able to calculate the correct size of the page and shows the mobile version.

If at this point you grab the window and resize it the tiniest bit up or down, the desktop formatting then snaps into place.

Which is why I need to have the event load after the the active page has loaded to its final dimensions.

[ahmetsali]

I see, but when i look at the source code, in main.js you have placed $('table').footable(); snippet at line:69, you need to move that code snippet about line:120 to make sure it is being called after page has been shown. Also you can try to call the $('table').footable(); function with some delay, like this;

setTimeout(function() { $('table').footable(); }, 500);