Overlap 2 paragraphs responsively - javascript

For a project I would like some paragraphs to transition from one text content to another. The method I would like to use is to have two paragraphs in my HTML, but only one is visible at a time.
I have the transition working fine, but I can't find a way to overlap the two paragraphs in a responsive way. Anybody know how to make this work?
Here's what I have so far (all I'm missing is the responsive paragraph overlap):
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
}
.text1,
.text2 {
transition: opacity 1s ease;
opacity: 0;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
opacity: 1;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>
If this is just a bad way to do it then please let me know.
The reason I want this to be responsive and not rely on absolute positioning or margins of -104px is because I would like to use this method on other things than paragraphs (buttons, navbars, etc.) as well, not just because I want it to look good on a smaller screen (even though I do want it to look good on a smaller screen!) :)

This is the best I can do that would fit your description. We're lacking too many constrains here to display the overlay paragraph correctly in all cases...
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
position: relative;
}
.text1,
.text2 {
transition: opacity 1s ease;
opacity: 0;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
opacity: 1;
}
.show1 > .text2,
.show2 > .text1{
position: absolute;
top: 0;
left: 0;
right: 0;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>

Even though paragraphs hide with opacity: 0 their size is still calculated by your browser. You need to make them both overlap each other.
To do so you need to combine display: none/block with the opacity.
Here is an example:
http://jsfiddle.net/xctLmLae/1/

How about switching display instead of opacity:
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
}
.text1,
.text2 {
transition: display 1s ease;
display: none;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
display: block;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>

Related

How to increment div height/paddint-top on scrolling and detect an image collision to the div?

Text is scrolling and I can stop the text based on a fixed scroll value.
But the Home div height is 100vh, so not all screen resolution will stop the text in the same scroll value. So I need to stop dynamically when it reach certain scroll value which may be different in other resolutions. (or stop when reach some #Element)
Moreover I need to make the description div paddingTop increase the value while scrolling to insert the Text inside that div, and stop increasing height and stop the text moving when it reach some point, according to previous parragraph explanation.
I'm up to use some effect libraries or whatever,but prefering to do with vanilla-js, is nice to learn how it works.
I did this example: https://jsfiddle.net/ja0hzydw/4/
HTML
<section name="Home" id="home">
<div class="home">
<div class="logo" id="logo">
<p>T</p>
<p>E</p>
<p>X</p>
<p>T</p>
</div>
</div>
</section>
<section name="Description" id="description">
<div class="description">
<div class="description-title" id="descTitle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="description-text">
<p id="descParagraph1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa ac sem aliquam, et convallis est feugiat. Nunc ut diam orci. Nunc sed malesuada tortor. Donec orci diam, ultricies eget magna auctor, facilisis elementum metus.
</p>
<p id="descParagraph2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa ac sem aliquam, et convallis est feugiat. Nunc ut diam orci. Nunc sed malesuada tortor.
</p>
</div>
</div>
</section>
CSS
body, html {
margin: 0;
padding: 0;
}
.home {
background-image: url("https://www.wallpapertip.com/wmimgs/0-236_440px-animated-wallpaper-windows.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.logo {
margin-top: 0px;
position: absolute;
top: 0;
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}
.description {
padding-bottom: 100px;
margin: 0 auto;
max-width: 550px;
text-align: center;
}
Javascript
window.onscroll = function() {
scrollLogo();
};
function scrollLogo() {
var element = document.getElementById("logo");
var scrollValue = 80;
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
element.style.marginTop = "80px";
element.style.position = "absolute";
} else {
element.style.marginTop = "0px";
element.style.position = "fixed";
}
var descriptionHeight = document.getElementById("descTitle");
descriptionHeight.style.padding = "50px 0px 0px 0px";
console.log("document.body.scrollTop", document.body.scrollTop, "document.documentElement.scrollTop", document.documentElement.scrollTop);
}

<p> elements surrounding <iframe> to overlap it whilst still being able to click on the <iframe> and the <a>'s in the <p>'s [duplicate]

This question already has answers here:
Why does z-index not work?
(10 answers)
All About.... Z-Index?
(4 answers)
Closed 2 years ago.
I'm hitting a problem with a p5js integration in a webpage.
I'm trying to get two paragraph elements, positioned before and after an iframe, to overlap that iframe, whilst still allowing the iframe to be clickable, and still allowing the links in the paragraph elements to be clickable. I've fiddled around and read a lot about how z-index works and about pointer-events but I couldn't find a solution in these. Here is the minimal reproducible example :
The example works as intended with the bottom text, but the top text is being overlapped wrong.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
#roll {
width: 500px;
margin-right: auto;
margin-left: auto;
}
p {
position: relative;
font-size: 1.5em;
}
.codepoem {
width: 500px;
height: 200px;
}
.codepoem iframe {
position: relative;
width: calc(500px + 20vw);
margin-left: -10vw; /* center horizontal */
height: calc(200px + 40vh);
margin-top: -20vh;/* center vertical */
/*z-index:1;*/
}
</style>
</head>
<body>
<div id="roll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vulputate et libero sit amet blandit. Integer mollis felis dui, vitae euismod nunc tincidunt sed. Aliquam eget libero sed ante interdum consectetur. Quisque a vulputate lorem. Morbi sit
amet
scelerisque turpis.</p>
<div class="codepoem">
<iframe src="https://editor.p5js.org/itsKaspar/embed/wUWKbsui6"></iframe>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
scelerisque turpis. Fusce vulputate et libero sit amet blandit. Integer mollis felis dui, vitae euismod nunc tincidunt sed. Aliquam eget libero sed ante interdum consectetur. Integer a placerat magna. </p>
</div>
</body>
</html>
note : I've purposefully created a container for the iframe to aid it in its underlapping behavior
which direction could I go in from now ? is there a simple solution I am not seeing ? Thanks a lot
You should try this...
#roll{
width:500px;
margin-right:auto;
margin-left:auto;
}
p{
position:relative;
font-size:1.5em;
z-index: 1;
}
.codepoem{
width:500px;
height:200px;
}
.codepoem iframe{
position:relative;
width:calc(500px + 20vw);
margin-left:-10vw; /* center horizontal */
height:calc(200px + 40vh);
margin-top:-20vh; /* center vertical */
/*z-index:1;*/
}

