Problem with blank screen at bottom of parallax webpage

JavaScript
1

Hi there - I’m new here, please forgive me if I’ve posted this in the wrong place!

I am definitely a CSS amateur and I’ve been making a portfolio site over the past week using a parallax setup given to me by a friend. So far I haven’t had many problems, but I’ve found that the final section at the bottom of my page (“Contact details”) has a glitch of some sort.

Basically when you try to scroll down from the “Contact details” section, the screen goes blank. I suspect that this is something to do with a height property in my CSS file but I cannot find it! There were previously some extra sections with Lorem ipsum filler text below the “Contact details” section, which I deleted - but I think in doing so they have somehow retained their height at the bottom of the page.

Hope that makes some sense. The whole lot is (temporarily) freely hosted at:
barneyrow.site90.net - sorry for the advert at the start.
I’ve also zipped it and put it on Google Drive if that helps:
https://drive.google.com/file/d/0B_4sUc1HVZyuZENZZUpzU1BPSEE/edit?usp=sharing

Any help hugely appreciated, even if just some pointers.
Thank you so much in advance!

2

Hi,

The height of the page is controlled by the inline height that the JS is writing into this element:


<!-- this is to make the page's vertical scrollbar appear the correct height -->
	<div style="height: [B]6423.13px;[/B]" id="mock-scroller"></div>

That height is wrong and doesn’t match your content height. This would suggest that this is a JS problem or that you removed something that the JS is taking into account.

I’ll move this thread to the JS forum as I can’t see anything easily obvious and hopefully one of the JS experts will cast their eye over this and see if they can spot anything.

3

Hi Paul,

Thanks so much for your reply, I posted in 7 forums and you are the only one who got back to me. I really appreciate the help.
I’ve found a temporary workaround by adding more content to the site so that it makes back that extra height which seemed to be causing the problem. It’s a bit backwards, so if the JS people do find a solution that would be great, but it’s not the end of the world if not.

Thanks again for taking time out of your day to help me. Have a great week!

4

Hopefully @Pullo or one of the other JS experts will have a chance to have a look and see if they can pinpoint the cause :slight_smile:

5

Hi,

My first guess would be similar to that of Paul - namely that you have removed something that the JS is relying on.

The value that is causing a problem is being calculated here (line 263 in parallax.js):

iPageHeight = Math.max( iPageHeight, ++$sections.last().data().iBottom );
$scroller.css( 'height', ( iMaxHeight = iPageHeight ) + iWindowHeight );

Could you upload the original setup that your friend gave you (to Google Drive), so that we can compare the versions and see if there are any discrepancies.