16

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

  1. 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.

  2. 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>

Improve this question
2
  • 2
    Animations like this are easy to do in css3 and more efficient as well. Just a tip. Commented Mar 22, 2016 at 7:18
  • Please make another question for that topic. :) Commented Mar 22, 2016 at 16:11

4 Answers 4

Reset to default
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.

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

Comments

0

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'); } });
Improve this answer

Comments

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.

Improve this answer

Comments

0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.