when height of div is change through click the parallax background absolute position on page goes wrong

[karelbabor]

when height of div is change through click the parallax background absolute position on page goes wrong.

See example on bug on url below. How can i refresh paralax through jquery on a click action?

http://karmacoffee.se/ Click read more > scroll down se how the parallax background position is wrong after click

[mikegreiling]

To force a refresh of the parallax calculation you should be able to do the following:

// cause parallax to recalculate dimensions
$(window).trigger('resize.px.parallax');

[mikegreiling]

closing for now... respond if the above method does not work for you

[karelbabor]

Thank you for fast response. However the above method did not work.

$('element').click(function() {
    $(window).trigger('resize.px.parallax');
    return false;
});

[mikegreiling]

It appears the problem is that you are running a slideToggle() animation when the "read more" link is clicked. Thus, the 'resize' event gets triggered before the animation completes and nothing happens.

Instead, try adding it as a callback like so:

$(elm).slideToggle(function(){
    $(window).trigger('resize.px.parallax');
});

[karelbabor]

That worked perfect, thank you!

[nealmckinney]

this would be a good item to add to the docs.

[mikegreiling]

You are probably right, this came up again today in another issue. I will make a note to add this to the docs in the next revision.

[TomVDH]

I have followed up your instructions for a similar scneario. I have a downwards-expanding menu. However, adding your code doesn't work at all. I'm at a loss here.

[pyliakm]

I had the same problem, I used parallax.js v1.4.2 and jquery v2.1.4. I noticed, it is not the problem of parallax lib but a problem of jquery. So if you use native javascript code for calling the resize event, it works, see below:

window.dispatchEvent(new Event('resize'));

[clarkd]

If you're using Bootstrap tabs, and they're causing the page size to change, you'll need to add:

$(window).on('shown.bs.tab', function() {
        $(window).trigger('resize.px.parallax');
    });

[Julianoe]

That's exactly my problem with Bootstrap Collapsible elements.

I added the trigger('resize.px.parallax') but really it is not smooth at all. Did you find a smart way to smooth this action a bit?

[clarkd]

@Julianoe For me, the parrallax images are offscreen when the Bootstrap components expand/collapse so it isn't an issue.

[coffeeneed]

@Julianoe I'm afraid there aren't any good methods to do this, at least not one I know of. It's way to complex to fix in an easy manner and I wouldn't expect a fix either. I fixed this by setting my expandable window (just a jQuery slide() method) to the fastest possible ms and the "laggy" effect are barely noticed.

Please correct me if I'm wrong, though -- seeing this magically fixed somehow would be interesting (even though not needed for me personally).

[kieryk123]

I have the same issue. Is there another way to use parallax with bootstrap accordion panels?

[clarkd]

I had a fix for this, let me dig it out and get back to you tomorrow.

On 18 Oct 2017 10:26 pm, "Paweł Kieryk" notifications@github.com wrote:

I have the same issue. Is there another way to use parallax with bootstrap accordion panels?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/pixelcog/parallax.js/issues/23#issuecomment-337732822, or mute the thread https://github.com/notifications/unsubscribe-auth/ADng6yx08gKjm2JwjuDEmpIJsYBCCS9nks5stm0OgaJpZM4DXukL .

[kieryk123]

Okay, I will wait for it. For example, this is page where this issue occurs: http://fireart.pl/pkieryk/skyestate/kariera.html

You need to click on the yellow button on the right of the panel.

[wstoettinger]

@kieryk123 the answer of @clarkd is 5 messages above! it would be very nice of you to read the existing content before you bother other people.

[kieryk123]

@wstoettinger I fixed this, but I have a problem with smooth position changing.

[clarkd]

Ah yes, as @wstoettinger pointed out my solution is above. Does that not work for you?

I had a look at the link you posted but could not see an issue!

[kieryk123]

I have moved my website to another link. Check this out: http://fireart.pl/pkieryk/skyestate/kariera/ When you clicks on the yellow element on the right the parallax have an issue. I have tested your solution, but this is not smooth at all and looks horrible.

[shanDB]

I'm having this exact problem and still uncertain as to how I apply the fix above (I'm uncertain as to where I should apply the javascript fix detailed above, or if it is even the correct fix for my issue).

You can view the problem at my site here: http://test.derringer.com.au/services/

Opening up the various bootstrap accordion tabs unintentionally shifts the view inside the parallax window.

Any help is appreciated.

[clarkd]

@shanDB - you can just add the snippet anywhere in your JS - it binds to and triggers on the global event fired.

[shanDB]

you can just add the snippet anywhere in your JS - it binds to and triggers on the global event fired.

Thanks for the reply @clarkd - But unfortunately I'm still confused. I added the following line to the end of the parallax.js file, and nothing changed at all. (keeping in mind I'm using an instance of bootstrap 3 accordion/collapse directly above the parallax).

$(window).trigger('resize.px.parallax');

[clarkd]

You need to add the full snippet?

$(window).on('shown.bs.tab', function() {
        $(window).trigger('resize.px.parallax');
    });

[shanDB]

Once again, thank you @clarkd for your reply - But frustratingly it is still not working.

You can view the page here: http://test.derringer.com.au/services/ and inspect the JS file here (with your snippet right at the bottom): view-source:http://test.derringer.com.au/wp-content/themes/pofo-child/js/parallax.js

I'm starting to wonder if this fix is even the correct solution for my problem. As you can see with my website, ideally I need a solution that moves the image inside the parallax at the same distance as the accordion/collapse tabs when they are opened. Currently, when the accordion tabs are opened, the parallax image remains stationary and thus reveals dead white space underneath the image.

Incredibly frustrating. My client is getting anxious. If I had my way I would make all these parallax instances static background images and be done with it, but my client is really wanting the parallax.

[clarkd]

No problem. I took a quick look - you're not using tabs hence looking for the bootstrap events for tabs won't work (shown.bs.tab), instead you'll need collapse.

This works as it listens for both the shown/hidden, i.e. collapse / uncollapse events fired by Bootstrap.

$(window).on('shown.bs.collapse hidden.bs.collapse', function() {
        $(window).trigger('resize.px.parallax');
    });

Feel free to send a beer my way if that helped you out! https://giveabeer.me/02DClarke 🍺

[shanDB]

@clarkd - You are a star! It's almost there. Your fix (above) does indeed move the parallax image as needed. It's still a bit clunky though, and doesn't smoothly scroll. It would be a perfect fix if the parallax was off screen further down the page - But in my situation the parallax visibly jumps position.

However, I do thank you for your input. I notice someone else reports earlier in this thread about the lack of smooth scrolling with this solution, and your response being that it wasn't too bad for you as your parallax was off-screen at the time of the resize (which makes total sense).

I'm not sure if there is any way the clunky jumping can be resolved, So I might leave it there for now and show my client. Of course I'll eagerly watch this thread in case someone comes up with a solution - But for now, thanks for your patience in at least getting me this far.

[wstoettinger]

thanks @clarkd for your help on that issue! very much appreciated!