My code shows and hides divs depending on which button the user clicks, implemented by simple myElement.style.display = 'none'; statements.
Can transitions be used when these divs are shown/hidden? I.e. when button-1 is clicked, text relating to button-1 fades into view; when button-2 is clicked, text relating to button-2 fades into view as the previous button-1 text fades out?
As is, the divs snap in and out of view. I am looking for a smoother transition.
I have attempted it with the code which is shown commented out. It just doesn't work. Any tips are much appreciated, thank you.
JS
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
respoding_div = document.getElementById(divId);
if(visibleDivId == divId) {
respoding_div.style.display = 'block';
// respoding_div.style.transition = 'display 0.3s ease-in block'
}
else {
respoding_div.style.display = 'none';
// respoding_div.style.transition = 'display 0.3s ease-in none'
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
<div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
<div class='accordion' onclick="divVisibility('Core1');">
<img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
</div>
<div class='accordion' onclick="divVisibility('Core2');">
<img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
</div>
<div class='accordion' onclick="divVisibility('Core3');">
<img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
</div>
</div>
<div class="all_divs">
<div id="Core1" class="subdiv" style="display:none;">TEXT #1</div>
<div id="Core2" class="subdiv" style="display:none;">TEXT #2</div>
<div id="Core3" class="subdiv" style="display:none;">TEXT #3</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding-left:100px;
padding-right:100px;
padding-top: 20px;
width: 80px;
}
.accordion:hover {
opacity: 0.7;
}
.accordion img {
width: 50px;
margin: 0 auto;
}
.all_divs > div {
color: #232f3e;
width: 95%;
text-align: center;
background-color:#fafafa;
position: absolute;
padding:2%;
border-top: 2px solid #e6e7e8;
}
h1{
font-weight: lighter;
color: #232f3e;
}
td{
padding: 2%;
}
it will not work not because of the syntax or something wrong in JS but because of the display property can't be transitioned from state to another. u can use opacity for that.
Related
I have a inline element. I am trying to hide and show it using button. But when I click document.getElementById('').style.display = 'inline'; I'm getting block elements. How to get the element inline as it was set before.
my code looks like;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#mydata{
display:none;
font-size: 25;
}
.chartCard {
width: 100vw;
height: calc(90vh - 100px);
background: rgb(133, 43, 43);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 650px;
padding: 8px;
border-radius: 20px;
margin: 1px 22px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
.button:hover{
background-color: #005201;
color: rgb(255, 253, 250);;
}
.button {
background-color: rgb(69, 9, 188);
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 2px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
</style>
<script>
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'inline';
}
}
</script>
</head>
<body>
<button class="button" onclick="changedata(1)">Myreport</button>
<button class="button" onclick="changedata(0)">Mydata</button>
<div id="mydata">
<h1>This is my Report</h1>
</div>
<div class="chartCard" id="myreport">
<div class="chartBox">
<p>Ram</p>
</div>
<div class="chartBox">
<p>Shyam</p>
</div>
</div>
</body>
</html>
So, as you can see as I click button, inline element are getting converted to block element. how to resolve it. looking for your help. Thanks in advance
Update your function to set display to flex for myreport, initially you have set display:flex for .chartCard
function changedata(parameter) {
if (parameter == 0) {
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
} else {
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
fiddle here: https://jsfiddle.net/fhps08re/
You are using display:flex so you have to set it back.
Also, you don't need js to hide or show your sections, you can use :target.
.menu{
display:flex;
}
a{
margin-right:20px;
}
.section{
padding:20px;
width:fit-content;
border: 1px solid black;
display:none;
}
.section:target{
display:block;
}
<div class="menu">
go to A
go to B
go to C
</div>
<br>
<div id="a" class="section">Section A</div>
<div id="b" class="section">Section B</div>
<div id="c" class="section">Section C</div>
when you click on button, your 'myreport' element get display: 'inline'. it's work correct. because your elements with 'chartBox' class is div and div has display: block in its default css, the elements shows in two line.
use this to correct :
when you click the button, instead of set display to inline, set display to flex. as you do this in your css.
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
or you can use span instead of div with class: 'chartBox'
I just need some help with this small header of my project. I decided to include all the header files so you can run it in snippet and check for yourself what is happening. The only thing that I have having problem with is my JS file. If you run the file, you would get a menu bar and a shopping cart on top, I designed them to not open up at the same time hence the if else statements. Now the problem is after the web page loads, I cannot open the menu bar right away no matter how many times I click it. But, if I try to click the shopping cart, it would require two clicks before it drops down and works. But here's the weird part, after the shopping cart has dropped down, the menu bar would now work. After this occurrence, everything works the way they are intended to work. A little help please, I am currently stuck on this one. Thanks!
var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');
showShoppingBtn.addEventListener('click', ()=>{
if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
showShopping.style.display = 'block';
}
else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
showMenu.style.display = 'none';
showShopping.style.display = 'block';
}
else {
showShopping.style.display = 'none';
}
});
var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');
menuBtn.addEventListener('click', ()=>{
if(showMenu.style.display == 'none' && showShopping.style.display == 'none'){
showMenu.style.display = 'block';
} else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
showShopping.style.display = 'none';
showMenu.style.display = 'block';
} else {
showMenu.style.display = 'none';
}
});
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap");
body {
font-family: "Montserrat", sans-serif;
margin:0;
padding: 0;
}
.top-content{
background: orange;
display: flex;
}
.shopping-menu{
width: 100%;
}
#shopping-cart{
font-size: 2.5em;
cursor: pointer;
padding-right: 0;
float: right;
margin-right: 1em;
}
.top ul{
margin-top: 3em;
list-style: none;
margin-right: 1em;
}
.top li{
padding-right: 1.2em;
margin-bottom: .5em;
text-align: right;
text-transform: uppercase;
}
.top-content-container{
width: 100%;
}
.top-dropdown{
display: none;
}
.site-logo img{
position: absolute;
width: 100vw;
display: none;
}
.bottom{
background-color:#0e1338;
color: white;
display: flex;
position: relative;
}
.menu{
padding-right: 1em;
width: 100%;
}
.menu-button{
float: right;
cursor: pointer;
padding-right: 1em;
}
.bottom-content-container{
margin-left: auto;
margin-right: 0;
text-align: right;
padding-right: 1em;
}
.bottom-content-container ul{
list-style: none;
}
.menu-bar{
width: 3em;
height: .5em;
background-color: white;
margin: .5em 0;
}
.bottom-dropdown{
display: none;
margin-top: 4em;
text-align: right;
}
.bottom-dropdown li{
margin: .7em 0;
text-transform: uppercase;
}
.top li a{
color: black;
text-decoration: none;
}
.bottom li a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles/header.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<section class="top">
<div class="top-content">
<nav class="shopping-menu">
<i class="fa fa-shopping-cart" id="shopping-cart"></i>
<div class="top-content-container">
<div class="top-dropdown" id="top-dropdown">
<ul>
<li>Cart</li>
<li>Checkout</li>
<li>My Purchases</li>
</ul>
</div>
</nav>
</div>
</div>
</section>
<section class="bottom">
<div class="site-logo">
<img src="images/AutoNation-logo.png" alt="AutoNation Logo">
</div>
<nav class="menu">
<div class="menu-button" id="menu-button">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</div>
<div class="bottom-content-container">
<ul>
<div class="bottom-dropdown" id="bottom-dropdown">
<li>Services</li>
<li>Special Offers</li>
<li>Browse</li>
<li>Contact</li>
<li>Location</li>
<li>My Account</li>
</div>
</ul>
</nav>
</div>
</section>
<script src="scripts/header.js"></script>
</body>
</html>
It's because first time you entered the click function both style.display are not filled. so the condition
showShopping.style.display == 'none' && showMenu.style.display == 'none'
will not be evaluate
one quick solution to use your code is to initialize style.display at the end of the js part
showShopping.style.display = 'none';
showMenu.style.display = 'none'
When you do element.style.someStyle, you access only the inline style of the element. So the first time you click on showShoppingBtn it will pass in the last else -> setting the inline style of it to display: none.
A quick fix to that would be to add inline style directly in the html. like so :
<div class="top-dropdown" id="top-dropdown" style="display: <The defautl display you want>;">
And
<i class="fa fa-shopping-cart" id="shopping-cart" style="display: <The default display you want>;"></i>
Your HTML is invalid
You really should toggle a class. Add class hide to the menus and have .hide {display:none}
Then you can do
showShoppingBtn.addEventListener('click', () => {
showMenu.classList.add("hide")
showShopping.classList.toggle("hide")
});
menuBtn.addEventListener('click', () => {
showShopping.classList.add("hide")
showMenu.classList.toggle("hide")
});
LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>
The content bodies of an accordion open by clicking on panels. This is usually what's best. What I am trying to do now is change this behavior so that the content bodies only get revealed by clicking on a link included in one of the panels (or anywhere else, really). Hope that makes sense.
First of all: Is this possible?
This is the code right now:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
width: 103%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: -5px;
}
.bg {
width: 100%;
}
.active,
.accordion:hover {
background-color: #fff;
}
.panel {
padding: 50px 0px;
display: none;
width: 100%;
background-color: white;
overflow: hidden;
border-style: groove;
}
.accordion.active+div {
display: block
}
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<button class="accordion"><div class="parent">Only the following link should open the content panel: link_1</button>
<div class="panel">
<p>Content 1</p>
</div>
<button class="accordion">Only the following link should open the content panel: link_2</button>
<div class="panel">
<p>Content 2</p>
</div>
<button class="accordion">Only the following link should open the content panel: link_3</button>
<div class="panel">
<p>Content 3</p>
</div>
<button class="accordion">Only the following link should open the content panel: link_4</button>
<div class="panel">
<p>Content 4</p>
</div>
<script>
function scrollElmVert(el,num) { // to scroll up use a negative number
var re=/html$/i;
while(!re.test(el.tagName) && (1 > el.scrollTop)) el=el.parentNode;
if(0 < el.scrollTop) el.scrollTop += num;
}
var acc = document.getElementsByClassName("accordion");
var i;
var open = null;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
if (open == this) {
open.classList.toggle("active");
open = null;
} else {
if (open != null) {
open.classList.toggle("active");
}
this.classList.toggle("active");
open = this;
//Scroll to clicked element
open.scrollIntoView();
scrollElmVert(open,-68);
}
});
}
</script>
</body>
</html>
Few changes to the css, but overall its an html issue. You will need to have two different elements or at least different classes to distiguish between the one that opens your accordion and the one that doesn't
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: -5px;
display: inline;
}
.not-accordion {
color: #444;
font-size: 15px;
display: inline-block;
}
.bg {
width: 100%;
}
.active,
.accordion:hover {
background-color: #fff;
}
.panel {
padding: 50px 0px;
display: none;
width: 100%;
background-color: white;
overflow: hidden;
border-style: groove;
}
.accordion.active+div {
display: block
}
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_1</button>
<div class="panel">
<p>Content 1</p>
</div>
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_2</button>
<div class="panel">
<p>Content 2</p>
</div>
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_3</button>
<div class="panel">
<p>Content 3</p>
</div>
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_4</button>
<div class="panel">
<p>Content 4</p>
</div>
<script>
function scrollElmVert(el, num) { // to scroll up use a negative number
var re = /html$/i;
while (!re.test(el.tagName) && (1 > el.scrollTop)) el = el.parentNode;
if (0 < el.scrollTop) el.scrollTop += num;
}
var acc = document.getElementsByClassName("accordion");
var i;
var open = null;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
if (open == this) {
open.classList.toggle("active");
open = null;
} else {
if (open != null) {
open.classList.toggle("active");
}
this.classList.toggle("active");
open = this;
//Scroll to clicked element
open.scrollIntoView();
scrollElmVert(open, -68);
}
});
}
</script>
</body>
</html>
i have a Sidebar on the left of the Screen. I can toggle it by pressing a button. On the right I have the content.
I want to place the button on a horizontal bar on the top. The sidebar seems to cover this bar so I can not see the button.
This is my current code:
The Html File:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
The Css File:
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
The Js File:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
This is what I want to archieve
It seems I just have to fix the CSS to get it done.
I added margin-top:0; to your topBar and removed top: 0; from your sideNav.
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
*{
margin: 0;
padding: 0;
}
#topBar {
margin-top:0;
background-color: navy;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 50px;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
#topBar {
position: fixed;
display: inline-block;
width: 100%;
height: 50px;
background-color: red;
}
#container {
display: flex;
padding-top: 50px;
flex: 1;
flex-direction: row;
}
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="main">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</div>
</body>
</html>
Take a look flex-box concepts
Checkout this example of using the new HTML5 semantic elements.
http://www.w3schools.com/html/html5_semantic_elements.asp
I have taken most of the example elements from the link above and created a simple HTML5 page.
You can add/remove/modify any of the section below by removing the HTML or removing/adding additional CSS properties.
var toggleButton = document.getElementById('toggle-button');
var pageWrapper = document.getElementsByClassName('wrapper')[0];
toggleButton.addEventListener('click', function() {
toggleClass(pageWrapper, 'toggle-hidden')
});
function toggleClass(el, className) {
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
header, footer {
width: 100%;
text-align: center;
background: #DDD;
padding: 0.25em !important;
}
.title {
font-weight: bold;
font-size: 2.25em;
margin-bottom: 0.5em;
}
.subtitle {
font-size: 1.5em;
font-style: italic;
}
.wrapper {
background: #EEE;
}
nav {
text-align: center;
background: #CCC;
padding: 0.25em !important;
}
aside {
float: left;
top: 0;
width: 12em;
height: 100%;
padding: 0.25em !important;
}
aside a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
}
aside a:before {
content: '➢ ';
}
article, section {
margin-left: 12em !important;
background: #FFF;
padding: 0.25em !important;
}
/* Default HTML4 typography styles */
h1 { font-size: 2.00em !important; margin: 0.67em 0 !important; }
h2 { font-size: 1.50em !important; margin: 0.75em 0 !important; }
h3 { font-size: 1.17em !important; margin: 0.83em 0 !important; }
h5 { font-size: 0.83em !important; margin: 1.50em 0 !important; }
h6 { font-size: 0.75em !important; margin: 1.67em 0 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: bolder !important; }
p { font-size: 1.00em !important; margin: 1em 0 !important; }
#toggle-button {
display: block;
position: absolute;
width: 5em;
height: 5em;
line-height: 1.5em;
text-align: center;
}
.wrapper.toggle-hidden aside {
display: none;
width: 0;
}
.wrapper.toggle-hidden article, .wrapper.toggle-hidden section {
margin-left: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<header>
<button id="toggle-button">Toggle<br />Sidebar</button>
<div class="title">What Does WWF Do?</div>
<div class="subtitle">WWF's mission:</div>
</header>
<div class="wrapper">
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
<aside>
<h1>Links</h1>
HTML
CSS
JavaScript
jQuery
</aside>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
</div>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: someone#example.com.</p>
</footer>