Positioning of elements in a horizontal timeline - javascript

I'm working on a custom timeline feature but I'm stuck on how to solve a certain positioning I want in edge-cases.
In the snippet below I have 3 timelines for demonstration:
The first is a timeline with many events. The timeline is supposed overflow the ones that don't fit. This is determined by a given min-width for li.
The second and third have few events. The positioning here needs to be so that they are equally spaced between eachother.
I also want the first and last events to be pulled to the left and right respectively, instead of centered.
What I have so far:
The width of each item is calculated based on the number of events. The min-width property prevents the size getting too small. The overflow is intended.
I thought I'd fix the spacing issue on the first and last event by pulling them left and right with left/right: XX % but the elements seem to behave as if they are positioned absolutely. I also tried float as well as using a fixed width and controlling the width by margin but that didn't work either.
.timeline-container {
overflow: hidden;
position: relative;
margin: 20px 0;
}
.timeline-container ol {
list-style: none;
width: 100%;
height: 2px;
white-space: nowrap;
margin: 30px 0 0;
padding: 0;
background: #EEE;
display: inline-block;
position: relative;
}
.timeline-container ol li {
display: inline-block;
position: relative;
height: 9px;
min-width: 150px;
}
.timeline-container ol li:before {
content: "";
cursor: pointer;
width: 12px;
height: 12px;
border: 2px solid #3598DC;
display: inline-block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: white;
z-index: 100;
}
.timeline-container ol li a {
position: relative;
bottom: 30px;
display: block;
text-align: center;
padding: 0;
}
<div class="timeline-container">
<ol>
<li style="width: 9.09091%;"><a>Feb 8</a></li>
<li style="width: 9.09091%;"><a>Feb 9</a></li>
<li style="width: 9.09091%;"><a>Feb 11</a></li>
<li style="width: 9.09091%;"><a>Feb 13</a></li>
<li style="width: 9.09091%;"><a>Feb 17</a></li>
<li style="width: 9.09091%;"><a>Feb 18</a></li>
<li style="width: 9.09091%;"><a>Feb 19</a></li>
<li style="width: 9.09091%;"><a>Feb 21</a></li>
<li style="width: 9.09091%;"><a>Feb 22</a></li>
<li style="width: 9.09091%;"><a>Feb 26</a></li>
<li style="width: 9.09091%;"><a>Feb 28</a></li>
</ol>
</div>
<div class="timeline-container">
<ol>
<li style="width: 50%;"><a>Feb 8</a></li>
<li style="width: 50%;"><a>Feb 28</a></li>
</ol>
</div>
<div class="timeline-container">
<ol>
<li style="width: 25%;"><a>Feb 8</a></li>
<li style="width: 25%;"><a>Feb 9</a></li>
<li style="width: 25%;"><a>Feb 11</a></li>
<li style="width: 25%;"><a>Feb 13</a></li>
</ol>
</div>
Desired behavior: (note the reduced margin left and right margin on the first and last item resp.)
A pure-css solution that would be preferable, but javascript is fine too. Thanks.

If you're alright with using flexbox, it could look something like this:
For many timeline items:
<div class="timeline many">
<div class="timeline__item"></div>
<div class="timeline__item"></div>
<div class="timeline__item"></div>
<div class="timeline__item"></div>
</div>
And CSS:
.timeline {
display: flex;
flex-direction: row;
}
.many .timeline__item {
flex: 1
}
For few items:
<div class="timeline few">
<div class="timeline__item"></div>
<div class="timeline__item"></div>
<div class="timeline__item"></div>
<div class="timeline__item"></div>
</div>
And CSS:
.timeline {
display: flex;
flex-direction: row;
}
.few .timeline__item {
justify-content: space-between;
}
For IE support you can use a tool like Gulp or Webpack to prefix your styles, or just paste them in an online one here: https://autoprefixer.github.io/

Related

How to display multiples images equally in a div

