Blog

Creating timeline [Answered]RSS

7 replies

Last post Feb 10, 2017 03:43 PM by AspGel

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
AspGel
None

0 Points

3 Posts

Creating timeline

Jan 06, 2017 03:34 PM|AspGel|LINK
How i can i create timeline like this one
https://almsaeedstudio.com/themes/AdminLTE/pages/UI/timeline.html
i couldnt do. Can you help me

bbcompent1

All-Star

35169 Points

9928 Posts

Moderator

Re: Creating timeline

Jan 06, 2017 03:54 PM|bbcompent1|LINK

At the bottom of that timeline page, they give the code for the timeline:

<ul class="timeline">

    <!-- timeline time label -->
    <li class="time-label">
        <span class="bg-red">
            10 Feb. 2014
        </span>
    </li>
    <!-- /.timeline-label -->

    <!-- timeline item -->
    <li>
        <!-- timeline icon -->
        <i class="fa fa-envelope bg-blue"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>

            <h3 class="timeline-header"><a href="#">Support Team</a> ...</h3>

            <div class="timeline-body">
                ...
                Content goes here
            </div>

            <div class="timeline-footer">
                <a class="btn btn-primary btn-xs">...</a>
            </div>
        </div>
    </li>
    <!-- END timeline item -->

    ...

</ul>

It looks like a bit of CSS and HTML magic. Did you try it?

Mark as answer posts that helped you.

- Reply
AspGel
None

0 Points

3 Posts

Re: Creating timeline

Jan 06, 2017 11:18 PM|AspGel|LINK

No i want to create with .Net. how can i get datas
- Reply
JiyaoLee
Member

590 Points

262 Posts
Re: Creating timeline

Jan 09, 2017 09:48 AM|JiyaoLee|LINK
Hi AspGel,
Admin LTE is based on Bootstrap. It's a free bootstrap themes.
You'd better to download the demo(https://github.com/almasaeed2010/AdminLTE/archive/master.zip).
In the zip file, you can find timeline.html(~\AdminLTE-master\pages\UI).

Importing the necessary files to the asp.net project.
1.<link href="~/Content/_all-skins.min.css" rel="stylesheet" />
2.<link href="~/Content/AdminLTE.min.css" rel="stylesheet" />
3.<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

The TimeLine code is like below:
```
<ul class="timeline">
    
    <li class="time-label">
        
        [1]
    </li>
    
    
    <li>
        
        <i class="fa fa-envelope bg-blue"></i>
        <div class="timeline-item">
           
           [2]
        </div>
    </li>
    
    ...
</ul>
```
Replacing [1] with timeline label content and [2] with timeline item content.

Regards,
JiyaoLee
We are trying to better understand customer views on social support experience. Click HERE to participate the survey. Thanks!
- Reply
Eric Du
Contributor

6650 Points

2718 Posts

Re: Creating timeline

Jan 09, 2017 10:01 AM|Eric Du|LINK

Hi AspGel,

According to your description, as far as I know,

1. About use which method to send request?

   You can use jQuery call WebMethod, also can add date as parameters send to WebMethod.

   For more detail, please refer to this link:http://www.aspsnippets.com/Articles/Retrieve-data-from-Database-and-display-on-page-using-jQuery-AJAX-in-ASPNet.aspx

2. How to get data from database?

   You can use select SQL command to select data from database, data should show like this:

   date   icon   (event title)  etc.

3. How to show these data?

   After taking the data, traversing the count of the data, then you could use split joint method to handle these data.

4. About style of control and data?

    You could add class or id inside of html tag, then apply CSS to it.



Best Regards,

Eric Du

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
- Reply
ifour.nishit...
Member

20 Points

31 Posts

Re: Creating timeline

Jan 25, 2017 11:10 AM|ifour.nishith@gmail.com|LINK

Hi,

You Can Check Below URL

https://www.officetimeline.com/excel-timeline

Nisith Tukharia
Software developer
custom software development company India
- Reply
bbcompent1
All-Star

35169 Points

9928 Posts

Moderator

Re: Creating timeline

Jan 25, 2017 02:12 PM|bbcompent1|LINK

You do realize he is trying to do this in a web application backed by asp.net? From reading your reply, that only applies to Excel, not asp.net.

Mark as answer posts that helped you.
- Reply
AspGel
None

0 Points

3 Posts

Re: Creating timeline

Feb 10, 2017 03:43 PM|AspGel|LINK
Yes i wanna get datas with asp.net like this example. Not excel. On the web i want to show posts of the members

‹ Previous Thread|Next Thread ›