Parallax background not resizing

Question

I'm using bootstrap's left navigation on my page: https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

With a combination of parallax js: http://pixelcog.github.io/parallax.js/

When I toggle the navigation, the content gets pushed to the right, and that is good, but the parallax image doesn't. It stays in place, making a huge white gap between parallax background and content that was pushed to the right.

The parallax background gets updated when I resize the window, but not when I toggle the navigation menu.

How to fix this?

EDIT:

Here's an example on codepen: http://codepen.io/anon/pen/wWVJEX

When you toggle the navigation, the content moves but the parallax image doesn't. If you try to resize the window or inspect element (which would resize the window), the parallax will be resized also.

$(document).ready(function() {
  $('#about-us-image').parallax({
    imageSrc: 'https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png',
    speed: 0.4
  });
});

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

#about-us-image {
  height: 628px;
}

.about-us {
  background: #000;
  color: #fff;
  padding: 15px;
}

.col-md-6 {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js"></script>

<div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
          <div class="container">
  <div class="row">
    <div class="col-md-6">
      <div id="about-us-image"></div>
    </div>
    <div class="col-md-6">
      <div class="about-us">
        <h3>About us</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <br>
        <p>
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis
          iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
          architecto beatae vitae dicta sunt explicabo.
        </p>
        <br>
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
      </div>
    </div>
  </div>
</div>
        </div>
  

    </div>

can you post a JSFiddle of your code?

mmmoustache
– mmmoustache

2016-08-27 15:21:40 +00:00
Commented Aug 27, 2016 at 15:21 — mmmoustache
– mmmoustache, Commented Aug 27, 2016 at 15:21
updated the question

busuu
– busuu

2016-08-27 16:20:52 +00:00
Commented Aug 27, 2016 at 16:20 — busuu
– busuu, Commented Aug 27, 2016 at 16:20

mmmoustache · Accepted Answer · 2016-08-27 17:23:28Z

1

According to the parallax.js docs:

Also, keep in mind that once initialized, the parallax plugin presumes a fixed page layout unless it encounters a scroll or resize event. If you have a dynamic page in which another javascript method may alter the DOM, you must manually refresh the parallax effect with the following commands:

jQuery(window).trigger('resize').trigger('scroll');

So if you add in this line in your #menu-toggle click event, this should refresh the parallax container:

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");

  setTimeout(function(){
      jQuery(window).trigger('resize').trigger('scroll');
  }, 500);

});

I've also wrapped the line in a timeout, so that the parallax plugin refreshes after the navigation has already resized, otherwise you'll end up with it being positioning incorrectly.

EDIT:

in response to your comment, you can add some css to make the transition a bit smoother. Try something like this:

.parallax-mirror {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

edited Aug 27, 2016 at 17:23

answered Aug 27, 2016 at 16:35

mmmoustache

2,3237 gold badges44 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

busuu Over a year ago

that worked! however, is it possible to make it a smooth effect, because now it kinda jumps suddenly from the old state to a new one?

busuu Over a year ago

that also worked, but when I scroll now the parallax image delays a bit - goes off content. also I was thinking if it's possible to make it smoother - to make it resize as the navigation is changing the size, not after the navigation changed the size?

Sumon Tito · Accepted Answer · 2017-04-18 17:41:35Z

0

Just add following code to end of your parallax.js

document.getElementsByTagName("body")[0].onresize = function() {
   setTimeout(function(){
        jQuery(window).trigger('resize').trigger('scroll');
}, 100);};

answered Apr 18, 2017 at 17:41

Sumon Tito

11510 bronze badges

Collectives™ on Stack Overflow

Parallax background not resizing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related