Making a full height and width menu bar when pressing on button - javascript

I want to when I press a menu button on the top right, something slides from the left to the right full screen (full height and width) and everything else vanishes.
The problem here is that if you scroll down then click the menu button it doesn't show it only shows on the top.
Plus there's something I don't quite understand, the height and the width. If i want something to cover the whole page or only the height and width that is visible to us how do we do something like that ? For this I put 100% height and width so it's the visible part of the page, what if we want the whole page to be covered in something ?
How does the height and width work?
$("#side-button").click(function(){
if ($("#side-bar").css("display") == "block"){
$("body").css("overflow","auto");
$("#side-bar").animate({width: "0%"},400,function(){
$("#side-bar").css("display","none");
});
}
else{
$("#side-bar").css("display","block").animate({width: "100%"},400,function(){
$("body").css("overflow","hidden");
});
}
});
html{
height:100%;
width:100%;
}
body{
position: relative;
height:100%;
width:100%;
}
#side-bar{
position: absolute;
width:0%;
background: black;
height: 100%;
z-index: 100;
display:none;
}
#side-button{
display:flex;
position:fixed;
right:10px;
top:10px;
z-index: 100;
width:30px;
height:30px;
justify-content: space-around;
flex-direction: column;
}
#side-button div{
width:100%;
height:4px;
background-color: gray;
display:block;
}
#side-button:hover #first{
transform: rotate(1turn);
transition: 1s transform;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
<div id="side-bar">
<div class="page-header text-center header1">
<h1>THIS IS A HEADER</h1>
</div>
</div>
<div id="side-button" >
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
<div class="container" style="padding-bottom:20px;">
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
</div>
<script src="bootstrap.js"></script>
</body>
</html>


You could do it changing the position absolute from the side bar to fixed, the position will be relative to the viewport and will be fixed at the top
$("#side-button").click(function(){
if ($("#side-bar").css("display") == "block"){
$("body").css("overflow","auto");
$("#side-bar").animate({width: "0%"},400,function(){
$("#side-bar").css("display","none");
});
}
else{
$("#side-bar").css("display","block").animate({width: "100%"},400,function(){
$("body").css("overflow","hidden");
});
}
});
html{
height:100%;
width:100%;
}
body{
position: relative;
height:100%;
width:100%;
}
#side-bar{
position: fixed;
top: 0;
width:0%;
background: black;
height: 100%;
z-index: 100;
display:none;
}
#side-button{
display:flex;
position:fixed;
right:10px;
top:10px;
z-index: 100;
width:30px;
height:30px;
justify-content: space-around;
flex-direction: column;
}
#side-button div{
width:100%;
height:4px;
background-color: gray;
display:block;
}
#side-button:hover #first{
transform: rotate(1turn);
transition: 1s transform;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
<div id="side-bar">
<div class="page-header text-center header1">
<h1>THIS IS A HEADER</h1>
</div>
</div>
<div id="side-button" >
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
<div class="container" style="padding-bottom:20px;">
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
</div>
<script src="bootstrap.js"></script>
</body>
</html>


The side bar has a absolute position, which still refers to the document.
So you want to take #side-bar outside of the document flow by placing it fixed.
It will then be "above" the viewport.
I than use top, left, bottom and width to animate it.
$("#side-button").click(function(){
if ($("#side-bar").css("display") == "block"){
$("body").css("overflow","auto");
$("#side-bar").animate({left: "-100%"},400,function(){
$("#side-bar").css("display","none");
});
}
else{
$("#side-bar").css("display","block").animate({left: "0%"},400,function(){
$("body").css("overflow","hidden");
});
}
});
html{
height:100%;
width:100%;
}
body{
position: relative;
height:100%;
width:100%;
}
#side-bar{
position: fixed;
top:0;
bottom: 0;
left:-100%;
width: 100%;
background: black;
z-index: 100;
display:none;
}
#side-button{
display:flex;
position:fixed;
right:10px;
top:10px;
z-index: 100;
width:30px;
height:30px;
justify-content: space-around;
flex-direction: column;
}
#side-button div{
width:100%;
height:4px;
background-color: gray;
display:block;
}
#side-button:hover #first{
transform: rotate(1turn);
transition: 1s transform;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
<div id="side-bar">
<div class="page-header text-center header1">
<h1>THIS IS A HEADER</h1>
</div>
</div>
<div id="side-button" >
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
<div class="container" style="padding-bottom:20px;">
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
</div>
<script src="bootstrap.js"></script>
</body>
</html>

