(timeline) fix top and group axis left to scroll down with touch - Question

[dborchers87]

Hi,

in the example 15
https://github.com/almende/chap-links-library/blob/master/js/src/timeline/examples/example15_mobile.html

i can scroll left and right with my fingers on mobile and touch displays and the left axis with the groups is fixed.

How can i set the top axis with the date and time fixed to to scroll from top to bottom with touch?

Thansk for your help.

[josdejong]

This isn't supported by chap-links-library, but works fine in the successor, vis.js. In the vis.js Timeline you can give the Timeline a fixed or maximum height, and when exceeded, the contents become vertically scrollable.

[dborchers87]

Ok, i tried vis and it works, thanks

But i have another question. I want to view the container with the map in full height and with and when i resize the window there should show no scrollbars, only the touch actions but it doesnt work, ive tried the autoResize option but it doesnt work.

Do you have an idea?

[josdejong]

Giving the Timeline a width and height of 100% should just work.

[dborchers87]

he made the timeline with full width and height but when i resize the whole windows, the timeline wont be resized :(

[josdejong]

do you call timeline.redraw() after resizing? Or you can set autoResize true.

[dborchers87]

i have set autoResize but i dont know where i have to call timeline.redraw()

[dborchers87]

here you find my page:
http://dev1.eos-server.com/design/redesign_Nov2015/login_simple.html

and here is the whole code:
!DOCTYPE html>

<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/core.css" rel="stylesheet" type="text/css">
<link href="assets/css/components.css" rel="stylesheet" type="text/css">
<link href="assets/css/colors.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->

<!-- Themestylesheets -->
<link href="assets/js/plugins/visualization/visjs/vis.css" rel="stylesheet" type="text/css">
<!-- /Theme stylesheets -->

<!-- Core JS files -->
<script type="text/javascript" src="assets/js/plugins/loaders/pace.min.js"></script>
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/plugins/loaders/blockui.min.js"></script>
<!-- /core JS files -->


<!-- Theme JS files -->
<script type="text/javascript" src="assets/js/core/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/ui/moment/moment.min.js"></script>
<script type="text/javascript" src="assets/js/plugins/ui/moment/moment_locales.min.js"></script>
<script type="text/javascript" src="assets/js/plugins/visualization/visjs/vis.js"></script>
<!-- /theme JS files -->

<style type="text/css"> #visualization { width: 100%; height: 100%; } </style>

<!-- Main navbar -->
<div class="navbar navbar-inverse">
    <div class="navbar-header">
        <a class="navbar-brand" href="index.html"><img src="assets/images/logo_light.png" alt=""></a>

        <ul class="nav navbar-nav pull-right visible-xs-block">
            <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
        </ul>
    </div>

    <div class="navbar-collapse collapse" id="navbar-mobile">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">
                    <i class="icon-display4"></i> <span class="visible-xs-inline-block position-right"> Go to website</span>
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="icon-user-tie"></i> <span class="visible-xs-inline-block position-right"> Contact admin</span>
                </a>
            </li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-cog3"></i>
                    <span class="visible-xs-inline-block position-right"> Options</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- /main navbar -->


<!-- Page container -->
<div class="page-container login-container">

    <!-- Page content -->
    <div class="page-content">

        <!-- Main content -->
        <div class="content-wrapper">

            <!-- Content area -->
            <div class="content">

                <div id="visualization"></div>

                <script>
                    var now = moment().minutes(0).seconds(0).milliseconds(0);
                    var groupCount = 20;
                    var itemCount = 20;

                    // create a data set with groups
                    var names = ['John', 'Alston', 'Lee', 'Grant'];
                    var groups = new vis.DataSet();
                    for (var g = 0; g < groupCount; g++) {
                        groups.add({id: g, content: names[g]});
                    }

                    // create a dataset with items
                    var items = new vis.DataSet();
                    for (var i = 0; i < itemCount; i++) {
                        var start = now.clone().add(Math.random() * 200, 'hours');
                        var group = Math.floor(Math.random() * groupCount);
                        items.add({
                            id: i,
                            group: group,
                            content: 'item ' + i +
                            ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
                            start: start,
                            type: 'box'
                        });
                    }

                    // create visualization
                    var container = document.getElementById('visualization');
                    var options = {
                        //axHeight: 'auto',
                        timeAxis: {scale: 'minute', step: 30},
                        autoResize: 'true',
                        orientation: 'top',
                        //width: '100%',
                        //height: '100%',
                        locale: 'de',
                        groupOrder: 'content'  // groupOrder can be a property name or a sorting function
                    };

                    var timeline = new vis.Timeline(container);
                    timeline.setOptions(options);
                    timeline.setGroups(groups);
                    timeline.setItems(items);
                    timeline.redraw();

                </script>

                <!-- Footer -->
                <div class="footer text-muted">
                    &copy; 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
                </div>
                <!-- /footer -->

            </div>
            <!-- /content area -->

        </div>
        <!-- /main content -->

    </div>
    <!-- /page content -->

</div>
<!-- /page container -->

[josdejong]

ah sorry, I was confused with the Timeline of the successor of chap-links-library, vis.js, which has an autoResize option. Well, in that case, you have to listen for the window being resized, and if so, redraw the Timeline.

window.addEventListener('resize', function () {
  timeline.checkResize();
});

[dborchers87]

I already use vis.js and have the problem with vis.
But thanks. I will try that listener.

Von meinem Samsung Galaxy Smartphone gesendet.

-------- Ursprüngliche Nachricht --------

Von: Jos de Jong notifications@github.com

Datum: 10.02.2016 17:04 (GMT+01:00)

An: almende/chap-links-library chap-links-library@noreply.github.com

Cc: dborchers87 daniel.borchers@live.de

Betreff: Re: [chap-links-library](timeline) fix top and group axis left to scroll down with touch - Question (#359)

ah sorry, I was confused with the Timeline of the successor of chap-links-library, vis.js, which has an `autoResize` option. Well, in that case, you have to listen for the window being resized, and if so, redraw the Timeline.

window.addEventListener('resize', function () {
  timeline.checkResize();
});

---

Reply to this email directly or view it on GitHub:
#359 (comment)

[josdejong]

I already use vis.js and have the problem with vis.

ehh, then you should ask your question in the issues section of the vis.js project, not here, this is confusing.

Well, in case of the vis.js Timeline, it has autoResize true by default. All you have to do is give the page, container div, and Timeline itself a height of 100%, something like:

<style>
  body, html, #myTimeline {
    width: 100%;
    height: 100%;
  }
</style>
<script>
  var container = document.getElementById('myTimeline');
  var items = new vis.DataSet([ ... ]);
  var options = {
    width: '100%'
    height: '100%'
  };
  var timeline = new vis.Timeline(container, items, options);
</script>

[dborchers87]

Ok i will wrote a new issue in the vis.js page - sorry for confusing. But i´ve already tried your example but it didn't work

Date: Wed, 10 Feb 2016 23:43:57 -0800
From: notifications@github.com
To: chap-links-library@noreply.github.com
CC: daniel.borchers@live.de
Subject: Re: chap-links-library fix top and group axis left to scroll down with touch - Question (#359)

I already use vis.js and have the problem with vis.

ehh, then you should ask your question in the issues section of the vis.js project, not here, this is confusing.

Well, in case of the vis.js Timeline, it has autoResize true by default. All you have to do is give the page, container div, and Timeline itself a height of 100%, something like:

<style> body, html, #myTimeline { width: 100%; height: 100%; } </style> <script> var container = document.getElementById('myTimeline'); var items = new vis.DataSet([ ... ]); var options = { width: '100%' height: '100%' }; var timeline = new vis.Timeline(container, items, options); </script>

—
Reply to this email directly or view it on GitHub.

[rahulcjain]

I would like to have scroll on the right side and timeline at the top should be fix. How do I achieve this.

When I set minHeight: 300, it appears at the right side but the top row is not fix(freeze) and also the mouse wheel on the board is not working