using bootstrap accordion above parallax without breaking

[shanDB]

I'm struggling with this problem at my website:

http://test.derringer.com.au/services/

I have a bootstrap accordion directly above my parallax window. Opening the accordion tabs is messing with the parallax.

Reading through the various issues, I understand why it's happening (parallax.js creates an absolute positioned element behind everything) but I'm really confused on how to solve the issue (my javascript just isn't as strong as I would like).

I vaguely know I need to implement a trigger/resize but just can't find a solution that works, or know how to implement it properly.

Any help is much appreciated.

[ghost]

Hey, although it may not be directly related, the same issue happens when using jQuery UI Accordion.

What happens is the page loads, as fine, with the parallax setting the .parallax-window div fine. However, when the accordion tabs are activated and the height of the component changes, the absolute position styling for the parallax window remains the same, causing the accordion content to overlay.

So, if possible, and I don't know how this can be 'fixed', but it would be really useful. As it is at th emoment, I have to completely disable parallax whilst I Try and find a way to trigger a resize event everytime the accordion is finished.

So as a quick example in my case, I was able to do this by using trigger('resize') whenever the jQuery UI Accordion has finished it's state change. This may be helpful to you?

$('#procedure-accordion').on('accordionactivate', function(event, ui) {
    $(window).trigger('resize');
});

PS: #procedure-accordion is the element I originally used to run the function:

$('#procedure-accordion').accordion(...);

PPS: Your link is broken.

[d9k]

:grinning: I solved similar problem with binding delayed resize event to mouse click

  function hotResizeParallax() {
    console.log('forcing hotResizeParallax');
    $(window).trigger('resize.px.parallax');
  }

  var delayedHotResizeParallax = _.debounce(hotResizeParallax, 600);

  $(document).on('click', function() {
    delayedHotResizeParallax();
  });