Making Tabs with CSS and Javascript work

Question

I have tried to make the snippet work somewhat. I'm just starting out with this and I have only currently designed it for my phone. You can see the problem by clicking on projects and today.

I have a div(#data-container) which consists of two divs(.project, .today) and I want those two divs to be side by side acting like tabs. So, that when I click on their respective button it swipes and shows the respective div. I've got it working but with 2 problems.

How they work - The #data-container has white-space: nowrap(child divs won't wrap and stay side by side and the sliding will work) and it's child div's(.project and .today) are set to width: 100% and inline-block.

Problems with this

The data-container needs to be able to scroll vertically and can wrap text around the currently selected div but white-space: nowrap makes the text overflow. I have tried word-wrap: break-word, it doesn't work. I can also make it work by setting the display: hidden but I want the divs to swipe.
I don't understand why this problem is happening. When I set the #data-container to overflow-y: scroll, it makes the divs horizontally scroll able which breaks the whole system.

I need a way to make the data-container only vertically scroll able and to wrap text.

Jade

extends ./layout.jade

block content
    #maindiv
        .sidebar
            #profile
                img(src= ' #{image} ', width=40, height=40)
                span #{name}
            ul
                li Home
                li +Project
                li +Task
                li Reminders
                li Statistics
                li Settings
                li Help
                li
                    a(href='/logout') Log Out
        header
            span ☰
            h1 LifeHub
        .container
            .navbar
                .navbar-inside-one.below
                    h2 Projects
                .navbar-inside-two.above
                    h2 Today
            #data-container
                .project
                    p It's lonely here. You should add some projects.
                .today
                    input#task(type='text', placeholder='+ Add a New Task', autocomplete='off')

CSS

.container {
  position: relative; }

.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black; }

.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white; }

#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0; }

.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px; }

.navbar-inside-one, .navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  padding: 10px 10px 10px 10px; }

.project, .today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 28px;
  line-height: 1.63em; }

Animating with Javascript

    $('.navbar-inside-two').click(function() {
        $(".project, .today").animate({left: "-" + $("#data-container").width()}, 200);
        $(".navbar-inside-one").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });

    $('.navbar-inside-one').click(function() {
        $(".project, .today").animate({left: "0"}, 200);
        $(".navbar-inside-two").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });

$(document).ready(function() {

  //Height function for container and sidebar
  (function() {
    $(".container, .sidebar").height($("#maindiv").height() - $('header').height());
    $(".sidebar").css('top', 49); //TO BE MADE AGAIN
  })();

  $('span').click(function() {
    var sidebar = $('.sidebar').css('left').replace(/([a-z])\w+/g, '');
    if (sidebar < 0) {
      $('.sidebar').animate({
        'left': '0px'
      }, 200);
      $('.container').animate({
        'left': '150px'
      }, 200)
    } else {
      $('.sidebar').animate({
        'left': '-150px'
      }, 200);
      $('.container').animate({
        'left': '0px'
      }, 200)
    }
  });

  $('.navbar-inside-two').click(function() {
    $(".project, .today").animate({
      left: "-" + $("#data-container").width()
    }, 200);
    $(".navbar-inside-one").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });

  $('.navbar-inside-one').click(function() {
    $(".project, .today").animate({
      left: "0"
    }, 200);
    $(".navbar-inside-two").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });
});

/* Messed up Css from multiple Sass files */

.font-head,
.navbar,
.sidebar {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  letter-spacing: 1.4px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
header {
  width: 100%;
  background-color: #1a70c5;
  padding: 10px;
}
span {
  box-sizing: border-box;
  position: relative;
  font-size: 28px;
  color: #F8F8F8;
}
h1 {
  font-family: 'Poiret One', cursive;
  letter-spacing: 2.2px;
  margin-left: 10px;
  color: white;
  font-size: 28px;
  display: inline-block;
}
.container {
  position: relative;
}
.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black;
}
.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white;
}
#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0;
}
.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px;
}
.navbar-inside-one,
.navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 46%;
  height: 100%;
  padding: 10px 10px 10px 10px;
}
.project,
.today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 24px;
  line-height: 1.63em;
  padding: 20px
}
input[type='text'] {
  position: static;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  width: 100%;
  height: 30px;
  color: black;
}
input[type='text']:focus {
  outline: none;
  border: none;
}
::-webkit-input-placeholder {
  color: #D9D9D9;
}
::-webkit-scrollbar {
  display: none;
}
#maindiv {
  width: 400px;
  height: 550px;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-30%);
  transform: translateX(-50%) translateY(-30%);
  overflow: hidden;
}
.sidebar {
  position: fixed;
  left: -155px;
  height: 100%;
  bottom: 0px;
  width: 150px;
  background: #333;
}
.sidebar ul {
  padding: 0px 5px;
}
.sidebar li {
  color: #F7F7F7;
  font-weight: 100;
  font-size: 22px;
  text-align: center;
  margin-top: 30px;
}
.sidebar li:first-child {
  margin-top: 10px;
}
#profile {
  height: 50px;
  width: 98%;
  margin-top: 10px;
}
#profile img {
  vertical-align: middle;
  border: 1px solid #333;
  border-radius: 100%;
}
#profile span {
  display: inline-block;
  padding: 5px 0px 0px 10px;
  color: white;
  font-size: 18px;
}
@media (max-width: 450px) {
  #maindiv {
    width: 100%;
    height: 100%;
  }
}

