I'm making a messaging app in Electron. I'm using backdrop-filter to blur the messages as they scroll past the title bar, so I need the messages to pass behind the title bar, rather than being contained inside their own div in the middle of the screen.
When the page is not scrolled, the messages behave as expected. However, at the bottom of the page, the messages are cut off by the bottom bar for entering messages.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="css/chat.css" />
<script src="js/chatWindow.js"></script>
</head>
<body>
<div class="header">
<span class="name">Room Name</span>
</div>
<div class="messageBar">
<input id="messageBox" type="text" placeholder="Enter a message..." />
<div class="sendBtn">Send</div>
</div>
<div class="messageList"></div>
</body>
</html>
CSS
#font-face {
font-family: "Roboto Light";
font-style: "normal";
font-weight: 400;
src: url("fonts/Roboto-Light.ttf") format("truetype");
}
body {
background-color: white;
font-family: "Roboto Light";
padding: 45px 0px;
}
.header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 100;
background-color: rgba(56, 92, 254, 0.75);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-webkit-app-region: drag;
}
.header span {
font-weight: bold;
}
.messageBar {
position: fixed;
top: calc(100% - 45px);
left: 0px;
width: 100%;
height: 45px;
z-index: 100;
background-color: rgba(57, 93, 255, 0.75);
padding: 0px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
vertical-align: middle;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#messageBox {
width: 90%;
height: 100%;
background-color: rgba(255,255,255,0.5);
font-size: 1em;
margin: none;
border: none;
padding: 0px 5px 0px 5px;
}
#messageBox::-webkit-input-placeholder {
color: dimgray;
}
.sendBtn {
float: right;
width: 10%;
height: 100%;
padding: 0px 3px;
line-height: 45px;
transition: 0.2s;
}
.sendBtn:hover {
background-color: rgba(0,0,0,0.25);
}
.messageList {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.message {
display: block;
width: auto;
max-width: 50%;
border-radius: 10px;
padding: 4px;
margin: 5px 0px;
box-sizing: border-box;
background-color: lightblue;
overflow-wrap: break-word;
float: left;
clear: both;
}
.message.mine {
float: right;
background-color: lightgreen;
}
Does anybody know how to fix this issue? Here's a CodePen for an example of what's happening. Any help would be greatly appreciated!
Try this javascript code may this help you.
window.addEventListener("load", function(){
var messageList = document.querySelector(".messageList");
var messageBox = document.getElementById("messageBox")
var sendBtn = document.querySelector(".sendBtn");
for(var i = 0; i < 100; i++) {
var content = "Message body: " + i + "\nThe quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.";
createMessageBubble(content, Math.random() > 0.5);
}
sendBtn.onclick = function() {
var message = messageBox.value;
messageBox.value = "";
if(!message || message.length <= 0) {
return;
}
createMessageBubble(message, true);
// TODO: actually send the message
};
function createMessageBubble(content, isUser) {
var el = document.createElement("div");
el.classList.add("message");
if(isUser) {
el.classList.add("mine");
}
el.innerText = content;
messageList.appendChild(el);
}
var div = document.createElement("div");
div.style.width = "100%";
div.style.height = "45px";
div.style.float = "left";
messageList.parentNode.appendChild(div);
});
Related
i create a form where i upload image into database where i create icon input to select the image i want to convert that icon into that picture which i select after slecting the picture.
<label class="custom-file-upload">
<input asp-for="imge1" name="imge1" type="file" />
<i class="fa fa-camera"></i>
CSS
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
height: 80px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: var(--primary-color);
}
Using readAsDataURL you can get file path and set to img tag.
jQuery(document).ready(function() {
var readURL = function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.input-img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("input[type='file']").on('change', function() {
readURL(this);
});
});
.custom-input-file {
position: relative;
cursor:pointer;
}
.custom-input-file .input-file-wrapper {
height: 150px;
width: 150px;
border-radius: 10px;
position: relative;
}
.custom-input-file .input-file-wrapper .input-img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border: 1px solid #ced4da;
border-radius: 10px;
width: 100%;;
}
.custom-input-file .input-file-wrapper input[type=file] {
position: absolute;
left: 0;
width: 100%;
height: 100%;
padding: 0;
opacity: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="input-wrapper">
<div class="custom-input-file ">
<div class="input-file-wrapper ">
<img src="https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png " class="input-img">
<input type="file" class="form-control ">
</div>
</div>
</div>
little bit change and add some javascrpt and jquery in it.
firslty add this
<div class="form">
<div class="grid">
<div class="form-element">
<input type="file" id="file-1" asp-for="imge1" name="imge1">
<label for="file-1" id="file-1-preview">
<div>
<span>+</span>
</div>
</label>
</div>
</div>
</div>
then add this javascript and jquery
<script>
function previewBeforeUpload(id){
document.querySelector("#"+id).addEventListener("change",function(e){
if(e.target.files.length == 0){
return;
}
let file = e.target.files[0];
let url = URL.createObjectURL(file);
document.querySelector("#"+id+"-preview div").innerText = file.name;
document.querySelector("#"+id+"-preview img").src = url;
});
}
previewBeforeUpload("file-1");
previewBeforeUpload("file-2");
previewBeforeUpload("file-3");
previewBeforeUpload("file-4");
previewBeforeUpload("file-5");
previewBeforeUpload("file-6");
previewBeforeUpload("file-7");
previewBeforeUpload("file-8");
previewBeforeUpload("file-9");
previewBeforeUpload("file-10");
</script>
Also add this CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Raleway",sans-serif;
background: #f8f8f8;
}
.form {
margin: 20px 0px 20px;
padding: 0px 10px;
}
.form h2 {
text-align: center;
color: #acacac;
font-size: 12px;
font-weight: 100;
}
.form .grid {
margin-top: 5px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.form .grid .form-element {
width: 80px;
height: 80px;
box-shadow: 0px 0px 20px 5px rgba(100,100,100,0.1);
}
.form .grid .form-element input {
display: none;
}
.form .grid .form-element img {
width: 80px;
height: 80px;
object-fit: cover;
}
.form .grid .form-element div {
position: relative;
height: 30px;
margin-top: -40px;
background: rgba(0,0,0,0.5);
text-align: center;
line-height: 40px;
font-size: 13px;
color: #f5f5f5;
font-weight: 600;
}
.form .grid .form-element div span {
font-size: 15px;
}
I'm trying to finish off our rehoming page, where a visitor clicks on an animal to open an iframe with more info output from our database. But I can't get the iframe scrollable. I've searched online extensively but can't get any of the suggestions to work.
What am I doing wrong? (I'm way out of my league with code but just doing the best I can with what I find online, so I may have made some basic errors.) Any help at all is greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="en">
<title>iFrame</title>
<script>
asm3_adoptable_filters = "size agegroup sex breed species";
asm3_adoptable_extra = function(a) {
return '<span class="waitingtime">Time waiting for a home: ' + a.TIMEONSHELTER + '</span>';
}
asm3_adoptable_iframe = true;
asm3_adoptable_iframe_fixed = true;
asm3_adoptable_translations = {
"(any sex)": "Any sex",
"(any size)": "Any size",
"(any breed)": "Any breed",
"(any age)": "Any age",
"(any species)": "Any species"
}
asm3_adoptable_sort = "-#DAYSONSHELTER";
</script>
<style>
.waitingtime {
color: black;
font-family: filson soft regular,sans-serif;
</style>
<div id="asm3-adoptables"></div>
<script src="https://service.sheltermanager.com/asmservice?method=animal_view_adoptable_js&account=sm1510"
></script>
Page CSS:
#asm3-adoptable-iframe-overlay{
background-color: rgba(0 0 0 / 57%) !important;
}
#asm3-adoptable-iframe{
overflow-y: scroll !important;
width: 479px !important;
max-width: 100%;
margin: 0 auto;
display: block;
height: 90vh !important;
background-color:white;
margin-top:3em;
}
#asm3-adoptable-iframe-close{
background-color: #c92327;
color: white;
padding: 7px 23px;
/* margin-top: 39px !important; */
position: absolute;
border-radius: 5px;
text-align: center;
right: 0;
left: 0;
margin-top: 34px;
width: 200px;
margin: 0 auto;
top:44px;
}
Element CSS:
.asm3-adoptable-item {
display: inline-block;
text-align: center;
background-color: white;
margin-bottom: 12px;
padding-top: 25px;
width: 31.8%;
margin: 10px;
}
.asm3-adoptable-item:hover {
background-color: black;
}
.asm3-adoptable-item:hover .asm3-adoptable-tagline {
color: white;
}
.asm3-adoptable-name {
font-family: "proxima soft extrabold", sans-serif;
font-size: 44px;
color: #c92327;
margin-top: -16px;
display: block;
}
.asm3-adoptable-tagline {
text-transform: lowercase;
font-family: "proxima soft extrabold",sans-serif;
font-size: 18px;
color: black;
margin-top: -10px;
display: block;
}
.asm3-adoptable-item:hover .asm3-adoptable-name {
color: #c92327;
}
.asm3-adoptable-item:hover .waitingtime {
color: white;
}
.asm3-adoptable-thumbnail {
margin-top: 15px;
width: 425px;
max-width: 100%;
height: 425px;
}
.asm3-adoptable-reserved {
position: relative;
color: white;
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: "proxima soft extrabold", sans-serif;
font-size: 18pt;
}
.asm3-adoptable-reserved span:before {
content: "RESERVED";
}
.asm3-adoptable-reserved span {
position: absolute;
display: inline-block;
right: -60px;
text-align: center;
top: 50px;
background: #c92327;
width: 275px;
transform: rotate(45deg);
}
#asm3-adoptable-filters {
overflow:hidden;
}
#asm3-adoptable-filters select {
width: 17%;
float: left;
margin: 20px;
}
#asm3-adoptable-filters {
font-family: "proxima soft extrabold", sans-serif;
font-size: 22px;
background-color: #dab348;
}
.asm3-adoptable-list {
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 992px) {
.asm3-adoptable-item {
width:50%;
}
}
#media only screen and (max-width: 768px) {
.asm3-adoptable-item {
width:100%;
}
}
You are missing a closing bracket "}" in your <style> tags. After playing around with your website a little I believe you are talking about some sort of full screen modal. But then it seems you are using a iframe in the modal. You might consider not using an iframe because there is really no need and it may solve your problems. Another thing I noticed is that you don't have any links between your html and your css which you might want to look into.
I know there should a mistake in my CSS but I can't figure out which one has caused of the footer be in front of the calendar.
The calendar is in the lab content div and the footer is outside of that div.
So far I've tried removing position:fixed for the footer; then it floats to the top of the page (with margin-top:auto; and without it)
I just want to figure out how to enable scrolling only my page.
body {
line-height: 1.5;
padding: 0;
margin: 0;
background-color: silver;
}
.imagebox {
width: 450px;
height: 350px;
display: flex;
float: left;
flex-basis: 75%;
}
.container {
width: 97%;
margin: auto;
}
.header {
background-color: white;
position: fixed;
top: 0;
left: 200px;
right: 0;
height: 150px;
color: black;
padding-top: 28px;
min-height: 70px;
border: 3px solid;
border: solid;
border-width: thin;
border-color: black;
display: flex;
flex: 0.5;
flex-wrap: wrap;
text-align: center;
padding: 5px;
padding-left: 250px;
padding-right: 250px;
}
.header1 {
flex: 1;
text-align: center;
float: left;
width: 50%;
background-color: white;
}
.header2 {
flex: 1;
text-align: center;
float: right;
width: 50%;
background-color: white;
}
.flex-container {
clear: both;
display: flex;
float: inherit;
}
h3 {
padding: 8px 16px;
}
ul {
list-style-type: none;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.summary {
flex: 30%;
width: 50%;
font-size: 12px;
border-style: solid;
border-width: thin;
border-color: black;
order: 2;
background-color: white;
top: 150px;
float: left;
position: fixed;
bottom: 50px;
left: 200px;
right: 600px;
text-align: justify;
}
.biobox {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
flex: 50%;
order: 3;
width: 50%;
text-align: left;
border-color: black;
border-width: thin;
border-style: solid;
font-size: 15px;
top: 150px;
left: 900px;
position: fixed;
background-color: white;
float: right;
bottom: 50px;
overflow-wrap: break-word;
}
.lab-content {
background-color: silver;
position: fixed;
margin-top: auto;
left: 200px;
bottom: 50px;
right: 0;
}
.footer {
background-color: white;
position: fixed;
bottom: 0;
left: 200px;
right: 0;
margin-top: auto;
text-align: center;
border: 3px solid;
border: solid;
border-width: thin;
border-color: black;
}
.summarybox {
position: fixed;
bottom: 50px;
left: 190px;
right: 600px;
margin-top: 30px;
text-align: justify;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 12px;
}
.navtext h3 {
text-align: center;
padding: 8px 16px;
}
.cal {
text-align: left;
}
.cal h3 {
padding: 0 0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Tony's Calendar
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="newIt207.css" type="text/css"/>
<link rel="stylesheet" href="calendar.css" type="text/css"/>
</head>
<body>
<div class ="container">
<header>
<?php
include('header.php');
?>
</header>
<div class = "flex-container">
<?php
include('menu.ssi');
?>
<div class = "lab-content">
<div class ="input_option">
<form method = "post" action = "calender.php">
<input type = "text" name = "name" center>Student name
<input type = "text" name = "email" center>Email
<input type = "submit" value = "submit">
</div>
<?php
date_default_timezone_set("America/New_York");
$current_year = date("Y");
$current_month = date("m");
$daysinmonth = date("t");
$d = mktime(0,0,0, $current_month, 1, $current_year);
$day_of_week = date('w',$d);
$day_array= array("Sunday", "Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday");
$title = date('F');
$blank = 0;
switch ($day_of_week) {
case 0: $blank = 0; break;
case 1: $blank = 1; break;
case 2: $blank = 2; break;
case 3: $blank = 3; break;
case 4: $blank = 4; break;
case 5: $blank = 5; break;
case 6: $blank = 6; break;
}
echo "<h1><b>" .$title." ".$current_year."</h1></b>" ;
echo "<div class ='table'>";
echo "<div class='table_body'>";
echo "<div class='table_row'>";
foreach($day_array as $value)
{
echo "<div class ='table_header_cell'>".$value."</div>";
}
echo "</div> </div>";
$day_count = 1;
echo "<div class='table_body'>";
echo "<div class='table_row'>";
while ($blank > 0) {
echo "<div class='table_cell'></div>";
$blank = $blank-1;
$day_count++;
}
$day_num = 1;
while ($day_num <= $daysinmonth) {
echo "<div class='table_cell'>$day_num</div>";
$day_num++;
$day_count++;
if ($day_count > 7) {
echo "</div></div><div class='table_body'><div class='table_row'>";
$day_count = 1;
}
}
while ($day_count > 1 && $day_count <=7) {
echo "<div class='table_cell'></div>";
$day_count++;
}
echo "</div> </div>";
echo "</div>";
?>
</div>
<div>
<?php
include('footer.ssi');
?>
</div>
</div>
</div>
</body>
</html>
It's hard to tell without seeing your code but, try setting the z-index property in .lab-content and .footer. The z-index for the lab-content element should be higher than the footer element.
.lab-content {
z-index: 2;
}
.footer {
z-index: 1;
}
Here is some info on z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Here is the last part of your HTML.
<div>
<?php
include('footer.ssi');
?>
</div>
</div> <<----
</div>
</body>
</html>
The footer DIV seems to be inside the .flex-container. I have highlighted the offending /div with an arrow. If you move that above the footer DIV it should work and the footer should be actually at the foot of your page. Both the header and footer will still be inside your main container.
I have this CSS code below of some data displayed in a form of a pill what i'm trying to accomplish is trying to add a Unicode plus sign inside of my pill something like this image below.
But whenever i try to increase the font-size of the Unicode it just messes up the whole text and shape of the pills is there any way to make it look like the image on-top without messing too much of the original css? Any help would be appreciated thanks.
var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];
var redString = '';
$.each(red[key], function(index) {
redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);
.pilldiv {
padding: 0px 19px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.redpill:before {
content: "\002B";
font-size: 28px;
width: 15px;
vertical-align: baseline;
margin-left: -7px;
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h3 {
font-weight: normal;
color: White;
}
.panel {
display: table;
table-layout: fixed;
height: 100%;
width: 30%;
background-color: black;
}
body {
background-color: white;
}
<div class="center">
<div class="panel">
<div id="redid" class="redclass wrappingflexbox"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
When you change the actual size of the pseudo-elememt font it will change the shape of the pill accordingly since the pill's size is determined by the size of the contents.
Thus I would suggest that you change the apparent size of the glyph by using a transform instead.
Since this is entirely visual it does not affect the size of the pill.
.redpill:before {
content: "\002B";
/* font-size: 28px;*/ */ remove this */
width: 15px;
vertical-align: baseline;
margin: 0 7px 0 -7px;
display:inline-block; /* required */
transform:scale(2); /* this*/
}
var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];
var redString = '';
$.each(red[key], function(index) {
redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);
.pilldiv {
padding: 0px 19px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.redpill:before {
content: "\002B";
/* font-size: 28px;*/
*/ remove this */ width: 15px;
vertical-align: baseline;
margin: 0 7px 0 -7px;
display: inline-block;
transform: scale(2)
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h3 {
font-weight: normal;
color: White;
}
.panel {
display: table;
table-layout: fixed;
height: 100%;
width: 30%;
background-color: black;
}
body {
background-color: white;
}
<div class="center">
<div class="panel">
<div id="redid" class="redclass wrappingflexbox"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Make sure :before inherits class font-size:
.redpill:before {
content: "\002B";
padding-right: 2px;
}
.pilldiv {
padding: 5px 22px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
I am new to backbone...
I would like to increase the size of circle...
can you guys tell me how to double the size of circle...
providing my code below...
and even i wanted it to rotate slowly..and how to enter text inside the circle...
.box {
border-radius: 300px;
width: 20px; height: 10px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}
To change the circle diameter, you change the CSS, e.g.
.box-view {
width: 60px; height: 60px;
float: left;
position: relative;
margin: 8px;
}
.box {
border-radius: 300px;
width: 40px; height: 30px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}
To change the text displayed, you change the template:
<script type="x-template" id="underscore-template">
<div class="box" id="box-<%= number %>" style="top: <%= top %>px; left: <%= left %>px; background: rgb(0,0,<%= color %>);">
Count : <%= content %>
</div>
</script>
Finally, to make them move slower, you delay the call to the animation function:
var backboneAnimate = function() {
for (var i = 0, l = boxes.length; i < l; i++) {
boxes[i].tick();
}
window.timeout = _.delay(_.defer, 50, backboneAnimate);
};
And the result: http://jsfiddle.net/Fr94w/
Try this one:
.box-view {
width: 40px; height: 40px;
float: left;
position: relative;
margin: 2px;
}
.box {
border-radius: 50%;
width: 40px; height: 40px;
color: #fff;
font: 10px/40px Arial;
text-align: center;
position: absolute;
}
http://jsfiddle.net/9sc4Q/