Okay
  Public Ticket #1002743
phone view doesn't show all work items
Closed
  •  45
    Mats replied

    Hello Sam,

    Glad to be of service! Sorry again for the inconvenience.

    Kind regards

  • Samantha replied

    Hi Mats,

    Thanks for the detailed instructions here!  Fixed the js and CSS in my child theme, and all four portfolio items appear now.  

    Best,
    Sam

  •  45
    Mats replied

    Hello Samantha,

    Yes there seems to be an issue with the trigger. It's hard for me to test though since it works on all devices available to me (iPhone, iPad and a couple of macbooks with different screen resolutions).

    The script that controls the animation is located inside 'js/minima.js' (the dev version is located inside 'js/dev/minima.js').

        // FadeIn images on scroll
        function minimaFadeScroll() {
            $('.work-item, .blog-item').each( function(i){  
                var top_of_object = $(this).offset().top + ( $(this).outerHeight() / 4 );
                var bottom_of_window = $(window).scrollTop() + $(window).height();   
                if( bottom_of_window > top_of_object ){
                    $(this).addClass('fadeInUp');     
                }    
            }); 
        }

    This is the code that fades in the first two images:

        // Fade in the images as they load
        function minimaFadeImages() {
            $('.work-wrapper .item:first-child, .work-wrapper .item:nth-child(2), .blog-wrapper .item:first-child, .blog-wrapper .item:nth-child(2)').each(function(i) {
                var row = $(this);
                row.imagesLoaded( function() {
                    row.addClass('fadeInUp');
                });
            });
        }

    Then you'll also have to disable the CSS that hides the items by default inside style.css (stylesheet). It's the opacity: 0; part.

    .work-item, .blog-item {
        width: 50%;
        padding: 50px 60px;
        display: inline-block;
        opacity: 0;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    Kind regards

  • Samantha replied

    Hi Mats,

    Thanks for fast reply.  I'm on latest OS (10.2) and chrome version.

    The attached image shows my view after letting the site load for several minutes.  There are two hidden portfolio pieces in the white space - I can click on them but not see image/title.  It's scrolled all the way down to footer.

    I guess the scroll isn't triggered (?).  Can you show me how to fix this or where to disable the hiding of the portfolio items 3 and higher until scroll? 

    Thanks!

    Sam

    Attached files:  IMG_2963.PNG

  •  45
    Mats replied

    Hello Samantha,

    The theme works as follows: it shows the first two portfolio items & hides the rest. Then when scrolling down it fades the items in when they enter the viewport.

    I just tested this on my iPhone 6 safari mobile and google chrome and it seems to be working fine. What OS are you running? Is the chrome app the latest version? Is the site still loading while this issue arises?

    The script that is running the animation is a very simple 5 line jQuery script so this shouldn't be happening. Thanks for helping me discovering the root of this issue!

    Kind regards

  • Samantha started the conversation

    When viewing on phone, the portfolio only shows the first 2 work items (all of the others are blank, white spaces).  This can be seen in the themeforest demo when opened in Google Chrome on iphone 6 plus (not on laptop with Chrome developer tools set to this device) http://themes.playnethemes.com/?theme=minima.