How to create a timeline for your setting?

2»

Comments

  • saethone
    saethone
    Posts: 153
    hey guys, wanted to pop in with some questions about this

    my timeline can be seen "here":https://shadows-of-fate-1.obsidianportal.com/wikis/timeline

    I'm having two issues. the first is with the height animation. I have both a box shadow and a max-height transition, but they are only playing one at a time. Instead of going simultaneously, it on hover it increases the height, then fades in the shadow, then on mouse leave it fades out the shadow, then drops the height. Is there anyway to force those to play at the same time?

    the second is that for some reason OP is adding a br tag after every LI which is messing up the nth item code, bumping everything over to the left. Do you guys know a way around that?
  • Bortas
    Bortas
    Posts: 645
    I found the issue to actually be paragraphs - try opening and closing a paragraph before the timeline code, see if that helps you.

    -bort
    "Morwindl":https://morwindl.obsidianportal.com
  • saethone
    saethone
    Posts: 153
    I tried a whole bunch of that, the only way i seem to be able to get it work atm is by deleting the blank enter between my li elements in the code. but i guess i can deal with ugly code, so long as it works. any ideas on the 2 phased transition?
  • Unknown
    So, yea, you figured out the line break issue already...and that isn't so much OP specifically as it is the Textile system that they use converting that - regardless, as you said it does mean you will get some ugly looking code on some tasks (this has been an issue with a couple of projects I have cobbled together, such as my update ticker).

    Now, the 2 phase transition issues. Would you mind sharing your code as you have it right now, would save me a little effort digging it out of your actual page?

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • saethone
    saethone
    Posts: 153
    Currently it's just set with very basic transitions code...but I've also tried the non-abbreviated version setting the delay to 0s, setting separate transition speeds for each property, and adding in all the legacy transitions (like -webkit and -moz etc), and no matter what I do I get the same behavior. Both transitions play, they just play one after the other instead of at the same time...

    .timeline li {
    width: 48%;
    background: rgba(255,255,255,0.07);
    border-radius:4px; margin: 10px 0 10px 0;
    padding: 0 10px 0 10px; position:
    relative; transition:1s;
    max-height:50px;
    overflow:hidden;
    }

    .timeline li:hover {
    max-height:1000px;
    box-shadow: 0px 0px 5px rgba(255,255,255,0.27);
    transition: 1s;
    }
  • saethone
    saethone
    Posts: 153
    I've been doing some research and I think I know what the problem is now...I'll update here once I have a solution...its because we're animating on a max-height and basically the beginning of the animation is being hidden...
  • Belrathius
    Belrathius
    Posts: 206
    Hi Seathone,

    I found while working on my front landing page that transitions all do weird processes because they do some fast-pace aspect and then slow down and do the last bit. The way around this odd by-design behavior is to add the "linear" parameter, which tells it to space out the process evenly across the time frame. Personally, I would have thought that should be the default behavior, but what do I know...

    Any ways, here is the "w3schools link":http://www.w3schools.com/css/css3_transitions.asp for what I am talking about. Specifically check out the transition-timing-function aspect.

    I hope this helps, although it is just as likely this won't help at all because there is other stuff going on.

    - Bel

    "Experiments in Space":https://gurpsspace.obsidianportal.com/
  • saethone
    saethone
    Posts: 153
    Bel,

    Yeah one of the work arounds to the problem is to use an ease-out timing so that the beginning of the animation plays faster...

    Basically the problem is because we're using max-height:1000 or 3000 or so for the animation, it begins the animation in a part of the screen we can't see, so it appears there's a delay before it gets to the part of the element that we can actually see. Unfortunately the transition tag doesn't work when using auto or 100% for the height or max-height property, it's got to be a specified value. Here's the code I ended up going with, and "here":https://shadows-of-fate-1.obsidianportal.com/wikis/timeline is how it turned out

    .timelinecontainer{ position: relative; overflow: hidden;}
    .timelinemargin { height: 100%; position: absolute; left: 50%; width: 2px; background: white; bottom: 10px; margin-left: -1px; z-index: 87;}
    ul.timeline{width:100%; position: relative; list-style: none; overflow: hidden; padding: 0px; margin: 0px;}
    .timeline li{width: 48%; background: rgba(255,255,255,0.07); border-radius:4px; margin: 10px 0 10px 0; padding: 0 10px 0 10px; position: relative; transition:max-height 0.75s ease-out 0s, box-shadow 1s ease 0s; max-height:50px; overflow:hidden;}
    .timeline li:hover {box-shadow: 0px 0px 5px rgba(255,255,255,0.27); max-height:300px;transition:max-height 1s ease-in 0s;}
    .timeline div.year{font-size:125%;margin-left: calc( 50% - 35px ); font-weight:bold; display: inline-block; background: white; color:black; border-radius:50px; padding: 0 10px 0 10px; position: relative; z-index:88; width:70px; text-align:center;}
    .timeline li:before{ border: 7px solid; content: ''; display: block; position: absolute;}
    .timeline li:nth-child(even){float:right;clear:right; margin-top:25px;}
    .timeline li:nth-child(odd){float:left; clear:left;}
    .timeline li:nth-child(even):before{border-color: transparent rgba(255,255,255,0.07) transparent transparent; right: 100%; top: 10px;}
    .timeline li:nth-child(odd):before{border-color: transparent transparent transparent rgba(255,255,255,0.07); left: 100%; top: 10px;}
  • Bortas
    Bortas
    Posts: 645
    Looks good! and I have to admit, I like the slower transitions here.... I think I will slow down mine on the timeline as well.

    -bort
    "Morwindl":https://morwindl.obsidianportal.com
  • Keryth987
    Keryth987
    Posts: 1,047
    OK. Having several issues using this, so I KNOW I'm doing something wrong.

    Mt time line can be found "HERE":https://phoenix-rising-1.obsidianportal.com/wikis/timeline

    OK, 1st ff, my 1st date is not centered. Second, the line is there but is white and therefore hard to see, so, I need to change the color. I need to resize the date box and give it a background as well, and need to do the same with the information being posted.

    Any and all help is GREATLY appreciated

    Code I'm using is as follows:

    HTML:



    Over 50 Million Years Ago
    The Ancients were originally known as the Altera who lived in one society with those known as the Ori in a distant galaxy (what Terran’s call The Black Eye Galaxy)
    50 Million Years Ago
    The Altera settle in the Milky Way Galaxy and become known as the Ancients, and build the network of Stargates, which they called "Astria Porta".
    The first landing place for the Alteran starship in the Milky Way was on the planet Dakara.
    Other early settlements of the Ancients in the Milky Way included Earth, which the Ancients called "Terra" (and which might be the site of the galaxy's first Stargate), Praclarush Taonas, and Kobol.
    30 Million Years Ago



    CSS:
    /* TIMELINE */
    .timelinecontainer{ position: relative; overflow: hidden;}
    .timelinemargin { height: 100%; position: absolute; left: 50%; width: 2px; background: white; bottom: 10px; margin-left: -1px; z-index: 87;} ul.timeline{width:100%; position: relative; list-style: none; overflow: hidden; padding: 0px; margin: 0px;} .timeline li{width: 48%; background: rgba(255,255,255,0.07); border-radius:4px; margin: 10px 0 10px 0; padding: 0 10px 0 10px; position: relative; transition:max-height 0.75s ease-out 0s, box-shadow 1s ease 0s; max-height:50px; overflow:hidden;}
    .timeline li:hover {box-shadow: 0px 0px 5px rgba(255,255,255,0.27); max-height:300px;transition:max-height 1s ease-in 0s;}
    .timeline div.year{font-size:125%;margin-left: calc( 50% – 35px ); font-weight:bold; display: inline-block; background: white; color:black; border-radius:50px; padding: 0 10px 0 10px; position: relative; z-index:88; width:70px; text-align:center;}
    .timeline li:before{ border: 7px solid; content: ‘’; display: block; position: absolute;}
    .timeline li:nth-child(even){float:right;clear:right; margin-top:25px;}
    .timeline li:nth-child(odd){float:left; clear:left;}
    .timeline li:nth-child(even):before{border-color: transparent rgba(255,255,255,0.07) transparent transparent; right: 100%; top: 10px;}
    .timeline li:nth-child(odd):before{border-color: transparent transparent transparent rgba(255,255,255,0.07); left: 100%; top: 10px;}


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

  • Bortas
    Bortas
    Posts: 645
    One of the things I have noticed about the timelines, is they are very restrictive on the tag being used correctly. Make sure before you start your timeline HTML you close out the P, and then open a new one - give that a shot, see if that fixes the alignment issues.

    I believe the color is that background in .timelinemargin, try swapping that. also in .timeline div.year

    -bort
    "Morwindl":https://morwindl.obsidianportal.com
  • Keryth987
    Keryth987
    Posts: 1,047
    Well, that got the color changed, thanks Bortas. However, all the rest is still messed up. Don;t suppose you could post your current timeline CSS?

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

  • Bortas
    Bortas
    Posts: 645
    Well of course :-)

    I'm tellin' ya, focus on opening and closing the P tags, and I bet it all comes together for you!

    @/* BEGIN - Campaign timeline */
    .timeline div.year{
    font-family:Fondamento;
    font-size:125%;
    margin-left: calc( 50% - 50px );
    font-weight:bold;
    display: inline-block;
    background: #6d0808;
    color: white;
    border-radius:30px;
    padding: 0 10px 0 10px;
    position: relative;
    top: 10px;
    z-index:88;
    text-align:center;
    box-shadow: 0px 5px 2px rgba(30, 24, 21, 0.5);
    } /* can't make it center!! BROKEN */
    /* TIMELINE LINE */
    .timelinecontainer{
    position: relative;
    overflow: hidden;
    }
    .timelinemargin{
    height: 100%;
    position: absolute;
    left: 50%;
    width: 2px;
    background: #6d0808;
    bottom: 10px;
    margin-left: -1px;
    z-index: 87;
    }
    ul.timeline{
    position: relative;
    list-style: none;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    }
    .timeline li:hover{
    border: 2px solid rgba(50,50,50,0.8);
    background: rgba(200,200,200,0.3);
    max-height:3000px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    }
    .timeline li{
    margin: 5px;
    width: 48%;
    box-shadow: 0px 5px 2px rgba(30, 24, 21, 0.5);
    background: rgba(200,200,200,0.2);
    border: 2px solid rgba(50,50,50,0.4);
    border-radius:6px;
    padding: 5px 2px 0px 5px;
    display:inline-block;
    vertical-align:top;
    overflow:hidden;
    max-height:35px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    text-align: justify;
    }
    .timeline li:before{
    border: 7px solid;
    content: '';
    display: block;
    position: absolute;
    }
    .timeline li:nth-child(even){
    float:right;
    clear:right;
    }
    .timeline li:nth-child(odd){
    float:left;
    clear:left;
    }
    .timeline li:nth-child(even):before{
    border-color: transparent rgba(50,50,50,0.6) transparent transparent;
    right: 100%;
    top: 10px;
    }
    .timeline li:nth-child(odd):before{
    border-color: transparent transparent transparent rgba(50,50,50,0.6);
    left: 100%;
    top: 10px;
    }
    /* END TIMELINE LINE */
    /* END - Campaign Timeline */@

    HTML
    @



    ? - 2500 PM
    » Cataclysm ▾
    A natural disaster? A great war? Climate change? It all depends on what wise old sage you speak with.
    » Dire Consequences ▾
    The great cataclysm ravages the world, creating vast wastelands with very little hospitable land. People beyond counting are unable to survive and great civilizations turn to dust.
    2500 PM - 0 NF
    » Tribes Settle ▾
    Nomadic survivalists start putting down roots and building cities
    » Civilization Returns ▾
    The forging of cities and trade routes helps people start leading lives of normalcy again.
    0-500 NF
    » Kingdom Founded ▾
    Morwindl crowns their first king, Florus Bonenffant, beginning the long history of this island kingdom. [[Geweldig Mesto]] is the oldest and largest city, and he names it as the place he will hold his court. It is forever after known as the capitol of the island.
    » Borders Secured ▾
    The [[Bridges of Maith]] are built, and the docks around the fledgling city of [[Porta Ponte]] are burned. The city was further fortified as the gateway to the kingdom, and the terrors of the [[Badlands of Pustny | badlands]].
    » Rapid Expansion ▾
    The wealthy kingdom expands, the fertile soil is planted, elves are discovered in the [[Silva Wood]], and small towns spring up in every corner if the island.
    » Pirates! ▾
    Morwindl discovers the downside to being an island - pirate activity on all fronts! Unfortunately, this keeps most seaside towns small and poor.

    @

    -bort
    "Morwindl":https://morwindl.obsidianportal.com
  • SSveter
    SSveter
    Posts: 37
    I love this!!

    And I shamelessly borrowed it too.
  • Keryth987
    Keryth987
    Posts: 1,047
    Thanks Bortas, I got it to work. AND fixed the centering issue you were having. Here's my current CSS. See the .timelinemargin for the changes

    /* CampaignTtimeline */
    .timeline div.year{ font-family:Audiowide; font-size:100%; margin-left: calc( 50% - 50px ); font-weight:bold; display: inline-block; background: RoyalBlue; color: white; border-radius:30px; padding: 0 10px 0 10px; position: relative; top: 10px; z-index:88; text-align:center!Important; box-shadow: 0px 5px 2px rgba(30, 24, 21, 0.5); }
    .timelinecontainer{ position: relative; overflow: hidden; }
    .timelinemargin{ height: 90%; position: absolute; left: 52%; width: 2px; background: RoyalBlue; bottom: 10px; margin-left: -1px; z-index: 87; }
    ul.timeline{ position: relative; list-style: none; overflow: hidden; padding: 0px; margin: 0px; }
    .timeline li:hover{ border: 2px solid rgba(50,50,50,0.8); background: rgba(200,200,200,0.3); max-height:3000px; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }
    .timeline li{ margin: 5px; width: 48%; box-shadow: 0px 5px 2px rgba(30, 24, 21, 0.5); background: rgba(200,200,200,0.2); border: 2px solid rgba(50,50,50,0.4); border-radius:6px; padding: 5px 2px 0px 5px; display:inline-block; vertical-align:top; overflow:hidden; max-height:35px; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; text-align: justify; } .timeline li:before{ border: 7px solid; content: ''; display: block; position: absolute; }
    .timeline li:nth-child(even){ float:right; clear:right; }
    .timeline li:nth-child(odd){ float:left; clear:left; }
    .timeline li:nth-child(even):before{ border-color: transparent rgba(50,50,50,0.6) transparent transparent; right: 100%; top: 10px; }
    .timeline li:nth-child(odd):before{ border-color: transparent transparent transparent rgba(50,50,50,0.6); left: 100%; top: 10px; }


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

  • Bortas
    Bortas
    Posts: 645 edited April 2015
    Actually, it doesn't - that changes the skinny vertical line, but does not fix the "year" label positioning. That is actually under .timeline div.year, where you are showing calc(50% -50px)... This works great on a fixed size container (in your case, a 100px wide container), but doesn't work on a variable size container, which is why mine is broken.

    I suppose I could set a fixed width and run with it.... and deal with the extra white space (well... red space, technically), and multiple lines on large labels. This seems less elegant to me, I want to figure out centering a variable width box ;-)

    But regardless, I'm stoked you figured out your problem!

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
    Post edited by Bortas on
  • ikabodo
    ikabodo
    Posts: 39
    A little update.

    Here is the timeline I am using now:

    https://oath-of-crows.obsidianportal.com/wiki_pages/roman-period

    Oath of Crows

  • ketherian
    ketherian
    Posts: 203
    That looks really nice.
    How different is the css from what you posted previous?
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions