Parrallax suffix in Mainbody position

Since I've updated to Quark 1.1, the parallax background is positioning roughly 50% higher causing to show an empty space 50% of the horizontal module space. This happens on both Firefox, Chrome and IE with 1280px and 1440 screen width. large screen of 1800px the background sits properly.

On the 1800px width, on the bottom positions, the images are 30% too large overflowing to the right.

Hello,

I suppose that you are talking about an issue which appears only if you resize your browser window. Please try to replace in the js/gk.scripts.js file the following code:

Code: Select all

jQuery(window).resize(function() {
         
         jQuery(parallax_containers).each(function(i, container) {
            container = jQuery(container);
            parallax_heights.push(container.outerHeight());
            parallax_tops.push(container.offset().top);
         });
      });

to:

Code: Select all

jQuery(window).resize(function() {
         parallax_heights = [];
         parallax_tops = [];
         
         jQuery(parallax_containers).each(function(i, container) {
            container = jQuery(container);
            parallax_heights.push(container.outerHeight());
            parallax_tops.push(container.offset().top);
         });
      });

yep that fixed it! extra large screen with 1800px plus is still 30% too large. That's intentional I suppose?

Yes, parallax images are bigger by 30% to create the parallax layer effect.

the parallax background in the mainbody is not showing correctly on portrait ipad size. it it sitting very high up. it appears the parallax script in the mainbody position is treating the very top of the browser as the position. Thus its showing the bottom of the picture only. I've attached screenshot so you can see the elbow on the photo is showing in middle of the module instead of the bottom.

Parallax backgrounds in modules embedded in the gktab module does not resize on any device, viewports or browsers. As the viewport shrinks, and refreshed, it remains the same original 130% size. so on iphones and tablets, you only see a small portion of the background.

So after futher investigation, I've discovered that the parallax script is loaded and it does not fit well in the portrait small tablet viewports. However in landscape small tablet viewports the parallax works well and fits properly. To compensate the vertical layout on the portrait viewport it is necessary to either add roughly 200px top margin css or adjust the absolute top position via js.

Also parallax bg is not centered. It appears to be left positioned. This is the same with extra large desktop at 1800px plus sizes. which looks off centered with a 22 inch monitor.

Please let me know what is the best way to adjust the parallax bg to fit centered on small tablet portrait and extra large desktop.

Thanks!

If you prefer old parallax style please remove from gk.scripts.js file the following code:

Code: Select all

// New parallax engine
if(jQuery(window).width() > 640) {
   jQuery(document).ready(function() {
      var parallax_containers = [];
      var parallax_heights = [];
      var parallax_tops = [];
      var window_h = jQuery(window).outerHeight();
      var parallax_progress = [];
      var parallax_layers = [];
      
      jQuery('.parallax-bg').each(function(i, parallax_wrap) {
         parallax_wrap = jQuery(parallax_wrap);
         // check the wrapper
         if(!parallax_wrap.children('.box-wrap').length) {
            parallax_wrap.html('<div class="box-wrap">' + parallax_wrap.html() + '</div>');
         }
         // don't add position: relative to the tabs content
         if(!parallax_wrap.parent().hasClass('gkTabsItem')) {
            parallax_wrap.parent().css('position', 'relative');
         }
         
         var content = parallax_wrap.children('.box-wrap');
         var parallax_layer = jQuery('<div class="parallax-bg-layer"></div>');
         parallax_layer.css('background-image', parallax_wrap.css('background-image'));
         parallax_wrap.css({
            'background-image': '',
            'z-index': '1'
         });
         parallax_layer.css({
            'width': '100%',
            'height': '130%',
            'position': 'absolute',
            'z-index': '0',
            'top': '0',
            'background-size': 'cover'
         });
         parallax_layer.appendTo(parallax_wrap.parent());
         parallax_containers.push(parallax_wrap);
      });
      
      jQuery(parallax_containers).each(function(i, container) {
         container = jQuery(container);
         
         parallax_heights.push(container.outerHeight());
         parallax_tops.push(container.offset().top);
         parallax_layers.push(jQuery(container.parent().find('.parallax-bg-layer')));
      });
      
      jQuery(window).resize(function() {
         jQuery(parallax_containers).each(function(i, container) {
            container = jQuery(container);
            parallax_heights.push(container.outerHeight());
            parallax_tops.push(container.offset().top);
         });
      });
      
      jQuery(window).scroll(function() {
         var scroll = jQuery(document).scrollTop();
         
         jQuery(parallax_tops).each(function(i, top) {
            if(
               scroll >= top - window_h &&
               scroll <= top + parallax_heights[i]
            ) {
               var progress = (scroll - (top + window_h)) / (top + parallax_heights[i]);
               jQuery(parallax_layers[i]).css('top', parallax_heights[i] * progress + 'px');
            }
         });
      });
      
      var scroll = jQuery(document).scrollTop();
      
      jQuery(parallax_tops).each(function(i, top) {
         if(
            scroll >= top - window_h &&
            scroll <= top + parallax_heights[i]
         ) {
            var progress = (scroll - (top + window_h)) / (top + parallax_heights[i]);
            jQuery(parallax_layers[i]).css('top', parallax_heights[i] * progress + 'px');
         }
      });
   });
}

