How to create a page which is a graphical (CSS) linear (vertical) timeline?

[DigitalMedieval]

Hi there, 

Using Canvas LMS I want to create a page which contains a linear vertical timeline with a line down the center and attached items on each side. The kind of thing I mean is like this basic W3 Schools tutorial here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_timeline 

I'm pretty competent in HTML and CSS and so I tried doing that in the HTML editor. Of course, it strips out the CSS. So, I tried an inliner tool to make all the CSS styles inline and attached to the required elements, but that doesn't really work well, never mind that it doesn't resize well (for mobile and other screen sizes).  

A timeline or linear progression of some sort like this seems like something a lot of people would use. Is there an app which might produce this. I'm loathe to produce the timeline as an image and then upload that to a page (and need to edit the image every time I want to add something to it. Blech.) 

Please don't suggest that I create a timeline elsewhere and then point to it in an iframe. Using iframes is insecure, fragile, and bad practice. 

[Chris_Hofer]

Hello there, @DigitalMedieval ...

I'm not sure that I have an exact answer for you, but I do understand what you are looking for given the example you shared.  Before my current job, I worked at a Technical College in Wisconsin, and I recall at least one instructor there using some kind of embedded interactive timeline that he created.  It was horizontal, however, but it had some interactive stuff in it...like users could scrub through the timeline and click on different things.  Unfortunately, I don't remember what the name of that one was.

So...other ideas...  Well, one idea was to create a table in the Rich Content Editor that would hold information either in a left or right cell with a border in the middle.  The problem with tables, though, are that they can have accessibility issues...and tables are generally used to hold data.

Has your school purchased DesignPLUS from Cidi Labs?  If so, you might be able to do something similar to tables but instead use their "Columns" and "Cards" features.  They even have a "Flashcards" feature which essentially would be clicking on the front of a flashcard, and then it flips over on the screen so students can see more information about the card on the other side.  That would be something kind of cool for your timeline.  Here's where you can see how those work: Design Matters Digest: April 2025 Edition | Cidi Labs.

Also, I wanted to point you to Sean Nufer's blog because he's got an interesting solution for his own courses: How to create an interactive timeline in Canvas | GoToStage.com.

I know these aren't exact solutions to what you are looking for, but I wanted to provide some alternatives that you might consider.  There may be others that come to offer their own solutions, so I'll defer to them.

Hope this helps in some way...for what it's worth.

Be well...take care...

[oneilllj · Accepted solution]

Hi @DigitalMedieval 

I have been playing around with some coding for a few other items and have adapted Sean Nufer's blog ideas and coding to create pop up boxes for buttons.

Using a combination of this coding, tables and an icon, here is a possible suggestion for you. 

This is what the code looks like on my test page.

Thanks

Jen

<table style="border-collapse: collapse; width: 100%;" border="0">
    <tbody>
        <tr>
            <td style="width: 47.5%;">
                <div style="text-align: right;">
                    <div class="btn" style="background: #ffffff; border: 2px solid #13469b; color: #13469b; height: 75px; margin: 5px; text-align: center; border-radius: 12px;"><strong><span style="color: #13469b;"><a style="position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #13469b;" title="SHORT SUMMARY OF TL1 HERE" href="#TL1">INSERT MAIN TITLE HERE</a></span></strong>
                        <div id="TL1" class="enhanceable_content dialog">
                            <p><span style="font-size: 14pt;">TL1</span></p>
                            <p><span style="font-size: 14pt;">INSERT BODY OF TEXT HERE ABOUT THE TIMELINE</span></p>
                        </div>
                    </div>
                </div>
            </td>
            <td style="border-right: 4px solid #0073e6; width: 2.5%;"><img style="float: right;" src="https://loreto.instructure.com/courses/3340/files/677565/download" alt="untitled-2.svg" data-inst-icon-maker-icon="true" data-download-url="https://loreto.instructure.com/files/677565/download?download_frd=1&amp;icon_maker_icon=1" data-api-endpoint="https://loreto.instructure.com/api/v1/courses/3340/files/677565" data-api-returntype="File" /></td>
            <td style="width: 2.5%;"></td>
            <td style="width: 47.5%;"></td>
        </tr>
        <tr>
            <td style="width: 47.5%;"></td>
            <td style="border-right: 4px solid #0073e6; width: 2.5%;"></td>
            <td style="width: 2.5%;"><img src="https://loreto.instructure.com/courses/3340/files/677565/download" alt="untitled-2.svg" data-inst-icon-maker-icon="true" data-download-url="https://loreto.instructure.com/files/677565/download?download_frd=1&amp;icon_maker_icon=1" data-api-endpoint="https://loreto.instructure.com/api/v1/courses/3340/files/677565" data-api-returntype="File" /></td>
            <td style="width: 47.5%;">
                <div style="text-align: left;">
                    <div class="btn" style="background: #ffffff; border: 2px solid #13469b; color: #13469b; height: 75px; margin: 5px; text-align: center; border-radius: 12px;"><strong><span style="color: #13469b;"><a style="position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #13469b;" title="SHORT SUMMARY OF TL2 HERE" href="#TL2">INSERT MAIN TITLE HERE</a></span></strong>
                        <div id="TL2" class="enhanceable_content dialog">
                            <p><span style="font-size: 14pt;">TL2</span></p>
                            <p><span style="font-size: 14pt;">INSERT BODY OF TEXT HERE ABOUT THE TIMELINE</span></p>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>