I am trying to create a photo gallery app and came across some obstacles. I want to have each image take equal portion of the div, for example if there are two images, each image takes up 50% of the div, and if there are three images, each images takes up 33.33% of the div, etc. Further, is there a way to format those images to be in square dimensions through css?
Also, I have the photos-gallery div that contains h2 and photos-gallery-content div. Currently, I am hardcoding the height for the photos-gallery-content div to fit inside the parent div, but is there a way to make that div take the remainder of the height of its parent div?
Eventually I want the pictures to render dynamically using React so any recommendations/advice on that would help a lot too.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
height: 200px;
overflow: hidden;
float: left;
display: flex;
margin: 0;
padding: 0;
}
.photos-gallery-layout li {
height: auto;
float: left;
list-style: none;
display: flex;
}
.photo {
display: inline-flex;
white-space: nowrap;
}
.photo img {
max-width: 100%;
max-height: auto;
display: inline-block;
vertical-align: middle;
}
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
</div>
<div>
I used your HTML and wrote a little CSS to demonstrate how to:
Have any amount of items fit at equal widths in one row using flexbox (display: flex on the parent and flex: 1 on the children)
Have <img> elements crop to the shape of the tallest element (in this case, a square) using object-fit: cover (note compatibility on CanIUse)
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>

Set width of child div in flex container

I have 4 divs with the class .piece-slide that horizontally scroll across the page within the the div #work, which is a flex element. Within the third .piece-slide div the 3 nested elements are absolutely positioned, this renders the width of the third .piece-slide div to 0, so now I want to programmatically set the width of the third .piece-slide div so that it covers the 3 nested elements.
For some reason I am unable to set this width through CSS. I have also tried through jQuery. It would be much appreciated if some pointed me in the right direction as how to rectify this. Here is a jsfiddle as well as the embedded code below.
$("#third-div").outerWidth("100vw");
#wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
#work {
height: 100%;
overflow-x: scroll;
display: flex;
background-color: red;
}
.piece-slide {
display: flex;
align-items: center;
position: relative;
padding-right: 5em;
box-sizing: border-box;
border-right: 1px solid black;
}
.piece {
width: 25vw;
margin: 10px;
}
.piece img {
max-width: 100%;
}
#third-div {
/* D0ES NOT WORK */
width: 100vw;
background-color: green;
}
#third-div a {
position: absolute;
}
#third-div a:nth-child(1) {
top: 0;
left: 0;
}
#third-div a:nth-child(2) {
top: 25vw;
left: 25vw;
}
#third-div a:nth-child(3) {
left: 60vw;
}
<div id="wrapper">
<div class="content">
<div id="work">
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
</div>
<!-- THIRD DIV WHERE WIDTH SHOULD BE SET -->
<div id="third-div" class="piece-slide">
<a class="piece" num="1">
Nested Element 1<img src="http://i.stack.imgur.com/yZlqh.png">
</a>
<a class="piece" num="2">
Nested Element 2<img src="http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif">
</a>
<a class="piece" num="3">
Nested Element 3<img src="http://suplugins.com/podium/images/placeholder-02.jpg">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try to remove
flex-direction: column;
from #wrapper.
Or change it to
flex-direction: row;

Center logo dynamically in menu

I want that the logo stays in the middle of menu items in the navigation, that it seems like the logo "splits" the navigation like in this example. It is important, that the logo stays also in the middle of page. So the menu items are arround them but the logo is "fixed".
I add a sepeartor div dynamically with javascript to the middle of menu items (when six items, the seperator stays after the third) to create the effect I discribe above.
.seperator {
display: inline-block;
height: 10px;
margin-left: 69px;
margin-right: 206px;
width: 10px;
}
But when the editor adds a new menu item to the navigation or renames an item (CMS), the logo is not centered anymore. With fixed margin it will not work but I don't know how to calculate dynamically the width or margin size. I want to add the value via javascript. I think this is the only way it could work.
So I need a script or a helpful idea to do this.
Responsive solution, bare HTML & CSS:
<div class="navBar">
<table class="menu">
<tr>
<td class="left">
<table class="nested" >
<tr>
<td>first</td>
<td>second</td>
</tr>
</table>
</td>
<td class="logo">
<a href="#">
<img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" />
</a>
</td>
<td class="right">
<table class="nested" >
<tr>
<td>third</td>
<td>fourth</td>
<td>fifth</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<style>
.navBar {
width: 100%;
margin: 0 auto;
}
.menu {
width: 100%;
}
.menu td {
text-align: center;
}
.menu .logo {
width: 22%;
}
.menu .logo img {
width: 200px;
max-width: 100%;
}
.left, .right {
width: 39%;
}
.nested {
width: 100%;
}
.nested td {
text-align: center;
}
</style>
View on Codepen
Okay, I tried a few things and I don't wanted to use two navigations but I did:
<div class="inner">
<div class="desktop_navi">
<ul>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div class="logo"><img width="281" height="280" src=""></div>
<div class="desktop_navi">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
Thats my new HTML-Markup. Here the style I use:
.inner {
display: table;
width: 100%;
}
.inner .desktop_navi,.logo {
display: table-cell;
}
.inner .desktop_navi {
text-align: left;
}
.header .inner .desktop_navi:first-child {
text-align: right;
}
This is not the best solution, but it works, is responsive and there are no problems with older browsers. If anyone finds a realy good solution with a single navigation, please let me know!
flex box might work for this.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS behaving abnormally