How to position a div above another div without cutting the top div off

I'm struggling with trying to achieve the attached layout. I am trying to get my pop-up card to sit above the background div but the content is being cut off where the background div ends.
Your help is very much appreciated :) About Me Desired Layout
/*About Me Section*/
.about-me {
position: relative;
padding-top: 10%;
height: 500px;
margin-top: -7%;
z-index: -1;
background-color: #E5460E;
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}
.about-card {
position: absolute;
top: 20%;
left: 0;
margin: 0auto;
z-index: 1000000;
width: 80%;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}
<body>
<div class="about-me">
<div class="about-card">
<div class="story">
<div class="story-photo">
<img class="story-me" src="About-Me.png">
</div>
<h3 class="story-title">My Story</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta.
<br>
Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet.
</p>
</div>
</div>
</body>
This is because your content div (.about-card) is within the .about-me div and is getting cut off by the clip-path in your CSS. Make a separate div within .about-me called .about-me-background and give it the styling instead:
/*About Me Section*/
.about-me-background {
position: relative;
padding-top: 10%;
height: 500px;
margin-top: -7%;
z-index: -1;
background-color: #E5460E;
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}
.about-card {
position: absolute;
top: 20%;
left: 0;
margin: 0auto;
z-index: 1000000;
width: 80%;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}
<body>
<div class="about-me">
<div class="about-me-background">
</div>
<div class="about-card">
<div class="story">
<div class="story-photo">
<img class="story-me" src="About-Me.png">
</div>
<h3 class="story-title">My Story</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta.
<br>
Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet.
</p>
</div>
</div>
</body>
Now you will see that .about-card extends below the red background.
Dude! Try to make it simple by using the structure which follows header, footer, sections, etc. and develop your code.
try this snippet and hope this works well for you!.
body{
margin:auto;
}
header{
height: 70%;
width: 100%;
background:red;
}
footer{
height: 30%;
width: 100%;
position:absolute;
background:#fff;
}
#insidebox{ /*align your css based on your requirement*/
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px; /* adjust accordingly */
background: red;
border:1px solid;
background:white;
}
.rotateCSS{
/*css goes here for rorating the text*/
}
<body>
<header>
<section id="rotateCSS">
<div> About Me </div>
</section>
</header>
<footer>
<section>
</section>
</footer>
<section id="insidebox">
<div>
hello for box in center
</div>
</section>
</body>
try this, I put the HTML as ...
<div class="about">
<p>ABOUT ME</p>
</div>
<div class="about__content">
...
</div>
then use position: absolute to lay over
Hope to be helpful to you, bro
-
just a demo: CodePen

