This probably has a simple solution, but I am new and can't figure it out. I am trying to just load some text from about.html onto my index page's #content div when I click on my link. The about.html doesn't have anything on it except a div called #content, containing a h2 and some text inside paragraph tags without any styling. Instead it ends up loading the entire index page inside my index's #content div. So far this is what I tried. The name of my index page is called cube2. I know the code is messy, but it's just an experiment and was too lazy to create a new stylesheet, put the CSS in the doc. I apologize for the mess.
Cube2.html Code:
<html xmlns="http://www.w3.org/1999/xhtml" class=" -webkit-">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cube2</title>
<link href="./cube2_files/css" rel="stylesheet" type="text/css" data-inprogress="">
<script src="./cube2_files/jquery.min.js"></script>
<!-- <script src="js/cube-centered.js"></script> -->
<script type="text/javascript" src="./cube2_files/prefixfree.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(images/wallpaper-660816.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.holoheader {
background-image: url(images/Header.png);
background-repeat: no-repeat;
height: 600px;
width: 700px;
position: relative;
margin-right: auto;
margin-left: auto;
color: #FFF;
-webkit-animation: holowrapper ease 2s infinte;
}
.holowrapper {
height: 600px;
width: 700px;
top: -110px;
margin-right: 60%;
margin-left: 40%;
position: relative;
/*-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg); */
-webkit-animation: bounce ease 1.0s infinite alternate;
}
#-webkit-keyframes bounce {
0% { top: -110px; }
100% { top: -105px; }
}
.holoheader h2 {
font-family: 'Orbitron', sans-serif;
font-size: 24px;
color: #FFF;
text-align: center;
top: 23px;
position: relative;
}
.hologram {
font-family: 'Orbitron', sans-serif;
height: 400px;
width: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
background-image: url(images/Filler.png);
background-repeat: repeat-y;
top: 68px;
}
.holofooter {
background-image: url(images/Footer.png);
height: 117px;
width: 700px;
position: relative;
top: 70px;
}
.hologram #content {
color: #FFF;
text-align: center;
overflow: scroll;
overflow-x: hidden;
height: 300px;
width: 650px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 25px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #004040;
opacity: 0.3;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-transition: background-color 0.5s ease 0s;
background-color: #2A6964;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background-color: #B7EEF2;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.header {
height: 100%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.header #innerheader {
}
.header #innerheader #logo {
margin-right: auto;
margin-left: auto;
height: 90px;
width: 600px;
margin-top: 10px;
-webkit-animation: slidein 2s 1 normal, fadein 2.5s 1 normal;
}
#-webkit-keyframes slidein {
0% { margin-top: -100px; }
100% { margin-top: 10px;; }
}
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#wrapper2 {
min-width: 600px;
}
.navigationmenu {
text-decoration: none;
width: 250px;
margin-left: 15px;
padding: 5px;
height: 90px;
}
.navigationmenu ul {
font-family: 'Orbitron', sans-serif;
font-size: 36px;
list-style-type: none;
margin: 0;
padding: 0;
-webkit-animation: glow 1.5s infinite alternate;
}
/*#-webkit-keyframes glow {
from { text-shadow: 0 0 0px #55A4AC; }
to {
text-shadow: 0px 0px 25px #55A4AC;
}
} */
#-webkit-keyframes glow {
0% { text-shadow: 0 0 15px #55A4AC; }
100% { text-shadow: 0px 0px 25px #55A4AC; }
}
.navigationmenu ul:hover; {
}
.navigationmenu ul a {
text-decoration: none;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
a {
color: #fff9d6;
display: block;
width: 60px;
}
</style>
</head>
<body>
<div class="header">
<div id="innerheader">
<div id="logo"><img src="./cube2_files/Purelight.png" width="600" height="101"></div>
</div>
</div>
<div id="wrapper2">
<div class="navigationmenu">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
</ul>
</div>
<div class="holowrapper">
<div class="holoheader"><h2>Project FreeSky</h2>
<div class="hologram">
<div id="content">
<p>Home</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="js/general.js"></script>
<div class="holofooter"></div>
</div>
</div>
</div>
</div>
</body>
</html>
About HTML.
<!-- about.html code -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About</title>
</head>
<body>
<div id="content">
<h2>About</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
</body>
</html>
Javascript
// JavaScript
$(document).ready(function() {
$('#content').load('content/cube2');
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('#content').load('#content/' + page + '.html');
return false;
});
});
You can use this:
$('ul#nav li a').click(function() {
var page = $(this).attr('href'); // outputs = about.html
$('#content').load(page + ' #content'); // <- targets the html page's div
return false;
});
But my suggestion is to use a different id for parent page div something like #pageContent so that in the markup there would be just one #content div:
$('ul#nav li a').click(function() {
var page = $(this).attr('href'); // outputs = about.html
$('#pageContent').load(page + ' #content'); // <- targets the html page's div
return false;
});
If the loaded HTML only should contain a subset, I think you can do:
$.get(page + '.html', function(d) {
var content = $(d).find("#content");
content.appendTo("appendselector");
});
You get the content from the server, parse it as a document fragment within jquery, then append the inner content to wherever you want it appended to.
Related
I'm trying to find a way to have text ellipsis at the point of contact with the righthand side of the green container. My impression at this time is that this might actually be impossible to do in CSS when the text box is part of an absolutely positioned wrapper.
Is there a way of doing this with CSS only? Is this only doable via javascript to dynamically calculate the width of the text box to create the illusion that it is bound by the size of the green container?
The solution cannot involve removing the absolute positioning. This is a simple extrapolation of a more complicated UX.
* {
background-color: white;
}
.container {
border: 3px solid lightgreen;
background: lightgray;
width: 10%;
}
.relative {
position: relative;
height: 100px;
border: 2px black solid;
width: 30%;
}
.absolute {
border: 2px solid blue;
position: absolute;
bottom: 10px;
left: 10px;
}
.text {
border: 2px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="relative">
<div class="absolute">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</div>
</div>
</div>
</div>
You could set the absolute container to go to the right of 0. And set the position relative to the parent container which you want it to take as its relative reference, which, as you say, is the green one. –
* { background-color: white; box-sizing: border-box;}
.container {
position: relative;
border: 3px solid lightgreen;
background: lightgray;
width: 10%;
}
.relative {
height: 100px;
border: 2px black solid;
width: 30%;
}
.absolute {
border: 2px solid blue;
position: absolute;
bottom: 10px;
left: 10px;
right: 0;
}
.text {
border: 2px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="relative">
<div class="absolute">
<div class="text">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod
</div>
</div>
</div>
</div>
I'm new to using transitions and my transition is not responding. There must be something wrong with my code. I'm using cards on my site and I added a (mouseenter) to have the info on the card display when the mouse is hovered, it works but the transition is throwing an error there's probably something I'm not understanding, any help is appreciated!
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.inner-card{
display: none;
}
.inner-card.active{
display: flex;
flex-direction: column;
justify-content: end;
background:rgba(255,165,0,0.5)
transition: all 400ms ease-in-out;
}
<script>
$(document).ready(function () {
$('.card').on('mouseenter', function () {
$(this).find(".inner-card").toggleClass('active');
});
$('.card').on('mouseleave', function () {
$(this).find(".inner-card").toggleClass('active');
});
});
</script>
As mentioned in my comment:
display
flex-direction
justify-content
are none-animatable CSS properties, as such transition and animation will have no effect, other animatable properties in the defintion are ignored.
This can be circumvented by transitioning between opacity: 0 and 1.
In the snippet, class .inner-card is defined as you normally would, but using opacity: 0 to 'hide' its content.
Selector .card:hover .inner-card {..} is introduced to control the transition to opacity: 1 without the need for JS.
To be complete, class .inner-card needs a transition for a smooth transition back to original when the cursor leaves the card.
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
opacity: 0;
background-color: transparent;
transition: opacity 400ms ease-in-out, background-color 400ms ease-in-out;
}
.card:hover .inner-card {
cursor: pointer;
opacity: 1;
background-color:rgba(255,165,0,0.5);
transition: all 400ms ease-in-out;
}
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
If I understood correctly and you need the text to be presented during the review, then here it is.
.inner-card a{
color: inherit;
text-decoration: none;
text-decoration: underline;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
margin-left: 8px;
margin-top: 15px;
color: lightgreen;
background-color: lightgreen;
border: 2px solid black;
padding: 10px;
border-radius: 3px;
}
.inner-card:hover{
cursor: pointer;
color: black;
background: rgba(255,165,0,0.5);
}
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
This task can be done without js. Let me know if I misunderstood you.
I am trying to create an effect on a blog page in which the blog posts are displayed as cards, and whenever one scrolls vertically on the page, a card will fade into view and then fade out when the next card is displayed. Something similar to a carousel/image slider but where only one card is visible at the time. At the same time I want the background image to be fixed. A mix between parallax and carousel.
I have tried to set the cards' container to allow overflow-y so that the cards are scrollable, but I do not want the scrollbar to appear either. Honestly, I have looked everywhere for a similar example, but none are close to what I am trying to achieve.
I have found other examples where I can create a parallax effect, but the thing is I only have one background image. I am not sure if I need to use JavaScript as well to try to implement this design. The closest I have come to is ScrollOut, but I do not know how to make only one card visible at the time.
CodePen
<header>
<div class="logo">
</div>
<div class="title" id='title'>
<h1 data-scroll>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
</ul>
</nav>
</header>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<section class="section__posts">
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</section>
If I understand what you're going for, you could use position: sticky along with an IntersectionObserver to create fade-in/fade-out effects.
A basic implementation of a position: sticky layout could be something like this:
<div class="section__posts--card">
<!-- **** add inner wrapper **** -->
<div class="inner-el">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</div>
.section__posts {
width: 100vw;
height: 100vh;
position: relative;
}
.section__posts--card {
height: 200vh; // how far the user should scroll before content changes
}
.inner-el {
top: 200px; // how far from the top of the viewport the content should sit
height: auto;
position: sticky;
width: 75vw;
max-width: 50rem;
margin: auto;
}
This is a pretty good 'tutorial' on how to add IntersectionObserver with position: sticky: https://developers.google.com/web/updates/2017/09/sticky-headers
Thanks to organicon's insight about IntersectionObserver I was able to come up with a solution that created the effect exactly as I wanted.
I made the background fixed and turned off overflow for the body.
I wrapped the cards in a container, and turned on the overflow-y BUT I hid the scrollbar using: scrollbar-width: none; -ms-overflow-style:none;
Wrote a script using IntersectionObserver that will track when a card comes into view. When the card appears a CSS animation is applied that fades the card in.
const callback = (entries) => {
entries.forEach(
(entry) => {
if (entry.isIntersecting) {
console.log("the element is intersecting");
entry.target.style.animation = entry.target.dataset.fade;
entry.target.style.opacity = 1;
} else {
entry.target.style.animation = "none";
entry.target.style.opacity = 0;
}
}
);
}
let observer = new IntersectionObserver(callback);
const fadeItems = document.querySelectorAll('.animate');
fadeItems.forEach(item => {
console.log("adding " + fadeItems.length + " cards to the observer");
observer.observe(item)
});
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-grey: lightgrey;
--clr-accent: #16e0bd;
--clr-danger: tomato;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 900px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
}
body {
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
box-sizing: border-box;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
background-repeat: no-repeat;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* wrapper */
.wrapper {
height: 100%;
width: 100%;
}
/* header */
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
width: 100%;
}
nav {
width: 50%;
background-color: transparent;
border: 2px solid;
border-color: var(--clr-light);
border-radius: 2em;
display: flex;
z-index: 10;
}
/*Styling Links*/
.nav-links {
color: var(--clr-light);
display: flex;
list-style: none;
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a {
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before {
width: 80%;
}
.login-button {
color: var(--clr-light);
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: var(--clr-dark);
background-color: #000;
transition: all ease-in-out 350ms;
}
* site title */
.title h1 {
margin: 1em auto;
text-align: center;
color: transparent;
}
#supports(-webkit-text-stroke: 2px var(--clr-light)) {
.title h1 {
color: transparent;
-webkit-text-stroke: 2px var(--clr-light);
text-shadow: none;
}
}
/* section posts */
.posts {
width: 100vw;
height: 100vh;
position: relative;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
.posts::-webkit-scrollbar {
width: 0;
height: 0;
}
.post__card {
height: 50vh;
width: 40rem;
padding: 2rem;
margin: 15rem auto;
background: var(--clr-light);
border-radius: 8px;
opacity: 0;
}
.post__card:first-child {
margin-top: 1rem;
}
.post__card:last-child {
margin-bottom: 22rem;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blog-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.blog-title {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: -6px;
}
.blog-overview {
margin: 10px 0 20px;
line-height: 30px;
}
.section__posts--card--button {
margin: 0 10px;
}
.btn.dark {
background: var(--clr-dark);
color: var(--clr-light);
}
.btn.grey {
background: var(--clr-grey);
color: var(--clr-dark);
}
.btn.danger {
background: var(--clr-danger);
color: var(--clr-dark);
}
#media (max-width: 600x) {
.posts {
padding: 2.4rem;
}
.section__posts--card {
padding: 2.4rem;
}
}
<div class="wrapper">
<div class='stars'></div>
<div class="stars2"></div>
<div class='stars3'></div>
<header>
<div class="title" id='title'>
<h1>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li><a class="login-button" href="#">Login</a></li>
</ul>
</nav>
</header>
<div class="posts">
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
</div>
</div>
The button scrolls past the content I want to be shown.
I want the "About Us" section to be showed to the display of user (100vh), but it just scrolls past that.
Here's the code:
function smoothScroll(target, duration) {
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
smoothScroll(".text-slider", 600);
});
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i{
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your
Quality Management.
</p>
</div>
<div class="cta">
<button class="btn">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
As shown in the picture, it goes past "About Us" h1.
I want the page to stop at "About Us", and not go past it.
If you need more code, or more explanation please comment and I'll try my best!
Thank you in advance.
UPDATE (GIF):
That code that you use for smooth scroll is unnecessary. You should better use Element.scrollIntoView()
Element.scrollIntoView()
The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user. MDN - Element.scrollIntoView()
Use the following code should you want to scroll to About Us section when you click on Click for more button.
// 'Click for more' button
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background: #000;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i {
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your Quality Management.
</p>
</div>
<div class="cta">
<button class="btn" id="more-info">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
Recommend you to add background: #000; as fallback for background-image since sometimes image might not be loaded.
I am trying to adapt a use of some jscript to make links in text change the full bleed background on a single web page, my hacked attempt is here:
http://testarama.webege.com/
My problem is with smaller screens... if you resize the window then you will notice that the hover backgrounds only fill an area the size of the initial window before scrolling down... but if you are scrolled down fully and using the bottom link then this displays the cutoff with the original background poking out (the test will explain that better than I!).
I've tried various containers and background-attach rules and can't seem to get around this... I'd really like to use this trick for a site so if anyone can shed some light on where it is going wrong that'd be great.
INDEX.HTM =
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src='leaflet.js' type='text/javascript'></script>
<script src='wax.leaf.js' type='text/javascript'></script>
<link href='leaflet.css' rel='stylesheet' type='text/css' />
<script>
$( document ).ready(function() {
$('p a').each(function() {
var fig = $('<flashers class="'+ $(this).attr('rel') +'"></flashers>');
fig.appendTo('body');
});
$('p a').hover(
function() {
$('body').addClass('hover_on');
$(this).addClass('active');
$('.'+$(this).attr('rel')).addClass('on');
},
function() {
$('body').removeClass('hover_on');
$(this).removeClass('active');
$('.'+$(this).attr('rel')).removeClass('on');
}
);
});
</script>
</head>
<body>
<bound>
<div class="main_box">
<p>This is a background link <a rel="green">that turns green</a>.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is another background link <a rel="green">that turns green</a>.</p>
<footer />
</div>
</bound>
</body>
</html>
STYLE.CSS:
/*** background tester ***/
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
height: 100%;
}
/* Main */
body {
text-align: center;
color: white;
font-family: Georgia, Garamond, Baskerville, serif;
font-size: 12pt;
font-weight: 400;
line-height: 1.5em;
margin: 0 30px;
background: url('red.jpg') center center #222;
background-size: cover;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
flashers {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
display: block;
background-position: center center;
background-size: cover;
background-attachment: fixed;
opacity: 0;
transition: 1s opacity;
-webkit-transition: 1s opacity;
}
::selection { background: rgba(255,255,255,0.7); }
/* Backgrounds */
#media only screen and (min-width: 640px) {
flashers.on { opacity: 1; }
flashers.green { background-image: url('green.jpg'); }
}
/* Content etc. */
bound {
width: 100%;
height: 100%;
max-width: 620px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: box;
display: -webkit-box;
display: -moz-box;
box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
background: rgba(0,0,0,0.0);
text-align: left;
position: relative;
z-index: 10;
}
/* Big displays etc. */
#media only screen and (min-width: 640px) {
p a {
color: #fff;
margin: 0 3px;
line-height: 0em;
border-bottom: 1px dotted rgba(255,255,255,0.4);
}
p a:not([href]) { pointer-events: auto; }
p a:hover { opacity: 1; }
.hover_on p a[href] { color: transparent; }
.hover_on p a { color: transparent; }
.hover_on p { color: transparent; }
.hover_on p a.active { color: #fff; }
}
/* Other Fixings (some borrowed) */
#media only screen and (max-width: 767px), screen and (max-height: 680px) {
body { font-size: 16pt; }
li { line-height: 1.25em; margin-bottom: 0.6em; }
}
a {
outline: medium none !important;
}
Rest is visible at link: http://testarama.webege.com/
and also in a fiddle
The background is set on flashers element.
And this is descendant from body. So it is dimensioned to the full dimension of body.
But body height is dimensioned as 100%, so it is dimensioned according to the html dimension, that at the end is the dimension of the browser window.
But when you are scrolling, the bottom of the screen is on the bound element, that is sized according to its content, and that, in small browser sizes, has a height greater than body.
you could try to make body adapt to bound, but probably the best solution is to make flashers descendant of bound
Haven't succeeded fully, that's the best I have got :
fiddle
.main_box {
position: relative;
padding-left: 50px;
padding-right: 50px;
z-index: auto;
}
.main_box:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 110%;
z-index: -9;
opacity: 0;
transition: opacity 1s;
margin-left: -30px;
margin-right: -30px;
background-origin: border-box;
background-size: cover;
background-color: green;
background-clip: border-box;
}
.main_box.active:after {
opacity: 1;
}
.green:after {
background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg');
}