I'm looking for a way in CSS (or JS but preferably CSS) to define the breakpoint where text starts to wrap. I'm using React 17/CRA and CSS modules.
I have a React app that has a header bar with two pieces of content. On the left-hand side is the three-word title of the app in an h1 tag. On the right-hand side is the logged-in user's profile photo and name, composed of several elements within a span. If I narrow the viewframe, first the content overflows and then, if I narrow it more, the title of the app starts to wrap.
I would like the title to wrap before any overflow happens so all the content stays on the screen as long as possible. All the Googling I've done has only come up with info on overflow-wrap or word-break, which aren't what I'm looking for. The text is wrapping like I want it to, I'd just rather it did so sooner.
The code of my component is:
import React from 'react'
import anonymousAvatar from './anonymousAvatar.jpg'
import styles from './dashboardHeader.module.css'
const DashboardHeader ({data}) => (
<div className={styles.root}>
<div className={styles.bar}>
<span className={styles.headerContainer}>
<h1 className={styles.header}>Three Word Title</h1>
</span>
<span className={styles.profile}>
<div className={styles.profileText}>
<p className={styles.textTop}>{data.name}</p>
<p className={styles.textBottom}>{data.email}</p>
</div>
<img className={styles.avatar} src={data.image_url || anonymousAvatar} alt='User Avatar' referrerPolicy='no-referrer' />
</span>
</div>
</div>
)
export default DashboardHeader
The CSS module I currently have is:
.root {
position: fixed;
top: 0;
width: 100%;
}
.bar {
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: #000;
color: #fff;
display: flex;
justify-content: space-between;
}
.headerContainer {
display: grid;
align-items: center;
}
.header {
font-family: 'Cinzel Decorative', sans-serif;
margin: 0;
font-size: 1.5rem;
}
.profile {
background-color: #000;
border: none;
display: grid;
align-items: center;
grid-template-columns: 2fr 1fr;
max-width: 30%;
cursor: pointer;
margin-right: 16px;
}
.profileText {
display: grid;
}
.textTop, .textBottom {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1.025rem;
color: #fff;
text-align: right;
margin: auto 0;
}
.textTop {
margin-bottom: 2px;
}
.textBottom {
margin-top: 2px;
}
.avatar {
height: 64px;
width: 64px;
border-radius: 50%;
box-shadow: 0px 0px 12px #fff;
margin-left: 24px;
margin-right: 16px;
}
Here is the component at the full width of my laptop screen:
Here it is at an intermediate width:
And here it is at the very narrow width where the text finally starts to wrap (notice there is still overflow):
As noted in the comments you can simply change the width of the element at your desired breakpoint like in the top blue div of the example below. I'm using animations to help you visualize the results but you would decrease the width of the element in question at your media query breakpoint. I recommend this method because it doesn't require you to increase your HTML markup.
body, div, p, span {
display: flex; justify-content: center; align-items: center;
background-color: #eee;
font-family: Arial;
}
div {
justify-content: space-between;
transform: translateY( -5rem );
position: absolute;
width: 90%; height: 5rem;
padding: 1rem;
background-color: #222; color: #eee;
}
div, div:nth-of-type( 1 ) p:first-of-type {
animation-name: contract; animation-duration: 5s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
div:nth-of-type( 2 ) {
transform: translateY( 5rem );
}
#keyframes contract { 100% { width: 25%; } }
p {
background-color: transparent;
text-transform: uppercase;
}
p:first-of-type {
font-size: 1.5rem; font-weight: bold;
}
span {
margin: 0.5rem;
border-radius: 50%;
width: 2.5rem; height: 2.5rem;
}
<style>
* {
box-sizing: border-box; padding: 0; margin: 0;
}
html, body {
height: 100%;
}
html {
font-size: 0.5rem;
}
div:nth-of-type( 1 ) p:first-of-type::before,
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps first';
position: absolute; top: -4rem;
border-radius: 1rem; padding: 1rem;
background-color: #07f; white-space: nowrap;
}
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps last';
top: auto; bottom: -4rem;
background-color: #f07;
}
</style>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
I'm simply using the contract animation to manually decrease the width of the paragraph in the first div before it's width is forced smaller by its container. If this doesn't work in your particular setup you could use hidden <br> elements with display: none until your desired breakpoint to set them to block.
Related
I have a container with some text and buttons that are responsive to the screen size, but they extend off the side of the container when there's not enough room. Someone helped me fix it by adding a clamp parameter to the font-size, but after I made a few adjustments to other parts of my code, now the problem is back.
Could someone help me figure out what I need to do to keep the buttons and text within the container? I thought I needed to adjust the min values of the clamp parameter, but that doesn't seem to change anything. It doesn't seem like the text and buttons even recognizes the parent container, they just kind of do what they want.
I have the btn-grid container set to 20% of the height of the chat_bubble, and I need the text to stay within that remaining 80% of the container.
Besides that, I'm getting a warning from WebStorm that several of my font-size declarations over-write each other, but I can't figure out which one is supposed to take priority to avoid being redundant.
Also I'm trying to add a 5vw or percent margin/padding to the top and right of the main container, but I notice that when I do a scrollbar appears even if I do overflow: hidden. Someone told me this is because of margin collapsing, but I can't figure out how to prevent that from happening because I don't see how the nested containers are taking up so much space.
This is the codepen:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
And this is my code:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 1.5rem, 2rem);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
padding-left: 5vw;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
If you remove the explicit height: 70vh declaration on #chat_bubble and instead use min-height: 70vh to ensure that the height is at minimum 70% of the viewport height, the content wont overflow. Now, the text and buttons won't ever overflow the parent container as there isn't an explicit height set on the parent #chat_bubble. The reason the buttons overflow before this change is because the explicit width of 70vh is set on #chat_bubble and any nested content that is long enough to extend outside of the parent container will do so. I added a top/bottom margin of 5vw and auto left/right margins, you can adjust these as you see fit.
After reading your comments below, the clamp() usage is part of the problem for the text taking up so much space on the screen and forcing the #chat_bubble to have a large height. The syntax is clamp(min, flex unit, max) and your using 1.5rem for the 2nd arg, instead use a viewport unit like 3vw or anything with vw as the middle argument which is the "scale" or "flex-unit" so to speak.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const emailContainerElement = document.getElementById('email-container')
const submitEmailButton = document.getElementById('submit-email-btn')
const email = document.getElementById('email')
const chartContainer = document.getElementById('chart')
startButton.classList.add('hide')
emailContainerElement.classList.add('hide')
questionContainerElement.classList.remove('hide')
questionElement.innerText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.'
const button_no = document.createElement('button')
button_no.innerText = 'No'
button_no.classList.add('btn')
answerButtonsElement.appendChild(button_no)
const button_yes = document.createElement('button')
button_yes.innerText = 'No'
button_yes.classList.add('btn')
answerButtonsElement.appendChild(button_yes)
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 3vw, 2rem);
}
.container {
width: 90%;
height: auto;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally (this is default flex-direction)*/
align-items: flex-end;
margin: 5vw auto;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
min-height: 70vh; /* Make chat bubble 70% of viewport height at minimum*/
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test title</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Benne&family=Fjalla+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="chat_bubble" class="container">
<div id="email-container" class="hide">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit-email-btn" class="btn">Submit</button>
</div>
<div id="question-container" class="hide">
<div id="question" class="question-text">Question</div>
<div id="answer-buttons" class="btn-grid">
</div>
</div>
<div id="chart" class="hide"></div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
</div>
</div>
<div id="character_image">
<img id="char_1" src="https://i.imgur.com/7eYWqqo.png" alt=""></img>
<img id="char_2" src="https://i.imgur.com/ixM8TtU.png" alt=""></img>
</div>
</div>
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</body>
</html>
I currently am trying to code a website to animate moving across the x-axis to access different sections of the page (page content in 'tab-content'). I have a navbar that has different headers, this is fixed, I want the user to click on each header and be taken to that section. I managed to take the user to the desired section/div with some JS code however, there isn't any animation it defaults to the selected section/div just suddenly being on screen. How do I animate with pure JS or CSS. I need the clicking of the header to move (motion) the user to that div. I'm new to web dev.
here some of my code
HTML
<div class="main-info">
<div class="nav-container">
<div class="nav-bar">
<ul>
<li data-tab-target="#show" class="tab">Show</li>
<li data-tab-target="#about" class="tab">About</li>
<li data-tab-target="#lookbook" class="tab">Lookbook</li>
<li data-tab-target="#process" class="tab">Process</li>
</ul>
</div>
<div class="info overlay">
<div class="text">
MA
Coming Soon
BA
</div>
Back
</div>
</div>
<div class="tab-content">
<div id="show" data-tab-content class="active">
<p>VIDEO</p>
</div>
<div id="about" data-tab-content>
<p>About</p>
</div>
<div id="lookbook" data-tab-content>
<p>Lookbook</p>
</div>
<div id="process" data-tab-content>
<p>Process</p>
</div>
</div>
</div>
CSS
.main-info {
background-color: transparent;
height: 100vh;
overflow: hidden;
}
.nav-container {
position: fixed;
}
.nav-bar {
width: 80vw;
height: 10vh;
left: 10vw;
position: absolute;
top: 5vh;
}
.nav-bar ul {
text-transform: uppercase;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.tab a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
color: black;
text-decoration: none;
}
.tab:hover {
cursor: pointer;
opacity: 0.6;
}
.tab.active {
background-color: whitesmoke;
}
.info {
width: 90vw;
height: 10vh;
/* border: 1px solid red; */
left: 5vw;
position: absolute;
top: 80vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.info a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.1rem;
color: black;
text-decoration: none;
border: 1px solid teal;
}
.text {
width: 30%;
display: flex;
justify-content: space-between;
}
.tab-content {
border: 1px solid teal;
position: absolute;
left: 0;
top: 0;
height: 100vh;
z-index: -11;
display: flex;
flex: row nowrap;
justify-content: flex-start;
}
[data-tab-content] {
border: 1px solid blueviolet;
background-color: violet;
font-size: 3rem;
color: blue;
scroll-behavior: smooth;
display: none;
width: 100vw;
height: 100vh;
}
.active[data-tab-content] {
display: block;
}
JS
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
});
tab.classList.add('active')
target.classList.add('active');
});
});
You almost got it. Instead of setting the scroll-behavior on the elements that are inside a scrollable element, put it on either the element that has a scrollbar.
.tab-content {
scroll-behavior: smooth;
}
Or on the top most element to have all elements move with a smooth scrolling animation.
:root {
scroll-behavior: smooth;
}
I tried coding it myself based on research on the internet. I was able to get it fixed at the bottom. When clicking, it does slide out the menu; but it slides out downwards when it should have pushed the tab upwards to display the menu. If I use negative margin and simply change bottom: -150 to bottom: 0px on click, it does produce the desired behavior by sliding it up from past the bottom of the window and it displays correctly. But it means the menu is pushing the page past the bottom of the page rather than simply being hidden. So when it's "hidden", one can simply scroll down and see the full menu which shouldn't be the case.
So rather than using bottom to manipulate it, I tried using $(this).show("slide"). The menu came out looking distorted thanks to using the sliding animation.
Here's the snippet:
var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
supTabState = !supTabState;
if (supTabState) {
// $("#dccontainer").css('bottom', '0px');
$(this).show("slide", {
direction: "down"
}, 1000);
} else {
// $("#dccontainer").css('bottom', '-150px');
$(this).show("slide", {
direction: "up"
}, 1000);
}
});
#dccontainer {
position: absolute;
bottom: 0;
width: 300px;
left: 50%;
height: 200px;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I've tried various techniques. I've tried toggling with CSS alone using CSS animation and toggleClass, I've tried using slide, and I've tried using slideToggle. I also tried using display: block; instead of using flexbox. Both had the same effect. Researching the internet yielded several possible solutions (which I've tried, but all came out with the same result), and those usually weren't based on an element being fixed at bottom of window. The only one that came closest to what I was looking for was this:
http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html
But strangely, when I attempted to use the same code that used, nothing happened. Clicking did not bring up the menu. I'm at a loss at this point. Where am I going wrong?
This is my latest attempt (using above code): https://codepen.io/doncullen/pen/JjdrxzY
To answer your question Where am I going wrong: you're specifying a fixed height of 200px on #dccontainer. Specifying a fixed height to the container renders the jQuery's slideToggle useless. jQuery's slideToggle animates the height of the given element, and in your case, you're animating #dcsupportcontainer. Even though you're animating the height of #dcsupportcontainer to 0px using slideToggle, the whole support block will still remain 200px in height. This causes makes the whole block not to move down when the #dcsupportcontainer is gone. You can, of course, manually calculate and assign the new bottom value to #dccontainer, but that's a real hassle and really unintuitive.
Not wanting to calculate the bottom value myself, I will not set a height to #dccontainer and just let its height be. It will set its height to all its children's requirements (the default value is auto). Furthermore, instead of using fixed, you used absolute. You should use fixed here as you want the support block to always be visible (even when the user scrolls down); this means that you should position it based on your viewport and not an element (read more about positioning here). I also did minor adjustments on your CSS styles so that it's a tad more concise. One last thing, I suggest that you revisit flexbox here and here to utilise it better.
Here's a working solution:
// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500)
});
* {
box-sizing: border-box;
margin: 0;
}
body {
min-width: 100vw;
min-height: 100vh;
}
#dccontainer {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 50vw;
min-width: 200px;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}
#dccontainer * {
padding: 7px 20px;
text-align: center;
}
#dcsupporttab {
font-weight: bold;
border-radius: 5px 5px 0 0;
background: #121212;
color: #ffffffee;
cursor: pointer;
}
#dcsupportcontainer {
border: 1px solid #121212;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
Just take the fixed height from your main container #dccontainer, and everything will be fine. You should also remove a few lines of your javascript code to fix everything. That fixed height of dccontainer makes the whole nav to stand 200px up from the bottom of your page and that makes you use more jQuery to fix it at the bottom. Remember that the bottom: 0px will set the bottom of your element at the 0px bottom of its container.
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
});
#dccontainer {
position: absolute;
bottom: 0px;
width: 300px;
left: 50%;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I have a 3 panel image section (section 1, 2 and 3) - on hover over section 1 for example, I would like for the original bg to fade out while a new bg fades in while simultaneously growing to the full length of the section "overlapping" the other sections. Once this section is full width I would like to be able to hover over section two and the same process occur without having to actually move the mouse out of the section area first.
I have managed to get to a point where the section expands and the image changes over, however, once say section 1 is expanded - it occupies the full width of the section so hovering over section 2 does not trigger the hover animation for section 2. Instead I have to move the mouse so that it is outside of the section and re-enter over section 2 to begin that animation.
Its probably easier to see so attached is a jsfiddle in addition to the code below.
https://jsfiddle.net/tr5km94w/1/
<div class="panel-test-background">
<div class="panel-test-one"></div>
<div class="panel-test-two"></div>
<div class="panel-test-three"></div>
</div>
<div class="panel-container">
<div class="panel-one">
<div class="panel-text-one">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.01</h1>
<br />
</div>
</div>
</div>
<div class="panel-two">
<div class="panel-text-two">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.02</h1>
</div>
</div>
</div>
<div class="panel-three">
<div class="panel-text-three">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.03</h1>
</div>
</div>
</div>
</div>
<style>
.panel-container {
width: 100%;
height: 75vh;
display: flex;
}
.panel-one {
flex-grow: 1;
height: 75vh;
position: relative;
pointer-events: none;
}
.panel-two {
flex-grow: 1;
height: 75vh;
position: relative;
pointer-events: none;
left: 6px;
}
.panel-three {
flex-grow: 1;
height: 75vh;
position: relative;
pointer-events: none;
}
.panel-text-one {
flex-grow: 1;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
pointer-events: none;
}
.panel-text-two {
flex-grow: 1;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
pointer-events: none;
}
.panel-text-three {
flex-grow: 1;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
pointer-events: none;
}
.panel-text-one h3 {
font-family: "Arial", sans-serif;
font-size: 1.5rem;
color: white;
}
.panel-text-one h1 {
font-family: "Arial", sans-serif;
font-size: 2rem;
color: white;
}
.panel-text-one span {
color: white;
}
.panel-text-two h3 {
font-family: "Arial", sans-serif;
font-size: 1.5rem;
color: white;
}
.panel-text-two h1 {
font-family: "Arial", sans-serif;
font-size: 2rem;
color: white;
}
.panel-text-two span {
color: white;
}
.panel-text-three h3 {
font-family: "Arial", sans-serif;
font-size: 1.5rem;
color: white;
}
.panel-text-three h1 {
font-family: "Arial", sans-serif;
font-size: 2rem;
color: white;
}
.panel-text-three span {
color: white;
}
.panel-test-background {
width: 100%;
height: 75vh;
position: absolute;
display: flex;
}
.panel-test-one {
flex-grow: 1;
height: 75vh;
background: red;
width: 0%;
transition: width 0.5s;
}
.panel-test-one:hover {
width: 100%;
transition: width 0.5s;
background: blue;
}
.panel-test-two {
flex-grow: 1;
height: 75vh;
background: green;
width: 0%;
transition: width 0.5s;
}
.panel-test-two:hover {
width: 100%;
transition: width 0.5s;
background: yellow;
}
.panel-test-three {
flex-grow: 1;
height: 75vh;
background: purple;
width: 0%;
transition: width 0.5s;
}
.panel-test-three:hover {
width: 100%;
transition: width 0.5s;
background: pink;
}
</style>
The issue I am having then I guess is that because whichever section you initially hover over takes up the full width of the container so that when section 1 is expanded, although I am hovered over section 2 or 3 it is still technically section 1 since it is full-width. Is there anyway around this so that I can trigger the other animations when I hover over the respective sections? Any help is greatly appreciated.
Thank you
edit: for a bit of clarification of what an ideal end would like look, I was inspired by the image section on basicagency.com near the end of the homepage.
One thing I did notice is that with the initial it appears that there are only 3 's and there should be 4 's before the next section begins. This may be helpful to try.
For this personal sight I'm building I want it to be fairly simple. I have a big title in the middle of the screen, just one word, and when you hover over it I want it to be replaced with a menu -- basically a white box the size of the title with links on it.
The problem with other solutions I've seen is mostly people want to replace one word with just one word, I could do that. But I want to change the contents drastically, and I can't quite figure it out. I'm having trouble getting it to be positioned correctly, as well as there is a LOT of flickering happening.
Confused about how I'd add a whole list of links into the css "content" or js "data" fields.
Here is a jsfiddle of what i'm working with so far as well as my code.
<div class = "container">
<div class = "main">
<span class = "maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class = "menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
and my CSS:
body{
background-color: #ED0349;
font-family:Arial;
color:#DBFA05;
}
h1{
text-align: center;
font-size:200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
#titre{
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.container{
}
.main{
display: inline-block;
padding-left: 50%;
}
.container .menu { display: none; }
.container:hover .maintit {display:none;}
.container:hover .menu {display: inline-block;}
Put the "word" and the menu inside a parent, centered (displayed one on top of the other.
When the parent is not hovered, display the word and hide the menu.
When the parent is hovered, display the menu and hide the word.
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: white;
}
.main > * {
display: block;
width: 100%;
height: auto;
overflow: visible;
text-align: center;
transition: opacity .3s cubic-bezier(.5,0,.3,1);
position: relative;
}
.main:hover .maintit,.main .menu {
opacity: 0;
}
.main:hover .menu {
opacity: 1;
}
body {background-color: gray;}
.main > .menu {
position: absolute;
max-width: 100%;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
The main trouble while hovering is the sizing of .container, which is monitored, changes.
Solution: Give .container a height and width and the flickering stops.
body {
background-color: #ED0349;
font-family: Arial;
color: #DBFA05;
}
h1 {
text-align: center;
font-size: 200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
.container {
width: 100%;
height: 100vh;
}
#titre {
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.main {
display: inline-block;
padding-left: 50%;
}
.container .menu {
display: none;
}
.container:hover .maintit {
display: none;
}
.container:hover .menu {
display: inline-block;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>