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>
Related
I am building a reactJS application in which the navbar is present only in middle column. But when I switch to mobile view, due to bootstrap by default the navbar comes below the first column. If I try to change the position to fixed-top it extends to all columns. I need it to stay in the middle in both lg and md views, but in small screens it should come above the first column. I have attached a screenshot.
This is the application in desktop view
This is in mobile view
How can I make this change in my website ??
You need to implement a combination of css, media breakpoints, and some pure JS. Here's a working example.
Switch the nav to position: fixed; at the mobile breakpoint, which I assume is 768.
Because fixed will remove it from the regular HTML element flow and place it overtop of other items, to account for that shift, add margin-top to the first container .element-one that is the same height as the nav + a few extra pixels to account for spacing.
var navBreakpoint = 768,
el1 = document.body.querySelector('.element-one');
navHeight();
window.addEventListener('resize', function(){
navHeight();
});
function navHeight(){
var mt = document.body.querySelector('nav').offsetHeight + 10,
docWidth = document.body.clientWidth;
if( docWidth < navBreakpoint ){
el1.style.marginTop = mt+'px';
} else {
el1.style.marginTop = 'unset';
}
}
.container {
display: flex;
position: relative;
}
.container > div {
padding: 1rem;
margin: 3px;
border: 1px solid #efefef;
}
.container nav {
position: relative;
border: 1px solid #efefef;
background: #efefef;
}
#media(max-width: 768px){
.container {
flex-direction: column;
}
.container nav {
position: fixed;
top: 0;
width: 100%;
height: auto;
left: 0;
padding: 0.5rem;
}
.element-one {
padding-top: 3rem;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="element-one">
Logo
</div>
<div class="element-two">
<nav>I AM THE NAV</nav>
Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Tempor orci eu lobortis elementum nibh tellus molestie. Nulla facilisi morbi tempus iaculis urna.
</div>
<div class="element-three">
A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Eget mauris pharetra et ultrices neque ornare. Lorem mollis aliquam ut porttitor.
</div>
</div>
I have a div that when you hover, another div shows up. They aren't parent/child or wrapped, so I used a script to get this to work the easiest I could and to have what I needed. With .mouseover the hover div slowly appears which is what I want.
My issue is getting the .mouseout to make the hover div slowly disappear and stay gone. I've tried different variations but the closest I got is to make the div slowly fade away, but it pops back up after the delay I had set.
I'm very new to js, really no experience at all. I wrote the first part of this code which works but the .mouseout is what I'm having issues with.
Here's my code:
$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });
$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });
I know it's probably simple, but I don't know much if anything about js.
Here is the html:
<div id="show_stats1" class="stats">
main, visible div
</div>
<div class="stat-1_info" style="visibility:hidden;">
hidden div to be shown on hover
</div>
Here's a jsfiddle https://jsfiddle.net/yt3h9xnf/
You can use the .animate() method with either opacity or visibility. There is no reason to use both.
If you can't figure out which one to use read this answer here.
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").animate({opacity: 1}, 200);
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").animate({opacity: 0}, 200);
});
.stat-1_info {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_stats1" class="stats">
<h1>main, visible div</h1>
</div>
<div class="stat-1_info">
hidden div to be shown on hover
</div>
Make it simple by using fadeIn() and fadeOut() with sec as parameter. This will take care of the time you want to see the text and want to disappear.
Use display:none; which is latest and best in market now than using visibility property.
fadeIn()
fadeOut()
$(document).ready(function() {
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)
});
});
.stats_container {
width: 310px;
padding: 10px;
margin-bottom: 0px;
}
.stats {
width: 300px;
height: 34px;
margin: 15px 0px -3px 0px;
}
.stats h1 {
text-align: left;
}
.stats h2 {
position: absolute;
left: 260px;
margin-top: 8px;
width: 50px;
text-align: right;
}
.stats h1 {
display: inline-block;
font-weight: 400;
color: #000;
line-height: 9.5pt;
font-size: 9.5pt;
}
.stat-1_info {
top: -50px;
margin: 0px;
}
.stat-1_info {
float: right;
position: relative;
left: 0px;
display: inline-block;
width: 380px;
height: 334px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_container">
<div id="show_stats1" class="stats">
<h1>Strength:</h1>
</div>
</div>
<div class="stat-1_info" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam
ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
</div>
I need to make an appearing text in the background-image (banner). Text sentences are in array. The script should take 7 random sentences and show it on background-image with different time of show/hide. Also when the text is hidden every time should take new random co-ordinates place to show. Appearing text shouldn't interefe to each other and other text like h1 or menu items. Sentences should appear only on the right site of the page.
$(function() {
var array = ['first text', 'second sentence', 'Integer nec arcu est. In cursus', 'id tincidunt fermentum.', 'Vivamus mattis rhoncus risus', 'cursus, nec gravida nulla malesuada', 'interdum tortor, id c', 'r viverra arcu id', 'dictum eu volutpat odio', 'Curabitur viverra arcu ', ' elit. Nulla veh', 'posuere velit. Pellentesqu', 'interdum tortor,', 'Vivamus mattis rhoncus risus', 'egestas in blandit in, ultricies ac nibh', 'Vestibulum ante ipsum prim', 'lobortis orci rutrum in.', 'dum finibus. Duis sagittis', 'erat ultrices leo, vi', 'el. Suspendisse blandit mi sit', 'id cursus neque sapien', 'consectetur adipiscing elit.', 'Duis non quam ', 'quis nibh egestas,', 'non maximus luctu', 'non maximus luctu', 'Curabitur a fermentum ante', ]
});
.banner {
background-image: url('http://www.pswca.org/images/skins/bg-banner-blue.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.banner h1 {
font-size: 40px;
font-weight: 200;
line-height: 80px;
color: #000;
}
.banner-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
position: absolute;
right: 0;
height: 100%;
width: 100%;
}
.banner-text h1 {
margin-left: auto;
margin-right: 10%;
}
.animate-text {
position: absolute;
left: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='banner'>
<div class="banner-text align-self-center">
<h1>Text text text,<br>
<span class='text-blue'>text text</span></h1>
</div>
<div class="animate-text">
<!-- here should be apearing sentences -->
<span class='apear'></span>
<span class='apear'></span>
<span class='apear'></span>
<span class='apear'></span>
<span class='apear'></span>
<span class='apear'></span>
</div>
</div>
Sentences should appear only on the right side of the page.
Sentences in array.
Script should take 7 random sentences.
Script take random coordinates for sentences so that they do not collide with each other and with the static text h1.
Putting them on the background with different delay but the same time of the animation.
When the sentence disappears, the next one should be displayed in different place.
Here is what I am trying to do,
I want to add a JavaScript event handler so that when the user moves the mouse cursor onto the content element, a timeout timer is started that will set the opacity of the payWall element to 1.0 – three second later.
Then I want to dd another JavaScript event handler so that when the user clicks the subscribe button, an alert box appears with the message “Subscribing now.”
When the alert is OK-ed, the payWall slides down the page and out of sight. I think I will need to set an interval timer so that the payWall moves down like 2 pixels every 30 milliseconds.
I am not sure how to do it, I tried my best, but if someone can please help me, I would really appreciate it.
function init()
{
document.getElementById("subscribe").onclick = function()
{
}
}
window.onload=init;
* {
margin: 0;
box-sizing: border-box;
}
body {
font: 1em Verdana, sans-serif;
background-color: antiquewhite;
}
h2, h4 {
text-align: center;
}
#header {
border-bottom: 2px solid black;
font-size: 2.5em;
padding: 0.5em 0;
height: 100px;
}
#footer {
border-top: 2px solid black;
padding: 1em 0;
}
#header, #footer {
text-align: center;
background-color: #CCC;
}
#leftnav, #rightnav {
position: absolute;
width: 20%;
padding-top: 3em;
}
#rightnav{
left: 80%;
}
#wrapper {
background-color: dodgerblue;
overflow: hidden;
}
#content div {
border: 1px solid black;
border-radius: 10px;
padding: 0.5em;
margin-bottom: 10px;
background-color: #ccc;
}
#content div:last-child {
margin-bottom: 0px;
}
#content div:hover {
border-color: dodgerblue;
background-color: white;
}
#content {
padding: 0.5em;
margin: 0 20%;
border-left: 2px solid black;
border-right: 2px solid black;
background-color: white;
}
/* ---------------------------------------------------------*/
#payWall {
background-color : darkseagreen;
font-size: 2em;
opacity: 0.5;
}
<body>
<div id="header">
The Header
</div>
<div id="wrapper"> <!-- Can be used to apply bg colour -->
<div id="leftnav">
<h4> Left</h4>
</div>
<div id="rightnav">
<h4> Right</h4>
</div>
<div id="content">
<div>
<h2> Article 1 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse ultricies condimentum velit vel scelerisque.
</p>
</div>
<div>
<h2> Article 2 </h2>
<p>
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
<div>
<h2> Article 3 </h2>
<p>
Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
</div> <!-- end of content -->
</div> <!-- end of wrapper -->
<div id="footer">
<h3>
The End
</h3>
<div id="payWall">
For further access please subscribe here. <br>
<button id="subscribe"> Subscribe</button>
</div>
</div>
</body>
First:
Use <div onmouseenter='setTimeout(doStuff, 3000)'> for a three second delay when the cursor enters the div
In JS:
Add a function, doStuff, which has the following code:
document.getElementById('payWall').style.opacity = '1';
document.getElementById('subscribe').onclick = function(){
alert("Subscribing now");
vanishPayWall();
}
One problem is that the payWall would just keep moving down the page. If you wanted it to disappear, you'd want to put overflow-y: hidden on the payWall, and shorten the paywall by 2px every time as well as setting the upper margin to 2px higher. Maybe something like
function vanishPayWall() {
var key = window.setInterval(function(){
var pw = document.getElementById('payWall');
pw.style.height = String(Number(pw.style.height.slice(-2)) - 2) + 'px';
pw.style.marginTop = String(Number(pw.style.height.slice(-2)) + 2) + 'px';
}, 25)
setTimeout(function(){
clearInterval(key)
}, Number(pw.style.height.slice(-2)) * 12.5)
}
Not absolutely sure this will work, but it should help out a bit.
The included snippet does almost all of what I want to do.
Click on the 'Toggle expanded' to see the elements expand to the larger size and then contract to the smaller size.
I have a few questions:
How can I contract the element whilst still filling it with text (not reducing the text to two lines until the end of the animation)?
Is it possible to achieve everything without needing to set the precise width and height in CSS that I am setting? It is currently fragile to style changes.
Is it possible to animate these boxes and have the text 'animate' as well? e.g. see the text re-wrapping as the boxes increase in size
Thanks!
$('#expand-link a').on('click', function(event) {
var $sections = $('.block');
if ($sections.data('expanded')) {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.removeClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', $(this).find('p:not(.fullview)').outerHeight() + 32);
});
$sections.removeClass('expandit');
$sections.data('expanded', false);
} else {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expandit');
$sections.data('expanded', true);
}
});
li {
list-style: none;
background-color: white;
padding: 5px 5px 5px 5px;
margin-top: 10px;
margin-bottom: 10px;
transition: height 1s ease-in-out;
overflow-x: hidden;
overflow-y: hidden;
}
.expanded li {
width: 570px;
}
li:first-child {
margin-top: 0px;
}
li:last-child {
margin-bottom: 0px;
}
.section p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.expanded .section p {
overflow: auto;
display: block;
}
ul {
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
overflow: hidden;
}
.section p.fullview {
display: none;
}
.expanded .section p.fullview {
display: block;
}
.block {
background-color: grey;
display: inline-block;
width: 300px;
transition: width 1s ease-in-out;
}
.block.expandit {
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expand-link">
Toggle expanded
</div>
<div class="block">
<ul class="sections">
<li class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis massa mauris. Fusce vel efficitur elit. Curabitur finibus sagittis nisl. Nullam luctus, magna sed feugiat scelerisque, nunc sem facilisis enim, sed ornare nulla urna sit amet
lectus. Praesent facilisis efficitur ipsum sed gravida. Mauris mollis ut nisi at fringilla. Aenean et orci libero. Curabitur pharetra odio ornare metus pharetra aliquet. Nunc nisl lorem, tempus vitae libero a, feugiat viverra dui.</p>
<p class="fullview">Some extra content</p>
<p class="fullview">A bit more</p>
</li>
<li class="section">
<p>Some different less useful text</p>
<p class="fullview">A bit of extra content for your information</p>
</li>
</ul>
</div>