How to get Kendo page turn effect to work on Chrome especially Android

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 07 Apr Link to this post

    I have been unable to get the kendo page turn effect to work acceptably in chrome. The appearance is staggered and on android mobile, which I am targeting for my application, it does not appear to work at all.
    Below is plunkr http://plnkr.co/edit/aWIthiWY1UEPret8BOkT?p=preview

     

    <html>
     
    <head>
        <meta charset="utf-8">
        <title>Kendo UI Mobile Loves AngularJS</title>
        <meta http-equiv="Content-Security-Policy" content="default-src http://ajax.googleapis.com/ http://code.jquery.com/ http://demos.telerik.com/kendo-ui/ ; http://cdn.kendostatic.com/ https://static.pexels.com/ 'self'    https://localhost:44309/   https://localhost:44300/  https://caredarestorage.blob.core.windows.net/ 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src http://cdn.kendostatic.com/ 'self' 'unsafe-inline'; media-src *">
     
        <!-- the application CSS file -->
     
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-sanitize.js"></script>
        <style>
            #wrap {
                background-image: url("../content/web/fx/pageturn/book.png");
                width: 100%;
                height: 90%;
                margin: 2.5em auto 4em;
                position: relative;
            }
     
            #book {
                position: relative;
                width: 85%;
                height: 85%;
                margin: 0 auto;
                padding: 0;
                list-style-type: none;
            }
     
                #book > li {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: #fff;
                }
     
            #actions {
                overflow: hidden;
                margin: 0 auto 3em;
                width: 650px;
            }
     
            #previous, #next {
                text-decoration: none;
                text-indent: -999em;
                overflow: hidden;
                display: block;
                height: 100%;
                width: 50%;
                position: absolute;
                top: 0;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                opacity: .5;
            }
     
                #previous:hover, #next:hover {
                    opacity: 1;
                }
     
            #previous {
                background-image: url('content/css/imagesrotator/arrow-left.png');
                left: 0;
            }
     
            #next {
                background-image: url('content/css/imagesrotator/arrow-right.png');
                right: 0;
            }
     
            .first-page #previous,
            .last-page #next {
                display: none;
            }
     
            .preloadSlide * {
                -webkit-transition: none !important;
                -moz-transition: none !important;
                -ms-transition: none !important;
                -o-transition: none !important;
            }
     
            .divSection {
                display: table;
                width: 100%;
                height: 100%;
                z-index: 0;
            }
     
            .divRandomText {
                height: 100%;
                font-size: large;
                line-height: 130%;
                padding: 10% 15% 15% 15%;
                display: table-cell;
                vertical-align: middle;
                white-space: normal;
            }
     
            .divBackgroundImage {
                background-color: white;
                height: 100%;
                width: 100%;
                position: absolute;
                right: 0px;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                *z-index: -1;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=1);
            }
        </style>
    </head>
     
    <body kendo-mobile-application ng-app="sushiMobileApp">
     
     
        <kendo-mobile-view k-layout="'default'" ng-controller="indexController" k-stretch="'true'" k-on-show="show(kendoEvent)">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
     
                    Veterinary Wellness
     
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <div id="divHome">
              
                Slides {{slides.length}}
                Slide {{currentIndex}}
                <div fill-height id="divWholePageWrapper" style="height: 100%; width: 100%;  ">
     
                    <div id="wrap" class="first-page">
                        <ul id="book">
                            <li ng-repeat="slide in slides">
                                <div no-wrap="noWrapSlides" class="divWholePageNew" ng-style="{'background-image': 'url(' + slide.image + ')'}" style="height: 100%; width: 100%; background-repeat:no-repeat; background-position:center;  ">
     
                                    <div class="divSection ">
                                        <div class="divRandomText">
                                            <div style="position: relative;height:100%;background-color: white; opacity: .85;  border:2px solid gainsboro;">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <div class="circle color-1 color1-box-shadow" style="position:absolute;left:-20px;top:20px">
                                                            <p>
                                                                <div style="margin-top:-10px; font: italic 29px/32px Cambria, serif;text-shadow: black 0 1px 0;">{{slide.careCardDate | date:'d'}}</div>
                                                                <div style="margin-top:-8px;display: block;font: Georgia, serif;font-size: 12px;text-transform: uppercase;font-weight: bold;text-shadow: black 0 1px 0;">{{slide.careCardDate | date:'MMM'}}</div>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8"><h3 style="text-align:center">{{slide.careCardName}}</h3></div>
                                                    <div class="col-md-2">
     
                                                    </div>
                                                </div>
                                                <center>
                                                </center>
     
                                                <p style="text-align:center" class="cardTextNew" ng-bind-html="slide.task"> </p>
     
                                            </div>
                                        </div>
     
                                    </div>
     
                                </div>
                            </li>
                            <li class="current">
                                <div no-wrap="noWrapSlides" class="divWholePageNew" style="height: 100%; width: 100%;background-image:url(https://static.pexels.com/photos/1230/landscape-mountains-nature-sky.jpg)">
     
                                    <div class="divSection ">
                                        <div class="divRandomText">
                                            <div style="position: relative;height:100%;background-color: white; opacity: .85;  border:2px solid gainsboro;">
                                                <div class="row">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-8"><h3 style="text-align:center">Welcome</h3></div>
                                                    <div class="col-md-2">
                                                    </div>
                                                </div>
                                                <center>
                                                </center>
     
                                                <p style="text-align:center" class="cardTextNew"> Daily inspiration self care wellness message.</p>
     
                                            </div>
                                        </div>
     
                                    </div>
     
                                </div>
                            </li>
                        </ul>
     
                        <a href="#" ng-click="previous($event)" id="previous">Previous page</a>
                        <a href="#" ng-click="next($event)" id="next">Next page</a>
                    </div>
                </div>
            </div>
     
     
     
        </kendo-mobile-view>
     
        <script>
            angular.module('sushiMobileApp', ['kendo.directives', 'ngSanitize'])
                .controller('indexController', ['$scope', function ($scope) {
                    $scope.slides = [];
     
                    var slidesData = [
                        {
                            "id": 1,
                            "cardName": "Facial",
                            "cardDescription": "Schedule a facial once a month",
                            "image": "https://static.pexels.com/photos/31256/pexels-photo-31256.jpg"
                        },
                            {
                                "id": 2,
                                "cardName": "Stairs",
                                "cardDescription": "Take the stairs instead of the escalator",
                                "image": "https://static.pexels.com/photos/29280/pexels-photo-29280.jpg"
                            },
                            {
                                "id": 3,
                                "cardName": "Lunch",
                                "cardDescription": "Find time to eat lunch",
                                "image": "https://static.pexels.com/photos/4718/sky-buildings-windows-blue-sky.jpg"
                            },
                            {
                                "id": 4,
                                "cardName": "Vow",
                                "cardDescription": "Vow to eat healthy",
                                "image": "https://static.pexels.com/photos/3768/sky-sunny-clouds-cloudy.jpg"
                            },
                            {
                                "id": 5,
                                "cardName": "Walk",
                                "cardDescription": "Walk your dog for 20 minutes today",
                                "image": "https://static.pexels.com/photos/67101/pexels-photo-67101.jpeg"
                            },
                            {
                                "id": 6,
                                "cardName": "Breathe",
                                "cardDescription": "Take 10 deep breaths",
                                "image": "https://static.pexels.com/photos/1084/sky-clouds-sun-desert.jpg"
                            },
                            {
                                "id": 7,
                                "cardName": "After 9pm",
                                "cardDescription": "Turn off your phone after 9pm",
                                "image": "https://static.pexels.com/photos/4607/landscape-sky-clouds-cloudy.jpg"
                            },
                            {
                                "id": 8,
                                "cardName": "Don't Check",
                                "cardDescription": "Don't check your phone from your bed",
                                "image": "https://static.pexels.com/photos/2330/dawn-landscape-sky-sunset.jpg"
                            },
                            {
                                "id": 9,
                                "cardName": "Spark",
                                "cardDescription": "Ask yourself, does the spark joy? If it doesn't, take the time to figure out how to make it better",
                                "image": "https://static.pexels.com/photos/2596/dawn-sunset-flying-clouds.jpg"
                            } ,
                            {
                                "id": 10,
                                "cardName": "Caffeine",
                                "cardDescription": "Try to limit your caffeine intake to 1 to 2 cups a day.",
                                "image": "https://static.pexels.com/photos/4655/city-dawn-sky-sunset.jpg"}
     
                    ]
     
     
     
                    $scope.show = function (e) {
     
                        $scope.startDate = new Date();
     
                        for (var i = 0; i < slidesData.length; i++) {
                            $scope.addSlide(slidesData[i], i);
                        };
     
     
                    }
     
     
                    $scope.addSlide = function (slide, index) {
                        $scope.slides.push({
                            image: slide.image + '?v=1',
                            careCardName: slide.cardName,
                            task: slide.cardDescription,
                            careCardDate: $scope.startDate,
                            id: index,
                            userTaskId: slide.id,
                            index: index
                        });
                    };
     
                    $scope.previous = function (e) {
                        e.preventDefault();
                        $scope.current(Math.max(1, $scope.current() - 1));
                    }
     
                    $scope.next = function (e) {
                        e.preventDefault();
                        $scope.current(Math.min($scope.slides.length, $scope.current() + 1));;
                    }
     
                    $scope.current = function (page) {
     
                        var book = $("#book"),
                            pages = book.children(),
                            pagesCount = pages.length,
                            current = pages.filter(".current"),
                            currentIndex = pagesCount - current.index(),
                            newPage;
                        $scope.currentIndex = currentIndex;
     
                        if (!arguments.length) {
                            return currentIndex;
                        }
     
                        if (book.data("animating")) {
                            return;
                        }
     
                        $("#wrap").toggleClass("first-page", page == 1)
                                  .toggleClass("last-page", page == pagesCount);
     
                        if (page != currentIndex) {
                            current.removeClass("current");
                            newPage = pages.eq(pagesCount - page).addClass("current");
     
                            if (page > currentIndex) {
     
                                kendo.fx(book).pageturnHorizontal(current, newPage).play();
     
                            } else {
                                kendo.fx(book).pageturnHorizontal(newPage, current).reverse();
     
                            }
                        }
     
                    }
                }]);
     
        </script>
     
    </body>
     
    </html>

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 11 Apr Link to this post

    Hello,

    the kendo page turn effect is a thin wrapper around the browser transitions. It does not do much apart from toggling some CSS properties. You may consider implementing something similar with CSS transitions only. The performance will be compareable. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top