I am new to coding and I am trying to achieve the following using JQuery:
I have two Divs Where clicking on the first shows some content and clicking the second would hide the content of the first one and show its content instead (Toggling). What I want to do is that I want to keep the same functionality but I want the second Div to slide to the right when I click on the first Div and make a drawer shape and vice versa. I have attached images to it so it may explain more about my idea.
both of contents are hidden by default.
I can't seem to know how to join these two functionalities together
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="box-container">
<div id="div1">
<h1>Title one</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
<div id="div2">
<h1>Title two</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
</div>
<div id="contentDiv1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
<div id="contentDiv2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
</body>
</html>
CSS
body {
display: inline-block;
margin: 100px 100px 25px 100px;
text-align: center;
}
#box-container {
height: 300px;
display: flex;
}
#div1 {
background: linear-gradient(90deg, #f57350, #fa8282);
width: 50%;
height: 50%;
cursor: pointer;
}
#div2 {
background: linear-gradient(90deg, #a42e5a, #f57350);
width: 50%;
height: 50%;
cursor: pointer;
}
#contentDiv1,
#contetnDiv2 {
margin: 25px;
}
JQuery
jQuery(document).ready(function($){
$('#contentDiv1').hide();
$('#contentDiv2').hide();
$('#div1').on('click', function(){
$('#contentDiv1').slideToggle();
$('#contentDiv2').hide();
});
$('#div2').on('click', function(){
$('#contentDiv2').slideToggle();
$('#contentDiv1').hide();
});
});
attached image
It has more than one solution, and for me, this is my favorite method, I hope it helps you:
$('.tabs .tab').on('click', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
.closest('.tabs').removeClass('active1 active2');
$('.content').hide();
} else {
let i = $(this).index() + 1;
$(this)
.addClass('active')
.siblings('.tab').removeClass('active')
.closest('.tabs').removeClass('active1 active2')
.addClass('active' + i);
$('.content').hide();
$('.content' + i).fadeIn();
}
});
.tabs,
.tabs .tab,
.tabs .content {
border: 1px solid #000;
border-collapse: collapse;
box-sizing: border-box;
}
.tabs {
display: flex;
flex-wrap: wrap;
text-align: center;
position: relative;
}
.tabs.active1 {
padding-left: 0;
padding-right: 65px;
}
.tabs.active2 {
padding-left: 65px;
padding-right: 0;
}
.tabs .tab {
padding: 15px;
cursor: pointer;
min-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.tabs.active1 .tab,
.tabs.active2 .tab {
min-width: 100%;
width: 100%;
}
.tabs .content {
padding: 15px;
min-width: 100%;
display: none;
}
.tabs.active1 .tab1:not(.active),
.tabs.active2 .tab1:not(.active){
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
.tabs.active1 .tab2:not(.active),
.tabs.active2 .tab2:not(.active) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab tab1">div1</div>
<div class="tab tab2">div2</div>
<div class="content content1">div content1</div>
<div class="content content2">div content2</div>
</div>
Related
I am experimenting with a very basic layout that has 4 divs, the first and third divs have dark blue backgrounds and the second and fourth have white backgrounds. I have a div in fixed position to the right with a default white color. I need to write some code that if this fixed div is scrolled through the white background divs, it changes its color to black, if it scrolled in the blue, it remains white as it is.
I tinkered for a whole day with getClientBoundingRect() and the IntersectionObserver API and I didn't have any luck.
Here is the code of the basic layout:
const oddElems = document.querySelectorAll('.oddElem');
const evenElems = document.querySelectorAll('.evenElem');
const allElems = document.querySelectorAll('.elem');
function handleInteresection(entries) {
entries.forEach(entry => {
console.log(entry)
})
}
const observer = new IntersectionObserver(handleInteresection);
allElems.forEach(elem => {
observer.observe(elem);
})
* {
box-sizing: border-box;
}
body {
width: 70%;
margin: auto;
padding: 0;
}
.elem {
border: 2px solid;
}
#elem {
background: #007;
padding: 20rem;
color: white;
}
#elem2 {
padding: 20rem;
background: #fff;
}
#elem3 {
padding: 20rem;
background: #007;
}
#elem4 {
padding: 20rem;
background: #fff;
}
#flyingbox {
padding: 2rem;
width: 2rem;
left: 80%;
position: fixed;
top: 10px;
background: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bounding</title>
</head>
<body>
<div id="flyingbox">
</div>
<div class="elem oddElem" id="elem">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem oddElem" id="elem3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
</body>
</html>
It doesn't look like you have any event listener to track the current scroll position. Basically I created an array of each section's offsetTop (distance from parent top) in reverse order, and conditionally check whether window.scrollY (current scroll position) matches an even or odd index.
const allElems = document.querySelectorAll('.elem');
const offsetTops = Array.from(allElems).map(ele => ele.offsetTop).reverse();
const flyingBox = document.getElementById("flyingbox");
window.addEventListener("scroll", ()=> {
const isBlack = offsetTops.findIndex(offsetTop => window.scrollY + 45 > offsetTop)%2 === 0 ? true : false;
if(flyingBox.classList.contains("black") && !isBlack) flyingBox.classList.toggle("black");
if(!flyingBox.classList.contains("black") && isBlack) flyingBox.classList.toggle("black");
});
* {
box-sizing: border-box;
}
body {
width: 70%;
margin: auto;
padding: 0;
}
.elem {
border: 2px solid;
}
#elem {
background: #007;
padding: 20rem;
color: white;
}
#elem2 {
padding: 20rem;
background: #fff;
}
#elem3 {
padding: 20rem;
background: #007;
}
#elem4 {
padding: 20rem;
background: #fff;
}
#flyingbox {
padding: 2rem;
width: 2rem;
left: 80%;
position: fixed;
top: 10px;
background: #fff;
}
.black {
background-color: black !important;
}
It doesn't look like you have an event listener to retrieve the current scroll position:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bounding</title>
</head>
<body>
<div id="flyingbox">
</div>
<div class="elem oddElem" id="elem">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem oddElem" id="elem3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
</body>
</html>
Is it possible to apply scroll-snap to grand-children nested in children with overflow applied ? I can't seem to make it work.
What I aim to do is have a list of div with each a fixed height on which the viewport should snap vertically
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
Homewer, I would also like the content to be horizontally-scrollable - as their content stretch beyond the viewport width.
They must also scroll together, so using overflow-x on each of them is not possible here.
To do so, I've wrapped the child in a scrollable-wrapper that is horizontally scrollable ( overflow-x : scroll ) and have a fixed width.
And this breaks the vertical scroll snap.
Could someone tell me if there's something I missed or if there's an alternative ?
Note : since each child have a fixed height, I would not mind using scroll-snap-points-y but it has been totally dropped on almost every browser. Is there a way to reproduce this behaviour ?
Edit : I might try this for the snap-point. It's jQuery based.
Vertical scrolling snap jQuery
Snippet
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
overflow-x: scroll;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
I create an effect that is to constantly display the image while scrolling text. I have a question how to make it work the same way, instead of position: sticky, posititon: fixed, so that this effect works on ie.
var sticky = document.querySelector('.sticky-container');
var img = document.querySelector('.sticky-item');
window.addEventListener('scroll',setSticky);
function setSticky(){
var top = sticky.offsetTop - window.pageYOffset;
if(top <= 0){
sticky.classList.add('sticky');
}
if(top.toString().replace('-','') >= sticky.offsetHeight || top >= 0){
sticky.classList.remove('sticky');
}
};
* {
margin: 0;
}
body {
width: 100%;
padding: 120vh 0;
}
p {
font-size: 28px;
color: #fff;
text-align: center;
margin: 80px 0;
}
.sticky-item {
width: 100%;
height: 100vh;
background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}
.sticky-container.sticky .sticky-item{
position: sticky;
top: 0;
z-index: -1;
}
<div class="sticky-container">
<figure class="sticky-item"></figure>
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
EDIT:
<div class="sticky-container">
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
.sticky-item {
background-attachment: fixed;
background-size: 100%;
}
Dai is correct, you do not need to use a script to achieve this effect.
https://jsfiddle.net/tractionworks/h3r5uvqm/8/
Since you need to use the position:sticky feature I doubt this works on IE without a big effort and actually using JS. But with 1.4% global usage I doubt this is worth your time.
However if you are fine with the coverage of sticky, I would entirely skip using JS and solve it via CSS:
* {
margin: 0;
}
body {
width: 100%;
padding: 120vh 0;
}
p {
font-size: 28px;
color: #fff;
text-align: center;
margin: 80px 0;
}
.sticky-item {
position: sticky;
top: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}
<div class="sticky-item"></div>
<div class="sticky-container">
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
I am working on a mobile ePub reader. One functionality I would like to implement is adding expandable notes, which would be tied to highlighted words.
I would like to know how to iterate over the set of created marginalia and apply the background color and offset that I got for each highlight. In other words, each marginale should have the same background color as its highlight, and have the same offset from the top of the screen (so that both are aligned).
Thanks,
function Marginale(offset, color) {
this.offset = offset;
this.color = color;
}
(function createMarginalia() {
let $highlights;
$highlights = $('.highlight');
$highlights.each(function() {
let color, offset, screen;
let $marginalia;
color = $(this).css('backgroundColor');
offset = $(this).position().top;
screen = $('#screen');
screen.append('<div class="marginale"></div>');
$marginalia = $('.marginale');
$marginalia.each(function() {
$(this).css({
'backgroundColor': color,
'top': offset
});
});
});
})();
(function hideNavOnScroll() {
let nav, screen, yPos;
nav = $('nav');
yPos = 0;
screen = $('#screen');
screen.scroll(function() {
let yOffset = $(this).scrollTop();
if (yOffset > yPos) {
nav.fadeOut();
} else {
nav.fadeIn();
}
yPos = yOffset;
});
})();
#import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--dpi: 2;
--texidiumGreen: #00857c;
--slateGrey: #47484a;
--lightGrey: #eee;
--mediumGrey: #aaa;
--redHighlightColor: rgba(255, 0, 0, 0.2);
--greenHighlightColor: rgba(0, 255, 0, 0.2);
--blueHighlightColor: rgba(0, 0, 255, 0.2);
--yellowHighlightColor: rgba(255, 255, 0, 0.2);
--grayHighlightColor: rgba(0, 0, 0, 0.2);
--fontSize: 12.5px;
--appBarHeight: 54px;
--bottomBarHeight: 64px;
--contentPadding: 40px;
--marginaleSize: calc(var(--contentPadding) - 8px);
}
body {
background-color: var(--lightGrey);
}
#phone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 30px var(--mediumGrey);
}
#screen {
width: calc(750px / var(--dpi));
height: calc(1334px / var(--dpi));
overflow-y: scroll;
background-color: white;
}
::-webkit-scrollbar {
display: none;
}
#app-bar {
position: fixed;
top: 0;
width: 100%;
height: var(--appBarHeight);
background-color: var(--texidiumGreen);
}
#bottom-bar {
position: fixed;
bottom: 0;
width: 100%;
height: var(--bottomBarHeight);
background-color: var(--slateGrey);
}
.hide-nav {
visibility: hidden;
}
#content {
padding-right: var(--contentPadding);
padding-left: var(--contentPadding);
font-size: var(--fontSize);
font-family: Roboto;
line-height: 1.5;
}
h1:first-of-type {
margin-top: calc(var(--fontSize) * 2 + var(--appBarHeight));
}
h1 {
margin-top: calc(var(--fontSize) * 2);
font-size: calc(var(--fontSize) * 2);
font-weight: bold;
}
h2 {
margin-top: calc(var(--fontSize) * 1.5);
font-weight: bold;
}
p {
margin-top: var(--fontSize);
}
p:last-of-type {
margin-bottom: var(--fontSize);
}
.highlight.highlight-red {
background-color: var(--redHighlightColor);
}
.highlight.highlight-green {
background-color: var(--greenHighlightColor);
}
.highlight.highlight-blue {
background-color: var(--blueHighlightColor);
}
.highlight.highlight-yellow {
background-color: var(--yellowHighlightColor);
}
.highlight.highlight-gray {
background-color: var(--grayHighlightColor);
}
.marginale {
width: var(--marginaleSize);
height: var(--marginaleSize);
border-radius: 50%;
line-height: var(--marginaleSize);
color: white;
/*background: black;*/
}
.marginale {
text-align: center;
cursor: pointer;
}
.marginale:before {
font-family: FontAwesome;
content: '\f249';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="phone">
<div id="screen">
<nav id="app-bar"></nav>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? <span class="highlight highlight-red">Numquam itaque velit dolor explicabo aut, laborum?</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<h2>Dolor Sit Amet</h2>
<p><span class="highlight highlight-green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p><span class="highlight highlight-yellow">Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque
velit dolor explicabo aut, laborum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="highlight highlight-blue">Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim?</span> Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. <span class="highlight highlight-gray">Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
</div>
<nav id="bottom-bar"></nav>
</div>
</div>
The App will start with 2 buttons in the footer initially.
Depending on user interaction with the app, a third button may need to be inserted/shown. And later it may need to be hidden/removed depending on some user selections form other parts of the app.
Button text is to be centred horizontally inside each button and the footer will need to be fully covered by the buttons except the tiny vertical division for spacing.
The footer in my code has an undesired blank space on the right.
What is the best way to solve this?, hopefully with as much css as possible and the rest with javaScript "I a guessing". Thanks
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
Is this what your looking for?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
footer > button {
display: inline-block;
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
If you mean that you want all three buttons to take up the same space then this will work for you:
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}