Related

Carousel with Jquery

I am struggling to understand how to implement a simple carousel. I've tried the append()/prepend() functions but can't seem to get it to operate how I would like.
The setup I am using:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>First Step Connections - Online Media Marketing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="testimonial-carousel-container">
<div id="btn-prev"> < </div>
<div id="testimonial-carousel">
<div id="testimonial-container">
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
How was lunch today?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Football is the best sport!
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Meeting at 12pm.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
The weather outside is gorgeous.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Susan can you call Jim?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris</br>
Houston, TX
</span>
</div>
</div>
</div>
<div id="btn-next"> > </div>
</div>
</body>
</html>
Basically I have a carousel container, and within the carousel container I have a testimonial container with x amount of testimonial divs.
The css seems okay in that I hid the overflow of carousel container, and removed white-space wrapping on the testimonial container. So everything appears fine.. I just need help with the logic of how I would endlessly be able to scroll through the x amount of divs.
So when I get to the last testimonial it continues fluidly to the first.
Here is my css incase you need it:
:root {
--main-red-color: #e11a2c;
--main-blue-color: #013e7b;
--main-green-color: #8dc63f;
}
* {
color:var(--main-blue-color);
box-sizing:border-box;
font-family:"Lato", sans-serif;
}
#testimonial-carousel-container {
width:70%;
margin: auto;
position:relative;
}
#testimonial-carousel {
margin: auto;
background-color:var(--main-blue-color);
position:relative;
overflow:hidden;
}
#testimonial-container {
white-space:nowrap;
width:100%;
position:relative;
}
.speech-bubble {
border-radius:5px;
background-color:var(--main-green-color);
width:auto;
display:inline-block;
padding:20px;
text-align:center;
position:relative;
}
.speech-bubble .arrow {
border-style: solid;
position:absolute;
}
.bottom {
border-color: var(--main-green-color) transparent transparent transparent;
border-width:8px 8px 0 8px;
bottom:-8px;
}
#testimonial {
padding:10px 5px 5px 5px;
height:200px;
background-color:var(--main-red-color);
position:relative;
display:inline-grid;
opacity:.4;
}
#testimonial img {
width:40px;
height:40px;
border-radius:50%;
margin-top:13px;
}
#testimonial span {
color:#fff;
font-weight:900;
}
#btn-prev, #btn-next {
position:absolute;
background-color:var(--main-red-color);
color:#fff;
height:40px;
width:40px;
z-index:5;
border:3px solid #fff;
text-align:center;
line-height:40px;
font-weight:900;
margin-top:-20px;
}
#btn-prev:hover, #btn-next:hover {
background-color:var(--main-blue-color);
}
#btn-prev {
top:50%;
left:-40px;
}
#btn-next {
top:50%;
right:-40px;
}
As for the Jquery scripting I am drawing blanks. If you could provide some help as to the logic for completing this I would greatly appreciate it. Is append() prepend() the only way to go?
You can view the demo at:
http://firststepconnections.com/carousel/

flexbox layout on iphone not taking up the right amount of space

I've been trying to get this layout to work for smart phones. What I'm looking to do is have a fixed header that doesn't move and then have a flex container underneath the header that takes up the rest of the screen space. Inside the flex container should be 3 sections of the same size that each takes up the size the flex-container.
My current attempt isn't working. I can't figure out how to keep the fixed header from moving and I can't figure out how to get the flex container the right size with each of the sections.
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
height:80%;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>

If you set the position to fixed or absolute, the element's position must be definite. You either have to additionally set the navbar's width to 100%, or add both the left: 0 and right: 0 properties. Also, don't set each of your sections to height: 80%, but only the flex container. Ensure that each flex item has the flex: 1 property.
Your code should now look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
width: 100%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
flex: 1;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>

How do I prevent the bottom of the section above from leaking into the top of the next one (fullPage.js)

I've had this issue many times, where the scroll is off from the sections and it creates an effect where the top of a section is actually the bottom of one previous. I have an image in a section with position: absolute on it, is that the problem?
Link
Edit: Code
Codepen
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
css3: false
});
});
</script>
<style>
#intro {
backgroundSize: 100% 10% !important;
color: white;
}
img {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section" id="intro">
<img src="https://aos.iacpublishinglabs.com/question/aq/1400px-788px/many-lumens-100-watt-incandescent-light-bulb-give-off_2c6301bc5ccd144.jpg?domain=cx.aos.ask.com"></img>
<h1>Tungsten: It'l light up your day!</h1>
</div>
<div class="section" id="gallery">
<div class="slide">
</div>
<div class="slide">asdfasdf
</div>
<div class="slide">asdfasdfasdf
</div>
</div>
</div>
</body>
</html>

CSS animation and Jquery2

I need help making an interactive website, similar to briandelaney.com .
I especially want to incorporate the slide effect between links that the designer used. I read his code but I am not fluent in Javascript, but am familiar with Jquery.
I want to slide my menu when a link is clicked. How do I animate the CSS transforms with Javascript after this input? The section of code I want animated is on JSFiddle. Here's the code for the animation http://jsfiddle.net/1pc4f081/3/.
<section>
<div class='homecard' style="height:815px;">/* Initially, the menu is a card in the center of the page. I want this to slide to the top of the page when a link is clicked */
<div class="menu home appear" id="mainmenu">
<ul>
<li class="hover-effect1"> <a href="/about" class="main-menu about-link">
<span class="effect" data-hover="About">
<span class="what">
<span> About</span>
</span>
</span>
</a>
<div class="border right">
<div></div>
</div>
</li>
<li class="hover-effect"> <a href="/services" class="main-menu service-link">
<span class="effect" data-hover="Services">
<span class="what">
<span> Services</span>
</span>
</span>
</a>
<div class="border right">
<div></div>
</div>
</li>
<li class="hover-effect 3"> <a href="contact" class="main-menu contact-link">
<span class="effect" data-hover="Contact">
<span class="what">
<span> Contact</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
css:
.homecard {
-webkit-animation-name: pushHeaderUp;
-moz-animation-name:pushHeaderUp;
animation-name:pushHeaderUp;
-moz-animation-duration:3s;
-moz-animation-iteration-count:1;
-moz-animation-timing-function:ease;
-moz-animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease;
-webkit-animation-fill-mode: forwards;
animation-duration:3s;
animation-timing-function:ease;
animation-fill-mode: forwards;
}
#keyframes pushHeaderUp {
0% {
-webkit-transform:translateY(0px);
transform:translateY(0px);
-moz-transform:transloateY(0px)
}
60% {
-webkit-transform:translateY(-180px);
transform:translateY(180px);
-moz-transform:translateY:(-180px)
}
100% {
-webkit-transform:translateY(-240px);
transform:translateY(-240px);
-moz-transform:translateY(-240px)
}
}
JS
$(document).ready(function () {
$('.main-menu').click(function () {
$('.homecard').addClass('.pushHeaderUp');
});

Well that is a whole tutorial my friend.
step - 1 Full HTML structural elements
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style></style>
</head>
<body>
<header class="container text-center">
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class="pull-left text-left">
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<a data-hash=about>about</a>
<a data-hash=work>work</a>
<a data-hash=process>process</a>
<a data-hash=contact>contact</a>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class=container data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
</body>
</html>
step - 2 The css structure
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li{display: inline}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s ease;
}
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
step -3 The approach
step - 3.1 the css approach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style>
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li, nav label{display: inline; margin: 4px}
nav a.active{color:red}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s ease;
}
#aboutInput:checked ~ header nav label[for=aboutInput] a,
#workInput:checked ~ header nav label[for=workInput] a,
#processInput:checked ~ header nav label[for=processInput] a,
#contactInput:checked ~ header nav label[for=contactInput] a,
main section.container.visible{
color: red
}
#aboutInput:checked ~ main section[data-content=about],
#workInput:checked ~ main section[data-content=work],
#processInput:checked ~ main section[data-content=process],
#contactInput:checked ~ main section[data-content=contact],
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
</style>
</head>
<body>
<input type=radio name=radio id=aboutInput checked hidden/>
<input type=radio name=radio id=workInput hidden/>
<input type=radio name=radio id=processInput hidden/>
<input type=radio name=radio id=contactInput hidden/>
<header class="container text-center">
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class="pull-left text-left">
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<label for=aboutInput><a data-hash=about>about</a></label>
<label for=workInput><a data-hash=work>work</a></label>
<label for=processInput><a data-hash=process>process</a></label>
<label for=contactInput><a data-hash=contact>contact</a></label>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class=container data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
</body>
</html>
step - 3.2 Javascript approach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style>
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li, nav label{display: inline; margin: 4px}
nav a.active{color: red}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s cubic-bezier(0.385, -0.600, 0.610, 1.555);
}
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
</style>
</head>
<body>
<header class=container>
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class=pull-left>
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<a data-hash=about class=active>about</a>
<a data-hash=work>work</a>
<a data-hash=process>process</a>
<a data-hash=contact>contact</a>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class="container visible" data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
<script>
//You need this to run the code once the window has fully loaded
window.addEventListener('load', function(event) {
function returnDataHash () {
var navAnchors = document.querySelectorAll("nav a"),
dataHash = this.getAttribute("data-hash"),
hashSection = "data-content=" + dataHash,
sectionContainer = document.querySelector("["+ hashSection +"]"),
sectionContainers = document.querySelectorAll("main section.container");
for ( var j = 0; j < sectionContainers.length; j++) {
sectionContainers[j].classList.remove("visible");
}
for ( var y = 0; y < navAnchors.length; y++) {
navAnchors[y].classList.remove("active");
}
sectionContainer.classList.add("visible");
this.classList.add("active");
}
//main section.container.visible
var navElements = document.querySelectorAll("nav a");
for (var i = 0; i < navElements.length; i++) {
navElements[i].addEventListener("click", returnDataHash ,false)
}
}, false)
</script>
</body>
</html>
step - 3.3 Jquery approach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style>
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li, nav label{display: inline; margin: 4px}
nav a.active{color: red}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s ease;
}
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
</style>
</head>
<body>
<header class=container>
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class=pull-left>
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<a data-hash=about class=active>about</a>
<a data-hash=work>work</a>
<a data-hash=process>process</a>
<a data-hash=contact>contact</a>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class="container visible" data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
<script src=https://code.jquery.com/jquery-2.1.3.min.js ></script>
<script>
// You need this to run the code once the window has fully loaded
$( document ).ready(function() {
$("nav a").click( function () {
var dataHash = $(this).attr("data-hash");
$(this).addClass("active").siblings().removeClass("active");
$("main section[data-content=" + dataHash + "]").addClass("visible").siblings().removeClass("visible");
})
});
</script>
</body>
</html>
Now you can change the ease function in transition: opacity 0.3s ease, top 0.3s .1s ease; as you like to make it elastic. Have a look at Ceaser - CSS Easing Animation Tool or Easing Functions Cheat Sheet

