Develop Reference

Positioning of elements in a horizontal timeline

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/

Webpage loaded in a div not visible and the end of scrollbar of another div could not be seen

In the pasted fiddle link I have 3 div tags in the html section. one div comprises the header part. Second div presents a tree structure and third div loads a webpage. In the result of the fiddle code, 1st div is there with header part. second div is also there with the expected tree structure but could not see the end of the scrollbar. Third div which should show an html page is not showing.
https://jsfiddle.net/msridhar/qfq5su63/18/
The purpose of this entire code is to present 3 divs in one page and each should be scrollable in case of overflow. I don't want the default scroll bar that would be given by . Please help me with this problem.
HTML file:
<body class="disableScroll" style="height: 100%;">
<div id="headerDiv">
<img id="headerImg" src="./assets/Logo.png" width="280" height="125" alt="Logo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div class="results1" style="width:250px; height:100%; border:1px solid #ff8000; margin-left:0; margin-top:130px;overflow:scroll;">
<ul>
<li item-selected='true'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
</ul>
</div>
<div class="results2" style="width:100%; height:100%; margin-left:280px;margin-top:130px; overflow:scroll;">
</div>
CSS File:
html{
height: 100%;
overflow: hidden;
}
.disableScroll{
overflow-x: hidden;
overflow-y: hidden;
}
#headerDiv{
position: fixed;
top: 0;
width: 100vw;
//border-bottom: 3px solid #808080;
}
#headerHR{
width: 100%;
height: 1px;
}
#headerImg{
float: left;
margin-top: 0px;
margin-left: 0px;
}
#headerPre{
float: left;
font-family: "Arial", Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 24px;
}
Javascript file:
$('.results1').jqxTree({
width: '250px',
theme: 'energyblue'
});
$(".results2").load("https://fiddle.jshell.net/t5L1tywu/1/show/",function(){
});

try to change the results1 style with
width:250px;height:100%;border:1px solid #ff8000;margin-left:0;margin-top:130px;overflow:scroll; float: left;
and results2 with
height:100%;margin-left:280px;margin-top:130px;overflow:scroll;
in this way in yuor fiddle you can see all the three div.
I don't have a solution for the scroll issue.

How do I make a content slider that shows the next slide when the user scrolls vertically or clicks one of the bottom nav tabs?

This is my first post on Stack Overflow so sorry if I'm not clear in what I'm saying. But basically I'm working on a little school project and it's basically an All About Me site to refresh on what we've learned over the summer. I have tabs on the bottom of the screen for navigation and I have content in the center of the screen. Upon clicking a new tab or scrolling down, I want the corresponding div to slide into where the old content was. I don't have a huge knowledge of JavaScript so I have no idea how to go about doing this. I've been looking at image sliders but those aren't really what I'm looking for. I'm looking for something like this: http://coolcarousels.frebsite.nl/c/8/
This is how it looks right now:
http://i.imgur.com/BqZ78S3.jpg
This is basically all of my HTML so far:
<main class="content-container">
<section class="slider animated fadeInDown">
<div class="intro-content">
<h1>Hi, my name is Brian Hurtado.</h1>
<h3>I enjoy making beautiful and innovative websites.</h3>
</div>
<div class="summer-content">
<h1>This is my text about summer.</h1>
<h3>This is some more text about my summer.</h3>
</div>
<div class="design-content">
<h1>This is some text about web design.</h1>
<h3>This is some more text about web design.</h3>
</div>
<div class="schedule-content">
<h1>This is some text about my schedule.</h1>
<h3>Probably going to put a table in here.</h3>
</div>
<div class="site-content">
<h1>This is some text about what I want to do with the school site.</h1>
<h3>This is some more text about what I want to do with the school site.</h3>
</div>
<div class="goals-content">
<h1>These are my goals that I hope to achieve in the future.</h1>
<h3>I have to think of some goals.</h3>
</div>
</section>
</main>
<nav class="main-nav">
<ul>
<li class="active">
<a href="#">
<span>
<img src="img/home.png">
</span>
<b>Intro</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/summer.png">
</span>
<b>Summer</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/design.png">
</span>
<b>Web Design</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/schedule.png">
</span>
<b>Schedule</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/site.png">
</span>
<b>School Site</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/goals.png">
</span>
<b>Goals</b>
</a>
</li>
</ul>
</nav>
And this is my CSS:
body {
font-family: Lato, sans-serif;
}
.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}
.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}
.intro-content h3 {
margin-top: -30px;
}
.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}
.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.main-nav ul li a {
color:white;
text-decoration: none;
}
.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.main-nav ul li:not(.active) {
opacity: 0.5;
}
.main-nav ul li:hover {
opacity: 1;
}
.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}
html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}
What exactly do I need to do from here? I was thinking maybe doing an onclick function that switches the active class so that the non-active class is display:none, but I want it to have a sliding effect. I would really appreciate any help. If you need me to clarify anything please let me know.

You can use a variety of plugins as mentioned by Fabio above, or you might use this code as your starting point - FIDDLE.
Your link to coolcarousels showed it going horizontally, so that's how the fiddle works.
JS
$("#selector a").on("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
},
1200);
});
Attribution is noted in the JS section of the fiddle.

I used a very simple script from this website;
http://jquery.malsup.com/cycle2/
Simply download and include Cycle2 plugin on your page (Make sure you also have the latest version of Jquery) and then declare your slideshow markup. There are loads of demo's on the site which are extremely easy to follow.
Goodluck with your project!

html drop down issues

ok so here goes. Im working on expanding my html, css, and javascript knowledge. To do this i began writing a few basic website designs (on a live server, but all made up and fake). On my most recent one, I've decided to go for dropdown menu's. To space this all properly i decided to go with a table element, and use some very basic (which is all i know right now) javascript. I am currently using a .dropdown and a .dropdown:hover to make my menus work. However since i used the table element, each time i "dropdown" my menu on my test page, the other menus titles resize to the size of the dropdown window. Any ideas how to combat this? heres my code....
CSS
.dropdown ul {
display: none
}
.dropdown:hover ul {
display: block;
background-color: white;
}
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
HTML
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<td class="dropdown">
<h1>
Search By Department
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</td>
<td class="dropdown">
<h1>
Search by Company
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</td>

You seem to have guessed it already: don't use table, besides being semantically incorrect (<table> is meant for tables with data) it gives you all kinds of other issues because of their default styling.
Use a straightforward (embedded) ul and position the sub menus absolute, make sure to make the top level menu items (li) position: relative; and display: inline-block; and it should be pretty straightforward from there.

One way to accomplish this is in you td {} style give a specific height such as 'height: 50px' and the float them 'float: left'. might not be the best option but it seems to accomplish it.

If you wish to use plain javascript. That should work fine.
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
.dd1,.dd2{display:none;}
</style>
<title>Discount Electronics</title>
</head>
<body>
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<tr>
<td onmouseover="fun('dd1')"> Search By Department</td>
<td onmouseover="fun('dd2')"> Search by Company</td>
</tr>
<tr><td>
<div class='dd1 dropdown'>
<h1>
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</div>
</td>
<td>
<div class='dd2 dropdown'>
<h1>
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</div>
</td></tr>
</table>
<script type='text/javascript'>
function fun(cls){
var arr=document.getElementsByClassName('dropdown');
for(i=0;i<arr.length;i++)
{
arr[i].style.display='none';
}
document.getElementsByClassName(cls)[0].style.display='block'
}
</script>
</body>
</html>

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;
}