<div id="maindiv">
  <div class="sidebar">
    <div id="profile">
      <img src="something.jpg" width="40" height="40" /><span>Derp</span>
    </div>
    <ul>
      <li>Home</li>
      <li>+Project</li>
      <li>+Task</li>
      <li>Reminders</li>
      <li>Statistics</li>
      <li>Settings</li>
      <li>Help</li>
      <li><a href="/logout">Log Out</a>
      </li>
    </ul>
  </div>
  <header><span>☰</span>
    <h1>Derp Title</h1>
  </header>
  <div class="container">
    <div class="navbar">
      <div class="navbar-inside-one below">
        <h2>Projects</h2>
      </div>
      <div class="navbar-inside-two above">
        <h2>Today</h2>
      </div>
    </div>
    <div id="data-container">
      <div class="project">
        <p>Stupid paragraph dosen't wrap when supposed to</p>
      </div>
      <div class="today">
        <input id="task" type="text" placeholder="+ Add a New Task" autocomplete="off" />
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Animations like this are easy to do in css3 and more efficient as well. Just a tip. — Bram Vanroy
– Bram Vanroy, Commented Mar 22, 2016 at 7:18

Furqan Rahamath · Accepted Answer · 2019-04-30 07:40:42Z

1

There is a neat and simple way of doing this using flex. Here is my suggestion:

#data-container {
    display: flex;
}

.project, .today {
    display: flex;
    min-width: 100%;
    white-space: normal;
}

You get vertical scroll as well when the content of any div exceeds the height.

answered Apr 30, 2019 at 7:40

Furqan Rahamath

2,0861 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lavios · Accepted Answer · 2016-03-22 12:50:21Z

I got tired of waiting and I wanted a solution. It's not in any way what I wanted or perfect but it gives the illusion of what I wanted.

I made the .today to display: none, #data-container to overflow-y: auto and overflow-x: hidden then changed the animation.

Then animation now moves the current div to somewhere and then animates it back from that position.

New animation

