so, I tried to remaster my previous projects and change it into flex. and it getting messed up because of ul element is block and I changed it using JavaScript into a display flex.
this is the fiddle
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$(menu).css("display", "flex");
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
header{
width:100%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
header #logo{
width:15%;
position:absolute;
top:0;
left:0;
z-index:2;
}
#logo img{
width:100%;
}
header nav{
width:100%;
position:relative;
z-index:1;
}
nav ul.clearfix{
width:100%;
padding:0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
ul.clearfix a{
list-style:none;
text-decoration:none;
border:solid 2px #e74c3c;
padding:8px 0px;
width:12%;
max-width:300px;
font-size:15px;
color:#e74c3c;
text-align:center;
cursor:pointer;
transition:all 0.3s ease-in-out;
}
ul.clearfix a:nth-child(n+2){
margin-left:-1px;
}
ul.clearfix a:hover{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
ul.clearfix #currentPage{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
/*default*/
#media screen and (max-width: 768px) {
header{
height:50px;
justify-content:flex-start;
}
nav {
z-index:2;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:50px;
border-bottom: 0;
}
nav a#pull{
line-height:50px;}
nav ul.clearfix {
width:100%;
display: none;
height: auto;
background:#ccc;
position:relative;
flex-direction:column;
z-index:2;
}
ul.clearfix a{
border-bottom:1px dotted black;
font-size:14px;
width:100%;
position:relative;
height:50px;
text-align:center;
z-index:2;
}
ul.clearfix a:first-child{
border-top:1px dotted black;
margin-top:50px;
}
nav a#pull {
display: flex;
position: absolute;
align-items:flex-start;
justify-content:flex-start;
padding-left:10px;
right:10px;
top:5px;
}
nav a#pull:after {
background:#ccc;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
line-height:50px;
right:15px;
top:0px;}
div#burger{
width:20px;
height:20px;
position: absolute;
right:0px;
top:0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index:4;}
div#burger span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: red;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#burger span:nth-child(1){top: 0px;}
#burger span:nth-child(2){top: 7px;}
#burger span:nth-child(3){top: 14px;}
#burger.open span:nth-child(1){
top: 7px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#burger.open span:nth-child(2){
opacity: 0;
left: -30px;
}
#burger.open span:nth-child(3){
top: 7px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
}
/*default Portrait*/
#media screen and (max-width: 773px) and (orientation: portrait) {
div#logo{
width:30%;
}
}
/* iPad Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
div#logo{
width:20%;}
}
/* iPad Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
header{
width:100%;
height:80px;
}
div#logo {
width: 25%;}
nav {
width: 65%;}
}
/*default Landscape*/
#media screen and (max-width: 773px) and (orientation: landscape) {
div#logo{
width:20%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="sameThisHeight">
<div id="logo" class="logo">
<img src="assets/Logo.png">
</div>
<nav class="clearfix">
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
REGISTRATION
TUTORIAL
CONTACT US
</ul>
<a href="#" id="pull">
<div id="burger">
<span></span>
<span></span>
<span></span>
</div>
</a>
</nav>
</header>
The thing is,
when i tried to clicked the burger at the first time it's back and forth like it has something wrong with it.
and the second time i opened the burger, it collapse the nav and it did good, no no it's not good actually it's not good at all.
Somehow the sequence has changed the "x" button for the opening the nav and the "burger icon" to close the nav. It definetly not ok.
I don't know for what i did so wrong about it, the right thing should be in place is the opposite of what i did the "x" button for close the nav and the "burger icon" to open up the nav.
My thought was because I inserted this in my JavaScript
$(menu).css("display", "flex");
Because, before i adding this into my javascript it did good performance but not good enough to match with the design. the last project i did fine because of not using flex and go stright with UL LI tags. is there anyway to solve this problem, and keep using flex for it? please help.
This lines causes the issue on first time clicking. You should put the display: flex after the slideToggle();, I should point out that it will not be a smooth transition as the slideToggle(); puts the display: block;. You should maybe do a css solution or maybe make a container around the <ul>...</ul>.
if ($('#burger').hasClass("open")) {
//here you set it to be display
$(menu).css("display", "flex");
$("section").css("z-index", 1);
//here you toggle display, which will be flex, so you hide it
menu.slideToggle();
}
change to (fiddle, I changed your styling a bit for demo, you are free to use your own)
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Your html/css has some issues and should be re-worked.
The <ul> has to contain <li>
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
REGISTRATION
TUTORIAL
CONTACT US
</ul>
should be
<ul class="clearfix">
<li><a id="currentPage" href="index.php">HOME</a></li>
<li>REGISTRATION</li>
<li>TUTORIAL</li>
<li>CONTACT US</li>
</ul>
Also why do you use the class clearfix when you are not using float? I never target a clearfix class for styling as you do in this case, rather give it a class of navigation or something.
Guys im having big problems with a site i created i can't get heights in % to make everything equal. Instead i used px and i feel like it is inadequate. I tried changing all the items to % but the div collapse to the containing elements and don't actually use the % of space given. I have sectioned my page into 2 part with a couple of rows in each and i can't set the row height in % only in px it works. any ideas? i will upload the parts of the script here and the rest of Jfiddle.
HTML:
<div class="table-container">
<div class="table-block footer-push"><!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row header">
<div class="one columns"><input class="bbar" placeholder="search"></div>
<div class="eleven columns person"><span><a>Rajat Sharma</a><i class="fa fa-angle-down fa-fw op"></i></span> <img class="loginimg" src="logout.png"></div>
</div>
<div class="row">
<div class="twelve column">
<div class="pbox"><img alt="Paragon" class="pimg" src="paragon_sqaure.png"></div>
</div>
</div>
<div class="row">
<div class="ten columns PP"><a>Paragon Portal</a></div>
<div class="two columns PP"><input class="more-button" type="button" value="MORE..."></div>
</div>
</div>
<!-- end primary div.container --></div>
<!-- end primary div.table-block -->
<div class="table-block cont">
<div class="container">
<footer class="twelve columns" id="footer">
<div class="four columns steps">
<div class="active-cases"><a>Active Cases</a></div>
<div class="newcomments"><a>New Comments</a></div>
<div class="active-open-cases"><a>Active Open Cases</a></div>
<div class="newcomments2"><a>New Comments</a></div>
<div class="stats">
<div class="guages">
<div class="c100 p12 small dark orange"><span>90</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark green"><span>20</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark"><span>12%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
<div class="four columns jonarand">
<div class="box1">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20jonar%20logo.png">
<figcaption>Jonar & You</figcaption>
</figure>
</div>
<div class="box2">
<figure><img src="http://www.npnrmanagement.com/Portal/img/person%20(1).png">
<figcaption>Customer & You</figcaption>
</figure>
</div>
<div class="box3">
<figure><img src="http://www.npnrmanagement.com/Portal/img/Community%20Icon%20(1).png">
<figcaption>Paragon Community</figcaption>
</figure>
</div>
<div class="box4">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20Paragon%20Logo.png">
<figcaption>Paragon Software</figcaption>
</figure>
</div>
</div>
<div class="four columns menuitem">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</div>
</footer>
</div>
<!-- end footer div.container -->
<!-- end footer div.table-block --></div>
</div>
the part of the css that pertains to this problem:
html, body {
height: 100%
}
.table-container {
display: table;
height: 100%;
width: 100%;
}
.table-block {
display: table-row;
height: 1px;
}
.footer-push {
height: 50%;
}
#footer {
/* Placeholder footer styles */
}
.cont { height: 50%;}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 100%;
padding: 0; }
}
/* For devices larger than 550px */
#media (min-width: 550px) {
.container {
width: 100%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 33.33333333333333%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Paragon Partner Portal Styles
-------------------------------------------------- */
.bbar {
opacity:.81;
font-family:'Roboto',sans-serif;
font-size:16px;
font-style:italic;
color:#FFF;
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
/*padding: 10px 20px;*/
padding-left:5px;
padding-right:5px;
height:21px;
width:115px;
text-align:center;
border:0 solid rgba(0,0,0,0.22);
-webkit-border-radius:20px;
border-radius:12px;
-o-text-overflow:clip;
text-overflow:clip;
background:rgba(255,255,255,0.13);
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1);
margin-left:20px
}
.person {
text-align:right;
height:inherit
}
.person a {
opacity:.41;
font-family:'Roboto',sans-serif;
font-size:16px;
color:#FFF;
font-weight:500;
text-transform:uppercase
}
.person span {
margin-right:15px
}
.loginimg {
margin-bottom:-6px;
margin-right:15px
}
.pbox {
background:rgba(255,255,255,0.20);
box-shadow:2px 3px 4px 0 rgba(12,12,12,0.05);
margin:0 auto;
display:inline-block;
border-radius:50%;
height:110px;
width:110px;
text-align:center
}
.pimg {
padding-top:21px;
width:70px;
height:60px
}
.PP {
/*margin-top: 133px;*/
text-align:left;
height:50px
}
.PP a {
opacity:.64;
font-family:'Roboto' sans-serif;
font-size:32px;
color:#FFF;
margin-left:20px
}
.more-button {
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
height:17px;
cursor:pointer;
padding:4px 14px;
border:none;
-webkit-border-radius:21px;
border-radius:21px;
color:rgba(255,255,255,0.9);
-o-text-overflow:clip;
text-overflow:clip;
background:#000;
font-family:'Roboto' sans-serif;
font-size:16px;
color:#FFF;
margin-top:15px;
margin-right:15px;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1)
}
.steps {
font-size:20px;
font-weight:500;
color:#fff
}
.active-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.active-open-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments2 {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.stats {
background:rgba(51,51,51,0.28);
height:172px;
font-size:10px
}
.guages {
padding-left:95px;
padding-top:52px
}
.jonarand {
height:426px;
margin-left:0px;
border-left: 3px solid rgba(0,0,0,0);
border-right: 3px solid rgba(0,0,0,0);
}
.jonarand img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 41px;
}
.jonarand figcaption {
text-align: center;
padding-top: 10px;
font-size: 20px;
color: #FFF;
opacity: .60;
}
.box1 {
height:49.25%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
margin-bottom:2px;
}
.box2 {
height:49.25%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left;
margin-bottom:2px;
}
.box3 {
height:50.75%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
}
.box4 {
height:50.75%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left
}
.menuitem {
height:418px;
margin-left:0;
text-align: center;
font-size:20px;
font-weight:500;
color:#fff
}
.menuitem a:link {
text-decoration: none;
color:#FFF;
}
.item1 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item2 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item3 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item4 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item5 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.item6 {
height:20%;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
I am using Skeleton grid system and made some modifications. As you guys can see i tried adding height % to some items to try to make it work but i don't see whats wrong. Can someone point me to the right direction? the rest is on JSFIDDLE.
http://jsfiddle.net/qbj0r5bk/
here is the fullscreen result: https://jsfiddle.net/qbj0r5bk/embedded/result/
Lets take an example. Lets make a div and set it to be height:30%.
Html
<div id="container1"></div>
CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
That won't work, you will end up with a blank page. The reason is, though div is the only component you are going to work with, the page has other components, html and body. When you set the height of the div as 30%, what you are actualy telling is to set the height to be 30% the height of body which is 100% the height of html. However, html does not have any height by default, it is as tall as its content and you initially don't have any content. Lets make a small change to your css.
New CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
html, body {
height:100%;
}
Try out this fiddle: http://jsfiddle.net/r628n48L/1/
I think you shouldn't set html and body height to 100%, because the page will have the same height as the screen height and everything inside it will be an overflow.
If you mean set the height to % instead of fixed unit to create the element responsive to the screen, just write it in vh. For example, height: 50vh or 50% of the viewport height. Try it.
And just delete html, body {height: 100%}.