Nostalgic Primordial Monster

    jquery.trackrails

    1.10.2 • Public • Published

    jquery.trackrails

    Create track points for a page and make the section browsering more easily.


    History

    Without guidelines, users are difficult to understand the structure and hard to find out something from a page that includes many sections.
    This one is my side project and focus on solving the UI + UX for a single infinite page.
    jquery.trackrails is useful on a single infinite web page browsing. It lets your users have a best understanding that your page provides and can reach each section more easily by tap/click the track point.

    Demonstration on CodePen

    https://codepen.io/ssmak/pen/zarLVV

    Installation + Use

    1. Install to your project as dependency from NPM (https://www.npmjs.com/package/jquery.trackrails)
    npm install jquery.trackrails --save
    1. Load the dependency
    <!-- // HEAD -->
    <!-- put below stylesheets between the 'head' tag in below order -->
    <!-- font awesome 4 - optional, but I use it in my test page. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- jquery.trackrails, css(default) - provide default rendering -->
    <link rel="stylesheet" href="/node_modules/jquery.trackrails/dist/jquery.trackrails.min.css">
    <!-- jquery.trackrails, css(overrides) - you can overrides any styles by your own -->
    <link rel="stylesheet" href="/project_root/css/jquery.trackrails.overrides.css">
    <!-- // BODY -->
    <!-- jquery.trackrails - put below script tag above the close tag of 'body' -->
    <script src="/node_modules/jquery.trackrails/dist/jquery.trackrails.js" rails-easing="easeOutExpo" rails-duration="2000"></script>
    1. Write your page content
    <!-- mock content -->
    <div class="section rails" style="background-color:#f00">
      Section-A
    </div>
    <div class="section rails" rails-title="use title" style="background-color:#0f0">
      Section-2
    </div>
    <div class="section rails" style="background-color:#00f">
      Section-C
    </div>
    <div class="section rails" style="background-color:yellow; height:100px">
      Section-D
    </div>
    <div class="section rails" style="background-color:pink; height:50px">
      Section-E Section-E Section-E
    </div>
    1. Place below tag within the 'body' tag which you want the DOM of jquery.trackrails to create in
    <!-- jquery.trackrails, dom will attach here. If this tag not find, the DOM will append as a child to the 'body' tag -->
    <div class="jq-trackrails"></div>

    Test

    A demo page is located in the /test folder. You can test it with the live reload by using lite-server which can be installed by

    npm install lite-server -g
    cd /project_root && lite-server

    Customization

    rails-title
    The title of the track point. If not set, the content will be used.

    <div class="section rails" rails-title="use title" style="background-color:#0f0">Section-2</div>

    rails-easing
    The easing animation that will be used on track moving. Please visit here for details: https://easings.net/zh-tw
    rails-duration
    How long will be moved to the target. Unit in ms, 2000 = 2 seconds.

    <script src="/node_modules/jquery.trackrails/dist/jquery.trackrails.js" rails-easing="easeOutExpo" rails-duration="2000"></script>

    License

    MIT

    Install

    npm i jquery.trackrails

    DownloadsWeekly Downloads

    3

    Version

    1.10.2

    License

    MIT

    Unpacked Size

    41.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • ssmak