%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/pn/wp-content/themes/intosai/templates/sections/
Upload File :
Create Path :
Current File : //var/www/pn/wp-content/themes/intosai/templates/sections/latest_number.php

<?php $items = get_sub_field('items'); ?>
<style>

.box_latest_number {
    background: #005591;
    color: #fff;
    margin-bottom: 0;
    padding: 50px 0;
    font-weight: bold;
}

.box_latest_number .centered_title {
    color: #fff;
}

.box_latest_number .centered_title h2 {
    color: #fff;
    background: #005591;
}

.box_latest_number .centered_title:before {
    background: #fff;
}

.box_latest_number .centered_text {
    text-align: center;
    margin-bottom: 20px;
}

.latest_number_list_container {
    display: flex;
}

@media only screen and (max-width: 900px) {
    .latest_number_list_container {
        flex-direction: column;
    }
}

.latest_number_list_container ul {
    flex: 1 1;
    margin: 0;
    padding: 0;
    
    
    
}

.latest_number_list_container ul li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 20px;
}

//.latest_number_list_container ul:nth-child(2) li {
//    flex-direction: row-reverse;
//}
//
//@media only screen and (max-width: 900px) {
//    .latest_number_list_container ul:nth-child(2) li {
//        flex-direction: row;
//    }
//}

.latest_number_list_container ul li .item_title {
    flex:  1 1;
    color: #76a7df;
}

.latest_number_list_container ul li .item_number {
    padding: 5px 10px;
    min-width: 150px;
    background: #fff;
    border-radius: 3px;
    display: block;
    color:#005591;
    text-align: center;
}

.latest_number_list_container ul:nth-child(1) li .item_number {
    margin-left: 15px;
}

.latest_number_list_container ul:nth-child(2) li .item_number {
    margin-left: 15px;
}

@media only screen and (max-width: 900px) {
    .latest_number_list_container ul:nth-child(2) li .item_number {
        margin-right: 0;
        margin-left: 15px;
    }
    
}

.latest_number_list_container ul + ul {
    margin-left: 150px;
}

@media only screen and (max-width: 900px) {
    .latest_number_list_container ul + ul {
        margin-left: 0;
    }
}

</style>
<script>
jQuery(document).ready(function($) {
                       function counterOnScroll() {
                                   $('.item_number:not(.item_number_not_animated)').each(function() {
                                      var counted = $(this).attr('data-counted');
                                      var oTop = $(this).offset().top - window.innerHeight;
                                      if (counted == '0' && $(window).scrollTop() > oTop) {
                                        console.log('counted');
                                        console.log(counted);
                                        console.log($(this));
                                          var $this = $(this),
                                            countTo = $this.attr('data-number');
                                          $({
                                            countNum: $this.text()
                                          }).animate({
                                              countNum: countTo
                                            },

                                            {

                                              duration: 2000,
                                              easing: 'swing',
                                              step: function() {
//                                                     console.log(this.countNum);
                                                $this.text(Math.floor(this.countNum).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."));
                                             
                                              },
                                              complete: function() {
                                                $this.text(this.countNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."));
//                                                alert('finished');
                                              }

                                            });
            
                                          $(this).attr('data-counted', '1');
                                      }
                                                          
                                   });
                                    
                       }
                       
                       counterOnScroll();
                       
                       $(window).scroll(function() {
                            counterOnScroll();
                       });
                       
});
</script>
<section class="content_section boxes box_latest_number">
    <div class="wrapper">
        
        <?php if(get_sub_field('title')){ ?>
            <div class="centered_title">
                <h2><?php the_sub_field('title'); ?></h2>
            </div>
        <?php } ?>

        <?php if(get_sub_field('sub_title')){ ?>
            <div class="centered_text">
                <?php the_sub_field('sub_title'); ?>
            </div>
        <?php } ?>


        <?php PC::debug($items, '$items'); ?>
        <div class="latest_number_list_container">
            <ul>
                <?php
                    $counter = 1;
                    $second_column = true;
                    foreach ($items as $item) {
                ?>
                    <li><span class="item_title"><?php echo $item['item_title']; ?></span><span class="item_number<?php if($item['not_animated']) { ?> item_number_not_animated<?php } ?>" data-counted="0" data-number="<?php echo $item['number']; ?>"><?php if($item['not_animated']) { ?><?php echo $item['number']; ?><?php } else { ?>0<?php } ?></span></li>
                    <?php
                        PC::debug(count($items), 'count($items)');
                        PC::debug($counter, '$counter');
                        if($second_column && ($counter >= count($items) / 2)) {
                            $second_column = false;
                            ?>
                            </ul><ul>
                            <?php
                        }
                    ?>
                <?php
                    $counter++;
                    }
                ?>
            </ul>
        </div>
    </div>
</section>

Zerion Mini Shell 1.0