Canvas Support

Space created after ajax load (increasing size of an above section)

8 replies · opened Mar 5, 2017

WWebink74Mar 5, 2017

Hello,

On a parallax image, there is a gap appearing when loading an ajax element or modifying the height of an above section after the page has loaded. I think it is because the background-position-y of the background-image isn't refreshed, so it doesn't take into account the new value.
Where can I modify it?

You can easily reproduce it going to this page : Demo sections.php, scrolling to the last section "Section with Dark Parallax Background" and replacing the html of the above div "Section with a flat background color" to make its height bigger for instance with ``. Then you will see an offset appearing at the bottom of the parallax section. I have attached a screenshot showing it.

Thank you

WWebink74Mar 5, 2017

With the allowed file size

WWebink74Mar 20, 2017

I really need you to help on that point as it is a very common issue...

SSemicolon WebSTAFFMar 27, 2017

Hello,

Consider using the following API Code inside the AJAX success function() to reset the Parallax Positions: 

SEMICOLON.widget.parallax();

This will definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WWebink74Mar 27, 2017

Which AJAX success function() are you talking about?

WWebink74Apr 12, 2017

Sorry for being insistant but I don't know which AJAX success function your are talking about..

SSemicolon WebSTAFFApr 15, 2017

Hello,

You mentioned that you are attempting to change the Height of the Section using AJAX/jQuery which is causing this issue. So whenever you are using AJAX/jQuery, there will be a Callback Function associated with this. You will need to paste the above JS Function in that Callback Function.

This should definitely fix your issue related to the Parallax Position. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WWebink74Apr 19, 2017

Ok I understand so I placed it in the different callbacks of the portfolio function (in functions.js) but it is worst.
So in order to be concrete, where should I place the API code SEMICOLON.widget.parallax(); to refresh the background image position of a testimonials section which is below an ajax portfolio section (and where the BG image position will depends of the new height of each ajax loaded items) ?

SSemicolon WebSTAFFApr 23, 2017

Hello,

Okay we have worked on this quiet a bit and what works for us is the following:

  • Find the following code in the js/functions.js File:
$.stellar({
	horizontalScrolling: false,
	verticalOffset: 150
});

and replace it with: 

$.stellar({
	horizontalScrolling: false,
	verticalOffset: 150,
	responsive: true
});
  • And now instead of using the SEMICOLON.widget.parallax(); Function, simply use jQuery(window).trigger( "resize" );

This should definitely work fine as it appears to be working for us. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard