Get new jQuery plugins just once a week

×

dynamic-timeline

FavoriteLoadingAdd to favorites

December 1, 2014

Dynamic jQuery time line plugin

dynamic-timeline is a jQuery time line plugin that lets you create css3 enabled, beautiful and responsive time lines.
The options are :-

var option = {
        arrowWidth: 7, // width of the arrow pointing towards the box belonging to an event
        background: "#0084c2", // background color of a timeline block
        borderRadius: "0.3em", // border radius of a timline block. Support >IE8
        color: "inherit", // color of the text inside the block
        lineColor: "rgba(0, 0, 0, 0.3)", // color of the line that runs the length of the timeline
        lineThickness: "2px", // thickness of the line that runs the length of the timeline
        date: "", // date of an event
        dateColor: "inherit", // text color of the date of an event
        datePosition: "absolute", // Do Not Use
        fadeIn: true, // should boxed be hidden before the user scrolls down to them
        fadeLine: true, // should the line appear as user scrolls, or be there constantly
        lineSpeed: 1000, // animation speed of the line indicating the users progress
        lineMaxBlur: 100, // fading out of the bottom of the line indicating the users progress scrolled.
        fadeImages: true, // hide images before user scrolls them into view
        image: "transparent", // the background image of the box belonging to the event. Sets the css background property so url() is needed
        imageBorderRadius: "0.3em", // border radius of the box belonging to an event. Support >IE8
        imageBorderWidth: 2, // width of the border of the box belonging to an event
        imageBorderColor: "rgba(220, 220, 220, 1)", // border color of the box belonging to an event
        distanceBetweenBoxAndImage: 5, // distance between the timeline content and the box
        orientation: [{ 
                min: 0,
                max: 10000,
                orientation: "vertical"
            }], // min and max sizes of the page defining if the timeline is horizontal or vertical
        treeView: 900 // minimum width of page before a vertical timeline splits into tree view
		};

Created by Patrick Geyer

Download

Example

dynamic timeline

timeline

Dynamic Timeline

Dynamic jQuery time line plugin that lets you create beautiful and responsive time lines. To get started, check out http://common.tritoncode.com/script/timeline/.

Please consider that the project is still in beta. The current status of the milestones can be found here.

Quick start

Download the latest release and put the required stylesheet at the top of your markup:

<link rel="stylesheet" href="timeline/timeline.min.css" />

Put the script at the bottom of your markup right after jQuery:

<script src="jquery.min.js"></script>
<script src="timeline/timeline.min.js"></script>

Wrap your time line items with a container element (div.timeline-block). Only the class timeline-block is mandatory to apply proper styles:

<div class="timeline">
  <div class="timeline-block">
    My Content!
  </div>
</div>

Call the plugin function and your time line is ready.

$(document).ready(function(){
  $('.timeline').timeline();
});

Documentation

The documentation is publicly available at http://common.tritoncode.com/script/timeline/#docs.

Contributing

The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests.

Please do not use the issue tracker for personal support requests. Stack Overflow (dynamic-timeline) is a better place to get help.

Bug reports

A bug is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!

Guidelines for bug reports:

  1. Use the GitHub issue search — check if the issue has already been reported.

  2. Check if the issue has been fixed — try to reproduce it using the latest develop branch in the repository.

  3. Isolate the problem — ideally create a reduced test case and a live example. This JSFiddle and this JS Bin are helpful templates you can fork or clone.

Example:

Short and descriptive example bug report title

A summary of the issue and the browser/OS environment in which it occurs. If suitable, include the steps required to reproduce the bug.

  1. This is the first step
  2. This is the second step
  3. Further steps, etc.

<url> - a link to the reduced test case

Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits).

Feature requests

Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.

Pull requests

Good pull requests are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.

Please ask first before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.

Adhering to the following process is the best way to get your work included in the project:

  1. Fork the project, clone your fork, and configure the remotes:

    git clone https://github.com/<your-username>/timeline.git
    cd timeline
    git remote add upstream https://github.com/PatrickGeyer/timeline.git
    
  2. If you cloned a while ago, get the latest changes from upstream:

    git checkout develop
    git pull [--rebase] upstream develop
    
  3. Create a new topic branch (off the main project develop branch) to contain your feature, change, or fix:

    git checkout -b <topic-branch-name>
    
  4. Build the distribution before committing to ensure your changes follow the coding standards and all build files are up to date.

    grunt dist
    
  5. Commit your changes in logical chunks. Please adhere to these guidelines. Use Git's interactive rebase feature to tidy up your commits before making them public.

  6. Locally merge (or rebase) the upstream development branch into your topic branch:

    git pull [--rebase] upstream develop
    
  7. Push your topic branch up to your fork:

    git push origin <topic-branch-name>
    
  8. Open a Pull Request with a clear title and description against the develop branch.

By submitting a patch, you agree to allow the project owner to license your work under the terms of the MIT License.

License

The code and the documentation are released under the MIT License.

dynamic-timeline

Related posts:

SubtlePattern-js
bootstrap-rating
whichTriangle-js
dynamic timeline

http://jquer.in/wp-content/uploads/2014/11/dynamix-timeline.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever