I am trying to make a simple demo li elements Which is horizontal center followed by Play or Pause button (see attached image ).I am able to make this using Flexbox properties. but facing few issue
Issue:
My li elements are moving or changing it position when I hover the Button.
conditions
we can't give hardcoded width to TEXT or hover text or PLAY or PAUSE .Text can be as big as possible ?
here is my code
https://jsbin.com/kobezulipe/edit?html,css,output
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play</span>
</div>
</div>
</div>
Attached expected output
Answer pic
It's moving because the flexbox in .abc justify-content: center. When the width of the button changes, everything moves to stay centered.
If you change that to start it will not move.
Alternatively, if you don't want the content to move and you want to keep it centered, and you can't use a hard-coded width, you can try using an overlay. It won't move when you hover, though it might cover up anything next to it:
add a second button next to the first one. remove the text from the original.
set this button to position: absolute so it's positioned above the layout. the parent is already position: relative
only display the overlay during .p:hover. Hide the original button with visibility: hidden so it keeps its width and height.
Example:
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
display: inline-flex;
}
.container, .overlay {
padding: 8px;
border: 1px solid;
align-items: center;
justify-content: center;
}
.overlay {
position: absolute;
left: 0;
top: 0;
flex-direction: row;
display: none;
transition: all 0.2s linear;
}
.p:hover .overlay {
display: inline-flex;
}
.p:hover .container {
visibility: hidden;
}
.text {
white-space: nowrap;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
overflow: visible;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
</div>
<div class="overlay">
<button class='button'>
</button>
<span class="text">Play, this can be very long</span>
</div>
</div>
</div>
</body>
With #kid-jokers answer you can add white-space: nowrap; to container div to allow words to span on one line.
var btn = document.querySelector(".button");
btn.addEventListener('click',function(){
btn.classList.toggle('paused');
document.querySelector(".button");
})
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: 52px;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: block;
white-space: nowrap;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play WHAM! - Jitterbug</span>
</div>
</div>
</div>
new answer: ↓
i rewrote the html. and the .p is positioned relative to the .list.
var btn = document.querySelector(".button");
btn.addEventListener("click", function () {
btn.classList.toggle("paused");
document.querySelector(".button");
});
li {
list-style: none;
}
.abc {
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list {
/* overflow: hidden; */
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
position: relative;
}
.list li {
width: 52px;
margin: 0 9px;
}
.list li button {
border: 1px solid #3a3631;
width: 52px;
}
.p {
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
/* left: 18px; */
margin-bottom: 0;
position: absolute;
right: -18px;
transform: translateX(100%);
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class="list">
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<div class="p">
<div class="container">
<button class="button"></button>
<span class="text">Play longer longer longer</span>
</div>
</div>
</ul>
</div>
hope it can help you。
you can change the .p {width: initial;} to .p {width: 52px;}
Related
I have no code to show yet because I have no idea how to do that... my question is: How do I make the text scroll continously i.e., as soon the line 9 is getting up, rather show the blank space, show the contents of line 1 and so on, so there's no empty space. I supposed to do that with JS, I guess but I don't know how to get those offsets or show the contents from top right after the bottom lines is moving up... my current code goes like this:
#jobs_container {
background: transparent;
width: 600px;
height: 300px;
border: 3px solid #e4e4e4;
border-radius: 12px;
border-style: dashed;
padding: 1px;
font-size: 12px;
}
#jobs_header {
display: flex;
justify-content: space-between;
height: 25px;
background-color: #e4e4e4;
border-radius: 12px 12px 0 0;
padding: 1rem;
}
#jobs_header_left {
display: flex;
align-items: center;
}
#jobs_header_left > span {
padding-right: 4px;
cursor: pointer;
color: #0048FF;
}
#jobs_header_center {
text-align: center;
font: 20px Verdana;
color: darkblue;
}
#jobs_header_right {
display: flex;
align-items: center;
}
#jobs_today {
margin-inline: 5px;
cursor: pointer;
color: #0048FF;
}
#jobs_nextButton {
background: transparent;
border: none;
padding: 0px 3px;
cursor: pointer;
}
#jobs_prevButton {
background: transparent;
border: none;
transform: scaleX(-1);
padding: 0px 3px;
cursor: pointer;
}
#jobs_content {
font-style: calibre;
margin-left: 10px;
margin-top: 10px;
position: relative;
overflow-x: scroll;
max-height: 300px;
text-align: justify;
}
#jobs_content #jobs_listOfEvents {
overflow: hidden;
animation-name: jobs_agendaSlide;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;
}
#jobs_listOfEvents:hover {
animation-play-state: paused;
}
#keyframes jobs_agendaSlide {
from {
top: 10px;
}
to {
top: -200px;
}
}
<div id="jobs_container">
<div id="jobs_header">
<div id="jobs_header_left">
</div>
<div id="jobs_header_center">
Center text
</div>
<div id="jobs_header_right">
</div>
</div>
<div id="jobs_content">
<div id="jobs_listOfEvents">
line1<hr>
line2<hr>
line3<hr>
line4<hr>
line5<hr>
line6<hr>
line7<hr>
line8<hr>
line9<hr>
</div>
</div>
</div>
I'm creating a chat application(React). I'm having this textbox which I need to expand vertically upwards as user types. I tried doing it with position absolute but it takes it out of the normal flow. And this does not allow the parent div to move upwards. Is there a way that this can be done? If anyone could point me in the right direction that would be great. Thanks.
Here is the codepen link.
https://codepen.io/ghewadesumit/pen/zYzRjyY
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
css
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
height: 52px;
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
We can use a Javascript ResizeObserver to tell us when the height of the input text has changed. Then we can scroll the window in such a way that the bottom of the input stays in the same position on the viewport - so the elements seem to grow upwards.
Note this snippet uses contenteditable on a div rather than a textarea as the growing/shrinking and text wrapping then happen automatically.
<style>
body {
height: 300vh;
}
.parent {
margin-top: 20vh; /* so we can see it growing not just disappearing */
background: pink;
}
.child {
background: #eeeeee;
}
</style>
<body>
<div class="parent">
Some stuff in the parent<br> here
<div class="child" contenteditable></div>
</div>
<script>
let prevH = 0;
const textArea = document.querySelector('.child');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
let h = entry.contentRect.height;
let diff = h - prevH;
if (diff != 0) {
prevH = h;
window.scroll(0, prevH);
}
}
});
resizeObserver.observe(textArea);
</script>
</body>
Don't hard code the height of class .inputbox-wrapper instead remove height property from there or put height: auto(which is default value) so that container expand when the the text-area is expanded
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
height: auto;/*Change here*/
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
The .inputbox-wrapper should have a min-height not a height if you set only a height, the container will not resize with the textbox.
On another note, if you want the textarea to expand vertically only, you can add resize: vertical; to .chat-input-box {
Textboxes can't expand their height automatically like this by default - you'll need to use a bit of Javascript.
One approach is to dynamically calculate the height of the textfield based on the number of line breaks inside it.
This example from CSS-Tricks has more details on the approach. I've implemented it on your code below.
You also need to change height to min-height on your inputbox-wrapper to allow it to expand as the textfield changes height.
let textarea = document.querySelector(".chat-input-box");
textarea.addEventListener("keyup", () => {
textarea.style.height = calcHeight(textarea.value) + "px";
});
function calcHeight(value) {
let numberOfLineBreaks = (value.match(/\n/g) || []).length;
// min-height + lines x line-height + padding + border
let newHeight = 20 + numberOfLineBreaks * 20 + 0 + 0;
// padding and border are both 0 here but have left in for reference
return newHeight;
}
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
min-height: 52px;
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
I'm trying to add a text search field that will filter content. The code I have, however, will filter out literally anything that doesn't match, including parts of the <div> I want to include.
In other words, I want to have a text search that will search throughout the headers/titles of a series of <div>'s and then return the entire content of that <div> based on the title.
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Check out my fiddle: https://codepen.io/anon/pen/zQVreM
In the fiddle, try searching for "header" to see what happens. What I'd like to happen, is that the entire card is shown.
You don't need to use both toggle and filter.
You could hide all of the cards, filter out the ones that match, and show those only.
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
});
html {
scroll-behavior: smooth;
}
.now-content ul li:before {
background-image: none;
}
.pageFooter {
width: 100%;
background-color: #000;
}
.ddPageWrap {
min-height: 750px;
}
.grpContainer {
width: 95%;
margin: 20px auto 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.ddCard {
display: flex;
width: 100%;
box-sizing: border-box;
flex-direction: column;
flex: 0 0 100%;
margin: 1rem auto;
border: 1px solid #323232;
}
.ddCardHeader {
display: flex;
flex-direction: column;
margin-bottom: auto;
align-self: flex-start;
padding: .5em;
}
.ddCardFooter {
margin-top: auto;
display: block;
padding: .5em;
border-top: .5px solid #ccc;
}
.ddCardFooter p {
color: #626262;
font-size: 15px;
}
.fa-ul {
padding-left: 0 !important;
margin-left: 1em !important;
}
.fa-ul li {
color: #626262 !important;
font-size: 15px !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.ddCardContent {
padding: .5em;
}
.ddMoreInfo {
display: inline-block;
padding: 10px;
background-color: #0052e7;
margin-bottom: 10px;
border-radius: 5%;
border: 1px solid #0052e7;
cursor: pointer;
}
.ddMoreInfo a {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.ddMoreInfo:hover {
background-color: #fff;
transition: .1s ease;
border: 1px solid #0052e7;
}
.ddMoreInfo:hover a {
color: #0052e7;
}
.ddBtn {
display: inline-block;
border: none;
outline: none;
padding: 12px 16px;
margin: 0.4em auto;
background-color: #f1f1f1;
cursor: pointer;
transition: all 0.2s;
}
.ddBtn:hover {
background-color: #ddd;
}
.ddBtn.active {
background-color: #666;
color: white;
}
#media all and (max-width: 800px) {
.ddBtn {
display: block;
margin: 0.4em auto;
width: 100%;
}
}
.ddToolTip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #0052e7;
cursor: pointer;
width: auto;
}
.ddToolTip .ddToolTipText {
visibility: hidden;
min-width: 240px;
background-color: black;
color: #fff;
border-radius: 5%;
left: 50%;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 125%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
line-height: 1.2;
font-size: 13px;
}
.ddToolTip .ddToolTipText::after {
content: "";
position: absolute;
top: 100%;
left: 30%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.ddToolTip:hover .ddToolTipText {
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
<div class="ddCard">
<div class="ddCardHeader">
<h3>Other Card</h3>
</div>
<div class="ddCardContent">
<p>More stuff</p>
<div class="ddMoreInfo">
Other info
</div>
<div class="ddCardFooter">
<p>Footer</p>
</div>
</div>
</div>
</div>
Here is an updated version of your script:
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer .ddCard").each(function() {
$(this).toggle(this.innerText.toLowerCase().indexOf(value) > -1)
});
});
});
It uses each instead of filter
It looks in the whole card for a matching text
It uses the innerText property to look for a match
I have a template for a messaging app to use for a project but I don't know how to incorporate the JavaScript to make this template work. At the bare minimum I want to send messages. How can I do this?
Code that I currently have:
#import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 10px;
}
#wrapper{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background-color: #b5b5b7;
color: #ffffff;
}
.container{
width: 60%;
height: 80%;
display: flex;
box-shadow: 1rem 2rem 4rem rgba(0,0,0,2);
min-width: 60rem;
}
.users,
#chat-screen{
flex-grow: 1;
height: 100%;
min-width: 30rem;
}
.users{
background-color: black;
}
#chat-screen{
background: linear-gradient(rgba(242,182,50,0.85), rgba(242,182,50,0.85)), url("space.jpg") center no-repeat;
background-size: cover;
}
.users header{
background-color: #677077;
padding: 2rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.users ul{
list-style-type: none;
}
.users ul li{
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid rgba(255,255,255, 0.1);
}
.user ul li:nth-last-child{
border-bottom: none;
}
.users header h1{
font-size: 5rem;
font-weight: 100;
}
.avatar img{
width: 7.5rem;
height: 7.6rem;
border-radius: 50%;
}
.users .avatar{
display: flex;
margin: auto 0;
padding: 1rem;
position: relative;
}
.username{
font-size: 3rem;
}
.online{
background-color: #4ad99b;
width: 2rem;
height: 2rem;
border-radius: 50%;
position: absolute;
left: 6.5rem;
bottom: 1.5rem;
}
.offline{
background-color: #fa676a;
}
.away{
background-color: darkorange;
}
.busy{
background-color: purple;
}
.invisible{
background-color: dimgray;
}
.users ul li .online{
border: 2px solid #fff;
}
.users-list{
flex-grow: 2;
margin: auto 0;
}
.text{
font-size: 1.5rem;
margin: auto 0;
}
.timestamp{
font-size: 0.6rem;
flex-grow: 0.3;
margin: auto 0;
}
#chat-screen{
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 2;
color: #333;
}
#chat-screen .msg-compose{
background-color: #fff;
padding: 1rem;
display: flex;
justify-content: space-between;
}
#chat-screen .msg-compose textarea{
flex-grow: 2;
margin: 0 1rem;
resize: none;
border: none;
padding-top: 5px;
height: 2rem;
}
#chat-screen .msg-compose textarea:focus{
outline: none;
}
#chat-screen .msg-compose i{
color: #c0c0c0;
cursor: pointer;
}
#messages{
overflow: auto;
flex-grow: 2;
padding: 1rem;
}
#messages article{
display: flex;
justify-content: flex-start;
margin-bottom: 2rem;
}
#messages article .avatar{
margin-right: 0;
}
#messages .right .avatar{
margin-right: 0;
}
.msg{
display: flex;
justify-content: space-between;
}
.msg .pointer{
width: 0;
height: 0;
border-style: solid;
border-width: 0 1rem 1.5rem 0;
border-color: transparent #fff transparent transparent;
margin: auto 0;
}
.inner-msg {
background-color: #fff;
width: 100%;
padding: 1.5rem 1rem;
border-radius: 0 4px 4px 4px;
box-shadow: 2px 2px 5px rgba(0,0,0, 0.1);
text-align: left;
margin: auto 0;
}
.right{
flex-direction: row-reverse;
}
.right .msg{
flex-direction: row-reverse;
}
.right .msg .pointer{
width: 0;
height: 0;
border-style: solid;
border-width: 1.5rem 1rem 0 0;
border-color: #fff transparent transparent transparent;
margin: auto 0;
}
.right .msg .inner-msg{
border-radius: 4px 0 4px 4px;
box-shadow: -2px 2px 5px rgba(0,0,0, 0.1);
text-align: right;
}
<section id="chat-screen">
<section id="messages">
<div id="chatHistory">
<article>
<div class="avatar">
<img src="Bert.jpg" alt="Bert">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>Lucky...I wish I had that</p></div>
</div>
</article>
<article class="right">
<div class="avatar">
<img src="Audrey.jpg" alt="Audrey">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>It's called spend money fam!</p>
</div>
</div>
</article>
<article>
<div class="avatar">
<img src="Bert.jpg" alt="Bert">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>But I'm a broke College Student :(</p>
</div>
</div>
</article>
<article class="right">
<div class="avatar">
<img src="Audrey.jpg" alt="Audrey">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>I'm right there with you on that one V_V</p>
</div>
</div>
</article>
<article>
<div class="avatar">
<img src="Bert.jpg" alt="Bert">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p class="text">Struggle Squad Unite :P</p>
</div>
</div>
</article>
</div>
</section>
<div class="msg-compose">
<i class="fas fa-paperclip"></i>
<input type="text" placeholder="Type Something Here..." name="message-to-send" id="message-to-send">
<button type="submit" id="button"><i class="fab fa-telegram-plane"></i></button>
</div>
</section>
I just want to be able to at least send messages. But I know that I need something like Python or Java to be able to do it.
The project is looking awesome! Yes you'll need some javascript to handle the user input from
<input type="text" placeholder="Type Something Here..." name="message-to-send" id="message-to-send">
I suggest looking at something like document.getElementById("message-to-send") to start handling input.
Good luck!
I am testing my navigation bar for a project and I am using basic Html/css
and i have added Jquery so that the hover effect could affect the parent element.
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "none");
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
What I am trying to achieve is when I hover over the red block,I am trying to make parent element ('What's New') to show with color #000 and background white;
SEE THIS IMAGE <--
I know that when i hover 'What's New' it does change color to white, but when I hover over redblock for navigation, the background disappears with 'What's New' disappearing with black background.
No need for JavaScript to do what you want. I think this is what you are looking for? Basically, I am using the :hover on the parent div to change the child element's background and colour.
.nav-whats-new:hover a {
background:white;
color:black;
}
Example:
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.nav-whats-new:hover a {
background:white;
color:black;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
See the edited jQuery. It's what I changed. Change background none to transparent and add the color css styles.
Is this what you wanted?
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
$("li>a").css("color", "black");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "transparent");
$("li>a").css("color", "white");
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>