Force text in the child div fit into parent

I have two div tags in my HTML code like this
<div id="parent">
<div id="child">
<p class="child-text"> ..... </p>
<a class="child-link"> ..... </a>
<p class="child-text"> ..... </p>
</div>
</div>
#parent{ height: 400px; width:100px}
How can force the content of #child div vertically fit into the parent div ?
I am looking for some thing that can take child div ID and resize its content dynamically. I have worked with jQuery.fittext. However, it get the child-text class id instead of child div id. In other words, it is not intelligent enough to identify what is in the child div and then rescale them.
Is there any other alternative for this ?
You could do something like:
var fontsize = 10;
while($('#child').height() <= $('#parent').height()){
fontsize = fontsize +1;
$('#child').css('font-size',fontsize+'px');
}
#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
<div id="child">
<p class="child-text"> Once upon a time </p>
<a class="child-link"> there lived a monkey</a>
<p class="child-text"> who loved to eat oranges </p>
</div>
</div>
While #child height is less then #parent then it adds 1px until it is not. In the css, I gave #child a padding bottom of 5px, so it would not overflow
JSFiddle
Add a display property value of table to #parent and display property value of table-cell to the elements you want to measure the height of #parent
#parent, #child {
width: 100%;
height: 100%;
position: relative;
display: table;
}
.child-link, .child-text { /* ID/Class of whatever element you want to measure the #parent */
display: inline-block;
height: 100%;
width: 150px;
vertical-align: top;
background-color: green;
bottom: 0;
display: table-cell;
border-left: solid 5px white; /* Just for Division sake */
}
<div id="parent">
<div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p>
<a class="child-link"> Lorem </a>
<p class="child-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.</p>
</div>
</div>
To make it dependent on the screen size, do something like below:
#media screen and (max-width: 768px) { /* Adjust as needed */
enter code here
}

jQuery slideDown animation jitter

I notice when I change the padding settings on the content class (I think there is too much white space), it completely messes up the smooth dropdown. I'm not sure why this is the case, I can not see anything in the JavaScript.
Fiddle
HTML:
<div class="container">
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
</div>
CSS:
.title {
padding-left:15px;
height:17px;
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0px 5px
no-repeat;
cursor:pointer;
margin-bottom:10px;
}
.title img{
width: 24px;
margin-right: 5px;
float: left;
}
.title span{
font-size: 16px;
line-height: 24px;
float: left;
}
.on {
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0 -10px no-repeat;
}
.content {
display:none;
padding: 10px;
margin-bottom:10px;
}
JavaScript:
$(document).ready(function() {
$('.title').click(function() {
$('.title').removeClass('on');
$('.content').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
});
What's happening is as the container's height is animated, the children of that container are being affected by margins, line-heights, etc, which are all dependent on the boundaries of the container. Add the following to fix:
.content {
overflow: hidden;
}
Yeah, it's that simple :P
Here's your Fiddle updated.

Categories

Resources