Pages UI

HTML v4.0
Have an account? Sign in
Timeline

Last updated 3 months ago
Pages timeline has been adapted from CodyHouse Timeline example.
Step one
Start by creating the markup for the timeline. We recommend that you use the same card elements which were introduced in Pages Social app for each post of the timeline
<div class="timeline-container">
    <section class="timeline">
        <div class="timeline-block">
            <div class="timeline-point success">
                <i class="pg-map"></i>
            </div>
            <!-- timeline-point -->
            <div class="timeline-content">
                <!-- START CARD ELEMENT -->
                <div class="card share full-width">
                    <div class="circle" data-toggle="tooltip" title="Label">
                    </div>
                    <div class="card-header clearfix">
                        <div class="user-pic">
                            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/8x.jpg" data-src="assets/img/profiles/8.jpg" src="assets/img/profiles/8x.jpg">
                        </div>
                        <h5>Jeff Curtis</h5>
                        <h6>Shared a Tweet
                                <span class="location semi-bold"><i class="fa fa-map-marker"></i> SF, California</span>
                            </h6>
                    </div>
                    <div class="card-description">
                        <p>What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. <a href="#">#quote</a> </p>
                        <div class="via">via Twitter</div>
                    </div>
                </div>
                <!-- END CARD ELEMENT -->
                <div class="event-date">
                    <h6 class="font-montserrat all-caps hint-text m-t-0">Apple Inc</h6>
                    <small class="fs-12 hint-text">15 January 2015, 06:50 PM</small>
                </div>
            </div>
            <!-- timeline-content -->
        </div>
        
        <div class="timeline-block">
          ...
        </div>
​
    </section>
    <!-- timeline -->
</div>
Step one
Add the following snippet to make the posts appear on scroll with a nice fade in effect.
jQuery(document).ready(function($){
    var $timeline_block = $('.timeline-block');
​
    //hide timeline blocks which are outside the viewport
    $timeline_block.each(function(){
        if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
            $(this).find('.timeline-point, .timeline-content').addClass('is-hidden');
        }
    });
​
    //on scolling, show/animate timeline blocks when enter the viewport
    $(window).on('scroll', function(){
        $timeline_block.each(function(){
            if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.timeline-point').hasClass('is-hidden') ) {
                $(this).find('.timeline-point, .timeline-content').removeClass('is-hidden').addClass('bounce-in');
            }
        });
    });
});
Aligning elements
By default the posts will be spread on both sides of a vertical axis for larger screens. For small/medium screens the posts will be aligned to left automatically. Explicity specifying either left or center classes in the timeline-container element, posts will be forced not to change the layout type relevant to screen size.
<!-- ALIGN timeline-block ITEMS TO LEFT -->
    <div class="timeline-container left">
    <section class="timeline">
        
        <div class="timeline-block">
          ...
        </div>
    </section>
    <!-- timeline -->
</div>
Tables
Troubleshooting