So I am trying this for one day but I am still not able to do it. I have created a new index page for my website. I have copied code from my previous homepage.
If you see the sliders on the left(first homepage) and on the right(new homepage). You could see that on the new homepage the sliders are behaving abnormally. I can't figure out in my CSS why is this happening.
I have tried this:
<div id="testimonial">
<div id="black_title">
<h1>Bead X Testimonials</h1>
</div>
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
<ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<img src="images/test_img.png"> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<img src="images/test_img.png"> The Bead X Difference
</li>
</ul>
</div>
<div class="bx-controls bx-has-pager">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">1
</div>
<div class="bx-pager-item">2
</div>
</div>
</div>
</div>
<div class="navigation">
<!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
<div id="left-prev">
<a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
</div>
<div id="left-next">
<a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
</div>
<div id="read_more"> View all
</div>
</div>
</div>
By abnormally I mean, that the text below the images in the slider is getting overflown and the controls of the slider are messed up.
But the result is still weird. How to resolve this?
Unfortunately there are quite a few issues going on here that you will have to deal with. First it looks like that "Wax Daddys Promise" pane is an image with at Width of 269px yet the column you are trying to align is 275px so it will not fill that area correctly to give you good lines.
The .testimonial class margins are all out of place.
#testimonial {
text-align: center;
width: 95%;
height: 310px;
background: white;
border: 4px solid rgb(209, 209, 209);
margin: 15px 2px 2px 17px;
}
You should use:
margin: 15px 0 0 0;
or better yet:
margin-top: 15px;
And that is just to give yourself a top buffer. If you give the same to each of the testimonial classes or just use class="testimonial" on all of those you'll get the top separation.
That should help a bit. In the future you may want to look into bootstrap, makes grid layout really easy without having to get deep with custom styling. Hope that helps.
You will still need to do a bit of formatting to clean up the layout, but this should help you resolve some of the issues:
Modified CSS:
#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }
Also, add a clear fix after your #read_more and after your .bx-controls DIVs:
<div style="clear: both;"></div>

how to set the width of page element in jquery

there is a tool bar in the left of my page, the width of the tool bar is 35px, the main content panel is in the right of my page and has CSS float:right I want to set the width of main content panel with 100%-35px, so that the tool bar can be displayed, how can I achieve this effect, many thanks.
You can use calc(). But i'm not sure about browser compatibility. So try jquery solution.
Layout should be like this.
<div style="width: 100%">
<div id="toolbar" style="display: inline-block; width: 35px"></div>
<div id="main-content" style="display: inline-block"></div>
<div>
in jquery:
$("#main-content").width($(window).width() - 35);
if there is padding or margin detect them also.
It's convenient to do this by using absolute position. It doesn't need to use javaScript and it handle screen size change event correctly.
the css like bellow:
.toolbar {
position: absolute;
width: 35px;
}
.content {
position: absolute;
left: 35px;
right: 0px;
}
see the demo in jsFiddle.
Pure CSS based approach:
css:
.container {
padding-left: 50px;
border: 1px solid red;
}
.toolbar {
width: 35px;
margin-left: -50px;
padding: 0 5px;
list-style-type: none;
}
.main {
width: 100%;
}
.col {
display: inline-block;
vertical-align: top;
}
html:
<div class="container">
<ul class="toolbar col">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<div class="main col">
<p>This is the place holder for Main Content</p>
</div>
</div>
http://cdpn.io/hlfFG
Sounds like this can easily be done with CSS.
#main-content {
width: 100%;
margin-right: 35px;
}

Categories

Resources