I've been stuck on this issue for hours and hours at this point. I've been trying to work through it on my own but I am just unable to figure it out. Someone save me!
Problem: Initially the problem was that my footer wouldn't stick to the bottom of the page, so I followed this popular YouTuber's tutorial on how to fix it using flex. Here's the vid: Easy sticky footer - stop a footer from floating up a short page!. This caused a new issue to arise, now there is this extra white space between my footer and the main content which I think is due to the "margin-top: auto" I added to the footer per the tutorial. This issue isn't apparent in the mobile view of my page but as I expand the page, the main content rises to the top.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.main__wrapper {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: repeat(4, 1fr);
grid-template-areas: "sec1" "sec2" "sec3" "sec4";
}
p {
margin: 10px 0 10px 0;
}
button {
border: none;
border-radius: 4px;
color: white;
width: 77px;
height: 18px;
font-family: 'Roboto', sans-serif;
font-size: 8px;
font-weight: 400;
}
button:hover {
border-width: 1px;
border-style: double;
border-color: rgb(255, 114, 114);
}
.header__text {
font-size: 17.4px;
}
.header__text span {
font-size: 0.6em;
}
h3:first-of-type {
font-size: 8.22px;
color: #908B87;
}
h3:last-of-type {
font-size: 9.35px;
margin-top: 1.3em;
}
.header__wrapper {
display: flex;
justify-content: center;
background-image: url("../images/nycforheader.jpeg");
background-size: cover;
background-position-y: 40%;
font-family: 'Roboto', sans-serif;
color: white;
flex-direction: column;
height: 88px;
min-height: 12.6vh;
}
.headertext__grouped {
margin-left: 2em;
}
.navbar__menu {
display: block;
border-top: solid #908B87 1.15px;
border-bottom: solid #908B87 1.15px;
}
#navbar__list {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 4vh;
width: 50%;
}
#navbar__list li {
list-style: none;
font-family: 'Roboto', sans-serif;
font-size: 6.02px;
}
#navbar__list li a {
text-decoration: none;
color: #000000;
}
#navbar__list li a:hover {
text-decoration: underline red;
text-underline-offset: 100%;
}
.landing__container {
display: flex;
flex-direction: column;
box-shadow: #000000;
}
.landing__container h2 {
font-family: 'Roboto', sans-serif;
font-size: 13.62px;
}
.landing__container p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 9px;
}
#section1 {
grid-area: sec1;
}
.section2 {
grid-area: sec2;
}
.section3 {
grid-area: sec3;
}
.section4 {
grid-area: sec4;
}
.your-active-class,
.section3 {
padding: 14px 0 14px 14px;
background: radial-gradient(100% 100% at 50% 0%, rgba(233, 211, 160, 0.65) 28.12%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 25%);
}
.section2,
.section4 {
padding: 14px 14px 14px 0;
background: radial-gradient(100% 100% at 50% 0%, rgba(212, 168, 138, 0.65) 28.12%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 25%);
}
.section2,
.section4 {
text-align: right;
}
#s2_button,
#s4_button {
text-align: right;
}
#s2_button button {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/time-square.jpeg');
background-size: cover;
background-position: center;
}
#section3 {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/nyc-hotel.jpeg');
background-size: cover;
background-position: center;
}
#s4_button button {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/statue-liberty.jpeg');
background-size: cover;
background-position-y: 21%;
}
footer {
display: flex;
justify-content: space-around;
text-align: center;
align-items: center;
height: 9vh;
margin-top: auto;
background-color: #908B87;
}
footer a {
text-decoration: none;
color: white;
font-family: 'Roboto', sans-serif;
}
.footer__list {
line-height: 10%;
}
.footer__list li {
display: inline-block;
list-style: none;
font-size: 8.02px;
margin-inline: 8px;
}
.social__icons {
display: inline-block;
margin-inline: 8px;
font-size: 0.8em;
}
footer a:hover {
color: #ffffffcc;
}
/* tablet design */
#media screen and (min-width: 768px) {
.header__text {
font-size: 25.4px;
}
h3:first-of-type {
font-size: 12.22px;
color: #908B87;
}
h3:last-of-type {
font-size: 12.35px;
margin-top: 1.3em;
}
.header__wrapper {
display: flex;
justify-content: center;
background-size: cover;
font-family: 'Roboto', sans-serif;
color: white;
flex-direction: column;
height: 99px;
min-height: 12.6vh;
}
}
<header class="page__header">
<div class="header__wrapper">
<div class="headertext__grouped">
<h1 class="header__text">New York City <span>Travel Guide</span></h1>
<h3>USA</h3>
<h3>#1 in Best Places to Visit In NYC</h3>
</div>
</div>
<nav class="navbar__menu">
<ul id="navbar__list">
</ul>
</nav>
</header>
<div class="main__wrapper">
<main>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Why Go To New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa. Duis in velit eget risus commodo convallis. Sed at lorem a nibh pulvinar viverra. Aenean varius sed dolor pretium condimentum.</p>
</div>
</section>
<section class="section2" data-nav="Section 2">
<div class="landing__container">
<h2>32 Best Things To Do in New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa.</p>
<div id="s2_button">
<button type="button">Click To View</button>
</div>
</div>
</section>
<section class="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Best Hotels in New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa.</p>
<button id="section3" type="button">Click To View</button>
</div>
</section>
<section class="section4" data-nav="Section 4">
<div class="landing__container">
<h2>What to Eat in New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa.</p>
<div id="s4_button">
<button type="button">Click To View</button>
</div>
</div>
</section>
</main>
</div>
<footer>
<ul class="footer__list">
<li>About Us</li>
<li>Contact</li>
<li>Newsletters</li>
<li>Store</li>
</ul>
<div class="social__icons__container">
<a class="social__icons" href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a class="social__icons" href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</div>
</footer>
<script src="js/app.js"></script>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Initially the problem was that my footer wouldn't stick to the bottom
of the page
There are many successful approaches to achieving this effect, but one of the simplest, oldest and most broadly supported is to use absolute positioning on the <header> and <footer> and apply overflow: auto to the <main> element.
In the example below you can delete text from (or add text to) the <main> element. You will see that the <footer> remains positioned at the bottom of the viewport no matter how much or how little text the <main> element contains.
Working Example 1: (Run Code Snippet and click Full Page)
body {
margin: 0;
}
header,
footer {
position: absolute;
left: 0;
display: block;
width: 100vw;
height: 100px;
background-color: rgb(127, 127, 0);
}
main {
height: calc(100vh - 200px);
min-height: calc(100vh - 200px);
max-height: calc(100vh - 200px);
margin-top: 100px;
padding: 0 18px;
overflow: auto;
}
header {
top: 0;
}
footer {
top: calc(100vh - 100px);
}
h2 {
color: rgb(255, 255, 255);
text-align: center;
text-transform: uppercase;
height: 100px;
line-height: 100px;
margin: 0;
padding: 0;
}
<header>
<h2>Header</h2>
</header>
<main contenteditable="true">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled “ORANGE MARMALADE”, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody underneath, so managed to put it into one of the cupboards as she fell past it.</p>
<p>“Well!” thought Alice to herself, “after such a fall as this, I shall think nothing of tumbling down stairs! How brave they’ll all think me at home! Why, I wouldn’t say anything about it, even if I fell off the top of the house!” (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end? “I wonder how many miles I’ve fallen by this time?” she said aloud. “I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—” (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) “—yes, that’s about the right distance—but then I wonder what Latitude or Longitude I’ve got to?” (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. “I wonder if I shall fall right through the earth! How funny it’ll seem to come out among the people that walk with their heads downward! The Antipathies, I think—” (she was rather glad there was no one listening, this time, as it didn’t sound at all the right word) “—but I shall have to ask them what the name of the country is, you know. Please, Ma’am, is this New Zealand or Australia?” (and she tried to curtsey as she spoke—fancy curtseying as you’re falling through the air! Do you think you could manage it?) “And what an ignorant little girl she’ll think me for asking! No, it’ll never do to ask: perhaps I shall see it written up somewhere.”</p>
</main>
<footer>
<h2>Footer</h2>
</footer>
Alternatively, you can tweak the setup above very slightly to build a display which no longer has an absolutely positioned <footer>.
Working Example 2:
body {
margin: 0;
}
header,
footer {
display: block;
width: 100%;
height: 100px;
background-color: rgb(127, 127, 0);
}
main {
min-height: calc(100vh - 200px);
margin-top: 100px;
padding: 0 18px;
overflow: auto;
}
header {
position: absolute;
top: 0;
left: 0;
}
h2 {
color: rgb(255, 255, 255);
text-align: center;
text-transform: uppercase;
height: 100px;
line-height: 100px;
margin: 0;
padding: 0;
}
<header>
<h2>Header</h2>
</header>
<main contenteditable="true">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled “ORANGE MARMALADE”, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody underneath, so managed to put it into one of the cupboards as she fell past it.</p>
<p>“Well!” thought Alice to herself, “after such a fall as this, I shall think nothing of tumbling down stairs! How brave they’ll all think me at home! Why, I wouldn’t say anything about it, even if I fell off the top of the house!” (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end? “I wonder how many miles I’ve fallen by this time?” she said aloud. “I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—” (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) “—yes, that’s about the right distance—but then I wonder what Latitude or Longitude I’ve got to?” (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. “I wonder if I shall fall right through the earth! How funny it’ll seem to come out among the people that walk with their heads downward! The Antipathies, I think—” (she was rather glad there was no one listening, this time, as it didn’t sound at all the right word) “—but I shall have to ask them what the name of the country is, you know. Please, Ma’am, is this New Zealand or Australia?” (and she tried to curtsey as she spoke—fancy curtseying as you’re falling through the air! Do you think you could manage it?) “And what an ignorant little girl she’ll think me for asking! No, it’ll never do to ask: perhaps I shall see it written up somewhere.”</p>
</main>
<footer>
<h2>Footer</h2>
</footer>
I am trying to make a section where there are 2 cards, each one with a button and a small descriptive text.
What I am trying to achieve is that when I click on the button 3 things happen:
1 The button changes content, that goes from a "+" to a "-", but that is what worries me the least.
2 that a div is displayed with information corresponding to that card and that occupies 100 vw
and
3 that if there is a div displayed and the other button on another card is clicked, the first div disappears and the second appears and occupies the 100vw
-----What am I using? I am using HTML5, CSS, Vanilla Js, Bootstrap (mainly for the css)-----
This is what I want to achieve:
This is what I have achieved:
var jsaccordion = {
init : function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-btn");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select : function () {
this.classList.toggle("open");
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-container");
});
.accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
.accordion-btn.open + .accordion-text{
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'>+</button>
<div class="accordion-text">
<p>
some specific and special information for the first div.</p>
</div>
</div>
</div>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'>+</button>
<div class="accordion-text">
<p>some specific and special information for the second div.</p>
</div>
</div>
</div>
</div>
Please help me, I don't know how to do it
It is a lot easier to do this in jQuery, but here is how I would approach it using Vanilla JS.
The idea is that to center something that is based on neither elements, but moreso the browser window, is to use a shared container (outside of either element) to print to. This takes the guess work out of positioning as well.
On clicking the button, the information should be copied from the accordion, and printed to the target container. Also on that click, check if the other is active to remove the active class. Adding classes to the active container to change the button symbol + and -, using CSS pseudo-elements.
Keeping the arrows inside the accordion containers will also make it easier to position them according to the HTML element it is in.
Sidenote: You should only use an HTML ID once on the entire page, otherwise use a class for multiple instances. This is in reference to #accordion-container.
var sharedCont = document.getElementById('shared-container');
var allCont = document.querySelectorAll('#accordion-container');
var jsaccordion = {
init : function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-btn");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select : function () {
var targ1 = this.parentElement.closest('#accordion-container'), // find parent
targText = targ1.querySelector('.accordion-text').innerHTML; // grab text for shared container
if( targ1.classList.contains('active') ){
// when clicked, if active, reset them all
targ1.classList.remove('active');
sharedCont.innerHTML = '';
sharedCont.classList.remove('active');
} else {
// when clicked, reset them all, then activate
for (let i = 0; i < allCont.length; i++) {
var el = allCont[i];
el.classList.remove('active');
}
targ1.classList.add('active');
sharedCont.innerHTML = targText;
sharedCont.classList.add('active');
}
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
overflow: hidden;
}
#accordion-container {
position: relative;
}
#accordion-container button::before {
content: '+' !important;
}
#accordion-container.active button::before {
content: '-' !important;
}
#accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
#accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
/* .accordion-btn.open + .accordion-text{
display: block;
} */
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
display: none;
}
#shared-container.active {
display: block;
text-align: center;
}
#shared-container p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
<div id="shared-container"></div>
</body>
</html>
Its very simple you can assign id or class to those div, you want to hide or show then use javascript or jquery method to show and hide on the specific event click.
A small snippet of working example. It can be optimized and made dynamic.
Also as Owais suggested, we can simply use .show() and .hide() instead of .addClass() and .removeClass()
var firstDiv = $("#div-1-1");
var secondDiv = $("#div-1-2");
$(document).ready(function() {
//On Click of 1st Div, we're also toggling the 2nd DIV in case if it was open
// Can handle in a better way as well
// Same goes for the 2nd div
firstDiv.click(() => {
$(".dc-11").addClass("open");
$(".dc-12").removeClass("open");
});
secondDiv.click(() => {
$(".dc-12").addClass("open");
$(".dc-11").removeClass("open");
});
});
.outer-block {
width: 200px;
margin: auto;
}
.block {
display: flex;
}
.block>div {
flex: 1;
text-align: center;
border: 2px solid red;
height: 80px;
}
.open {
display: block !important;
}
.dc-11 {
background: red;
display: none;
}
.dc-12 {
background: orange;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='outer-block'>
<div class="block">
<div>
<p>First</p>
<button id="div-1-1">+</button>
</div>
<div>
<p>Second</p>
<button id="div-1-2">+</button>
</div>
</div>
<div id="div-1-1-content" class="dc-11">First Div Content will be displayed here</div>
<div id="div-1-2-content" class="dc-12">Second Div Content will be displayed here</div>
</div>
</div>
I have a text-image component, and i need to vertical-align text middle to the floated image , if the text is less (condition one) (for larger screens). if the text is more then let it wrap around the floated image (condition two) (again for larger screens). How can i do this in CSS or do we need Javascript for this? Here is fiddle. Both my conditions one and two should work.
.clearfix { clear: both; }
.text-img { padding-left: 15px; padding-right: 15px; }
.text-img .info-box .info--body p { max-width: none; }
.text-img .info-box { text-align: justify; }
.text-img .stock-img { width: 100%; }
#media (min-width: 992px) {
.text-img.text-right .stock-img { width: 50%; float: left; }
.text-img.text-right .stock-img { padding-right: 15px; padding-bottom: 15px; }
.text-img.text-left .stock-img { width: 50%; float: right; }
.text-img.text-left .stock-img { padding-left: 15px; padding-bottom: 15px; }
}
<div class="clearfix text-img text-left">
<img src="https://cdn0.vox-cdn.com/thumbor/gvDQZLtlEM7U99rmTEdMoUtLRJU=/0x96:2039x1243/1600x900/cdn0.vox-cdn.com/uploads/chorus_image/image/50319283/ipad1_2040.0.0.jpg" alt="iPad" class="img-responsive stock-img" />
<div class="info-box">
<header class="info--header">
<h3 class="h3">The science of today is the technology of tomorrow.</h3>
</header>
<div class="info--body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper urna nec lectus malesuada tincidunt. Aenean faucibus, nulla sed luctus tempus, purus libero vestibulum velit, et blandit odio nunc ac quam. Donec tellus tellus, venenatis ac diam nec, sodales viverra orci.</p>
</div>
</div>
</div>
I want the final output to be like this, which satisfys both my condition:
Well the answers given are right, this cannot be solved just by CSS alone, so i had to come up with jQuery solution. For those looking for solution for such scenarios, here is jQuery code that solved my problem:
$(document).ready(function() {
$(".text-img").each( function() {
var cH = parseInt( $( this ).height() );
var tH = parseInt( $( this ).find('.info-box').height() );
if( tH < cH ) {
var pt = ( cH - tH ) / 2;
$( this ).find('.info-box').css({
"padding-top" : pt + "px"
});
}
});
});
Use a flex box layout when you are in the smaller screens.
#media (min-width: 992px) {
.text-left {
display: flex;
align-items: center;
justify-content: center;
}
.text-left img {
max-width: 50%;
height: auto;
margin-right: 10px;
}
}
Preview
Output: http://jsbin.com/lulecudaji/edit?html,css,output
I would recommend you better/older than flex-box tick for centring elements.
For horizontal centring use simply text-align: center; on container div
For vertical centring uses propoerty of display inline-block elements which aligned in to the middle to center all display inline-block in the line.
Making it bigger i'll move other elements to the center
Making it 100% height causes the othere elements centers to the middle.
You simply need to create ghost (not visible) - red element to center content - blue and green elements.
For ghost element use for it before or after of conteiner div:
.continer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
And display inline-block your content:
.content{
display: inline-block;
}
Of course delete position:absolute etc.
Last tweak will be to get rid of that small spaces between elements (especially between red and others) use one of the tricks from here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Probably you will need to set font size to zero.
More about ghost elements:
https://css-tricks.com/centering-in-the-unknown/
I want to change the content of div through javascript, but not just to one paragraph.suppose if I have three to four paragraphs,the text field should keep changing,with effect. I have written this code,but it changes only one paragraph.Its not changing again.It would also be good if it were depicted like the letter falls and content is in next letter.Please help
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function myFunction() {
document.getElementById("paraone").innerHTML="<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
}
</script>
<style>
body {
background: linear-gradient(#ccc, #fff);
font: 14px sans-serif;
padding: 20px;
}
.letter {
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 26px auto 0;
max-width: 550px;
min-height: 300px;
padding: 24px;
position: relative;
width:100%;
}
.letter:before, .letter:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.letter:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.letter:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}
</style>
<body>
<button type="button" onClick="myFunction()">Click</button>
<div class="letter">
<p>Dear Friends,</p>
<p id="paraone">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui,onvallis est pretium.</p>
</div>
</body>
</html>
Your question is unclear - but I think your aim is to append text, rather than replace.
document.getElementById("paraone").innerHTML = document.getElementById("paraone").innerHTML + "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
This will set the innerHTML of the element to "the inner HTML of the element, AND <marquee behavior='scroll' direction='left'>Hello World!</marquee>. It pretty much says, "set it to what is it at the moment, PLUS .....".
http://jsfiddle.net/daveSalomon/756yxaqh/
This approach isn't ideal - the marquee, for example, will be reset each time you append something new, as the entire content of the element is being replaced. A better way would be to insert a new element in the div.
var p = document.createElement("p");
p.innerHTML = "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
document.getElementById("paraone").appendChild(p);
http://jsfiddle.net/daveSalomon/756yxaqh/1/
BTW, if you're just starting out with JavaScript, it is worth being aware of jQuery. The second code snippet could be written as:
$('#paraone').append('<marquee behaviour="scroll" direction="left">Hello World!</marquee>');
I have a semi-transparent navigation bar that has a fixed position at the top of the window, and content underneath it.
I'd like to make it so that the #content isn't ever visible underneath the navigation bar. Setting the top margin of the content to the same height as the navigation bar works, when the user is at the top of the page. However when the user scrolls down, the content becomes visible underneath the navigation bar.
Basically I'm trying to push/clip the top of the content div, so none of its content is ever visible underneath the navigation bar.
The navigation bar's transparency is particularly important, so simply having an opaque gray background won't work for what I need.
Any suggestions for accomplishing what I'm trying to do?
Code:
http://jsfiddle.net/NAMka/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="content"></div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#content {
margin-top: 60px;
}
JS:
// This is a little cleaner than just manually repeating the p tags.
for (var i = 0; i <= 20; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
Some mock-ups of what I'm trying to do
This is what the fiddle will look like if you scroll down a little bit. Notice how the content is visible underneath the navigation bar.
Ideally, I'd like the content to be clipped, so it isn't visible underneath the navigation bar.
Update:
Although not ideal, I figured out a somewhat hackish way to achieve what I want involving some JS and the overflow:hidden CSS setting. It seems to work well enough for my purposes.
http://jsfiddle.net/NAMka/4/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="container">
<div id="veil">
<div id="content"></div>
</div>
</div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#container {
background: yellow;
margin-top: 60px;
z-index: -1;
position: relative;
}
#veil {
background: red;
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
overflow: hidden;
}
#content {
background: blue;
position: absolute;
left: 0px;
bottom: 0px;
}
JS:
for (var i = 0; i <= 6; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
var height = $('#content').height();
$('#container').height(height);
$('#veil').height(height);
$(window).scroll(function() {
$('#veil').height($('#content').height() - $(window).scrollTop() );
});
You can add a white div that sits beneath the navbar but above the content.
http://jsfiddle.net/naLz7/
HTML
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="bottom"></div>
<div id="content"></div>
CSS
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#bottom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
z-index: 0;
}
#content {
margin-top: 60px;
}