$('.navbar-inside-two').click(function() {
        if($(this).hasClass('above')) {
            $(".today").css({
                display: 'inline-block',
                left: $("#data-container").width()
            });
            $(".project").css('display', 'none');
            $(".project, .today").animate({left: '0px'}, 150);
            $(".navbar-inside-one").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

    $('.navbar-inside-one').click(function() {
        if($(this).hasClass('above')) {
            $(".project").css({
                display: 'inline-block',
                left: '-' + $("#data-container").width()
            });
            $(".today").css('display', 'none');
            $(".project").animate({left: "0"}, 150);
            $(".navbar-inside-two").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

Rory O'Kane · Accepted Answer · 2018-07-31 15:44:22Z

0

Try this:

#data-container {
    white-space: nowrap;
}
.project, .today {
    white-space: normal;
}

You could also consider #data-container {overflow-y: auto} to remove ugly scrollbar… should still scroll.

Another thing you could do is give #data-container 200% width, and its children 50% width, then slide #data-container.

edited Jul 31, 2018 at 15:44

Rory O'Kane

30.7k11 gold badges101 silver badges133 bronze badges

answered Mar 21, 2016 at 2:36

yezzz

3,0381 gold badge12 silver badges20 bronze badges

Comments

Hassan Siddiqui · Accepted Answer · 2019-12-06 05:28:44Z

word-wrap: break-word does't work with white-space: nowrap, so you actually need to target .project children paragraph.

So just removed below CSS From .project.

word-wrap: break-all;

And add below CSS in your code

.project p {
   white-space: normal;
}

I also done above changes in below code snippet, i hope it'll help you out. Thanks

$(document).ready(function() {

  //Height function for container and sidebar
  (function() {
    $(".container, .sidebar").height($("#maindiv").height() - $('header').height());
    $(".sidebar").css('top', 49); //TO BE MADE AGAIN
  })();

  $('span').click(function() {
    var sidebar = $('.sidebar').css('left').replace(/([a-z])\w+/g, '');
    if (sidebar < 0) {
      $('.sidebar').animate({
        'left': '0px'
      }, 200);
      $('.container').animate({
        'left': '150px'
      }, 200)
    } else {
      $('.sidebar').animate({
        'left': '-150px'
      }, 200);
      $('.container').animate({
        'left': '0px'
      }, 200)
    }
  });

  $('.navbar-inside-two').click(function() {
    $(".project, .today").animate({
      left: "-" + $("#data-container").width()
    }, 200);
    $(".navbar-inside-one").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });

  $('.navbar-inside-one').click(function() {
    $(".project, .today").animate({
      left: "0"
    }, 200);
    $(".navbar-inside-two").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });
});

/* Messed up Css from multiple Sass files */

.font-head,
.navbar,
.sidebar {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  letter-spacing: 1.4px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
header {
  width: 100%;
  background-color: #1a70c5;
  padding: 10px;
}
span {
  box-sizing: border-box;
  position: relative;
  font-size: 28px;
  color: #F8F8F8;
}
h1 {
  font-family: 'Poiret One', cursive;
  letter-spacing: 2.2px;
  margin-left: 10px;
  color: white;
  font-size: 28px;
  display: inline-block;
}
.container {
  position: relative;
}
.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black;
}
.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white;
}
#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0;
}
.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px;
}
.navbar-inside-one,
.navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 46%;
  height: 100%;
  padding: 10px 10px 10px 10px;
}
.project,
.today {
  display: inline-block;
  position: relative;
  width: 100%;
  font-size: 24px;
  line-height: 1.63em;
  padding: 20px
}
.project p {
  white-space: normal;
}
input[type='text'] {
  position: static;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  width: 100%;
  height: 30px;
  color: black;
}
input[type='text']:focus {
  outline: none;
  border: none;
}
::-webkit-input-placeholder {
  color: #D9D9D9;
}
::-webkit-scrollbar {
  display: none;
}
#maindiv {
  width: 400px;
  height: 550px;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-30%);
  transform: translateX(-50%) translateY(-30%);
  overflow: hidden;
}
.sidebar {
  position: fixed;
  left: -155px;
  height: 100%;
  bottom: 0px;
  width: 150px;
  background: #333;
}
.sidebar ul {
  padding: 0px 5px;
}
.sidebar li {
  color: #F7F7F7;
  font-weight: 100;
  font-size: 22px;
  text-align: center;
  margin-top: 30px;
}
.sidebar li:first-child {
  margin-top: 10px;
}
#profile {
  height: 50px;
  width: 98%;
  margin-top: 10px;
}
#profile img {
  vertical-align: middle;
  border: 1px solid #333;
  border-radius: 100%;
}
#profile span {
  display: inline-block;
  padding: 5px 0px 0px 10px;
  color: white;
  font-size: 18px;
}
@media (max-width: 450px) {
  #maindiv {
    width: 100%;
    height: 100%;
  }
}

<div id="maindiv">
  <div class="sidebar">
    <div id="profile">
      <img src="something.jpg" width="40" height="40" /><span>Derp</span>
    </div>
    <ul>
      <li>Home</li>
      <li>+Project</li>
      <li>+Task</li>
      <li>Reminders</li>
      <li>Statistics</li>
      <li>Settings</li>
      <li>Help</li>
      <li><a href="/logout">Log Out</a>
      </li>
    </ul>
  </div>
  <header><span>☰</span>
    <h1>Derp Title</h1>
  </header>
  <div class="container">
    <div class="navbar">
      <div class="navbar-inside-one below">
        <h2>Projects</h2>
      </div>
      <div class="navbar-inside-two above">
        <h2>Today</h2>
      </div>
    </div>
    <div id="data-container">
      <div class="project">
        <p>Stupid paragraph dosen't wrap when supposed to</p>
      </div>
      <div class="today">
        <input id="task" type="text" placeholder="+ Add a New Task" autocomplete="off" />
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Making Tabs with CSS and Javascript work

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related