I like them both, its just the new parallax version of has a couple of limitations as I've noted above.

Thanks for the hint, landairsea.
I just added in the gk.scripts.js at the section parallax_layer.css 'margin-top': '200px', and 'background-position': 'center', and now it looks like, that it works fine for me.

Code: Select all

// New parallax engine
if(jQuery(window).width() > 640) {
    jQuery(document).ready(function() {
                           var parallax_containers = [];
                           var parallax_heights = [];
                           var parallax_tops = [];
                           var window_h = jQuery(window).outerHeight();
                           var parallax_progress = [];
                           var parallax_layers = [];
                           
                           jQuery('.parallax-bg').each(function(i, parallax_wrap) {
                                                       parallax_wrap = jQuery(parallax_wrap);
                                                       // check the wrapper
                                                       if(!parallax_wrap.children('.box-wrap').length) {
                                                       parallax_wrap.html('<div class="box-wrap">' + parallax_wrap.html() + '</div>');
                                                       }
                                                       // don't add position: relative to the tabs content
                                                       if(!parallax_wrap.parent().hasClass('gkTabsItem')) {
                                                       parallax_wrap.parent().css('position', 'relative');
                                                       }
                                                       
                                                       var content = parallax_wrap.children('.box-wrap');
                                                       var parallax_layer = jQuery('<div class="parallax-bg-layer"></div>');
                                                       parallax_layer.css('background-image', parallax_wrap.css('background-image'));
                                                       parallax_wrap.css({
                                                                         'background-image': '',
                                                                         'z-index': '1'
                                                                         });
                                                       parallax_layer.css({
                                                                          'width': '100%',
                                                                          'height': '130%',
                                                                          'position': 'absolute',
                                                                          'z-index': '0',
                                                                          'margin-top': '200px',
                                                                          'background-position': 'center',
                                                                          'top': '0',
                                                                          'background-size': 'cover'
                                                                          });
                                                       parallax_layer.appendTo(parallax_wrap.parent());
                                                       parallax_containers.push(parallax_wrap);
                                                       });
                           
                           jQuery(parallax_containers).each(function(i, container) {
                                                            container = jQuery(container);
                                                           
                                                            parallax_heights.push(container.outerHeight());
                                                            parallax_tops.push(container.offset().top);
                                                            parallax_layers.push(jQuery(container.parent().find('.parallax-bg-layer')));
                                                            });
                           
                           jQuery(window).resize(function() {
                                                 jQuery(parallax_containers).each(function(i, container) {
                                                                                  container = jQuery(container);
                                                                                  parallax_heights.push(container.outerHeight());
                                                                                  parallax_tops.push(container.offset().top);
                                                                                  });
                                                 });
                           
                           jQuery(window).scroll(function() {
                                                 var scroll = jQuery(document).scrollTop();
                                                 
                                                 jQuery(parallax_tops).each(function(i, top) {
                                                                            if(
                                                                               scroll >= top - window_h &&
                                                                               scroll <= top + parallax_heights[i]
                                                                               ) {
                                                                            var progress = (scroll - (top + window_h)) / (top + parallax_heights[i]);
                                                                            jQuery(parallax_layers[i]).css('top', parallax_heights[i] * progress + 'px');
                                                                            }
                                                                            });
                                                 });
                           
                           var scroll = jQuery(document).scrollTop();
                           
                           jQuery(parallax_tops).each(function(i, top) {
                                                      if(
                                                         scroll >= top - window_h &&
                                                         scroll <= top + parallax_heights[i]
                                                         ) {
                                                      var progress = (scroll - (top + window_h)) / (top + parallax_heights[i]);
                                                      jQuery(parallax_layers[i]).css('top', parallax_heights[i] * progress + 'px');
                                                      }
                                                      });
                           });
}


P.S. The only thing ist, that it seems to be, that with the margin-top: 200 px, the scrolling of the parallax-bg doesn't run so smooth, but I can live with that.