You can fix my code later to use key frames or whatever you want, but a hope that this can help you at least a little bit:
First of all - fix your js:
$(document).ready(function(){
$('.main-menu').click(function(event){
event.preventDefault();
$('.homecard').addClass('pushHeaderUp');
});
});
And css:
.pushHeaderUp{
-webkit-transform: translateY(240px);
-webkit-transition: -webkit-transform 3s ease;
}
http://jsfiddle.net/1pc4f081/5/

Jquery Mobile - changing icon color in header from some other button click

I want to change color of icon in header from some button click.
I was able to put some color on icon using below CSS: #myhead:after {
background-color: #ff4d4d;
}
But i am not able to change its color from some button click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
/* #id Products */
#myhead:after {
background-color: #ff4d4d;
}
</style>
<script>
function changecolor()
{
$('#myhead:after').css("background-color", "green");
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
<h3>Filter</h3>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>

You can't manipulate css:after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. So you need to create custom circle icon.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.change-color {
background-color: #ff4d4d;
border-radius: 50%;
width: 20px;
height: 20px;
float: right;
margin: -30px 10px 0px 0px;
}
</style>
<script>
function changecolor() {
$('#myhead').css('background-color', 'green');
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class="">
<h3>Filter</h3>
<div class="change-color" id="myhead"></div>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>

Change the CSS as below
#myhead h3 {
background-color: #ff4d4d;
}
And change the JS as below
$('#myhead h3').css('background-color', 'green');

Categories

Resources