I'm struggling with a div that underlapps its siblings what breaks the usability.
I'd like to achieve that the content of #container starts directly under header and that the content gets scrollable immediately when hitting footer instead of underlapping footer. (To reproduce just add some tasks)
For the header, I tried to apply some padding to #container and it kinda works, but breaks when window gets rezized. For the bottom at footer, neither margin or padding worked.
What am I doing wrong?
document.addEventListener('DOMContentLoaded', function() {
window.input = document.getElementById('input');
window.container = document.getElementById('container');
window.input.addEventListener('keypress', function(event) {
if (event.keyCode == '13' && window.input.value != '') {
addTask();
}
});
/**for (let i = 0; i < localStorage.length; i++) {
addTask(i, 'auto');
}*/
});
const checkButton = () => {
if (window.input.value != '') {
addTask();
}
};
const addTask = (index, type) => {
let task = document.createElement('div');
if (!type) {
task.textContent = window.input.value;
//localStorage.setItem(window.input.value, window.input.value);
} else {
//task.textContent = localStorage.getItem(localStorage.key(index));
}
task.classList.add('task');
let closeButton = document.createElement('div');
closeButton.textContent = 'X';
closeButton.classList.add('close');
closeButton.setAttribute('onclick', 'removeTask(this)');
task.appendChild(closeButton);
window.container.appendChild(task);
window.input.value = '';
};
const removeTask = (task) => {
window.container.removeChild(task.parentNode);
//localStorage.removeItem(task.parentNode.textContent.substring(0, task.parentNode.textContent.length - 1));
};
#input {
width: 80%;
color: #E6E6FA;
}
body {
background-color: #E9FEF2;
}
#container {
padding-top: 6%; /** My try with the padding */
width: 100%;
}
h5 {
margin: 1% 1%;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: #E6E6FA;
}
footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
text-align: center;
}
.task {
text-align: left;
padding: 1% 1% 1% 1%;
background-color: #acaaaa;
width: 100%;
}
.task:nth-child(odd) {
background-color: #ccc7c7;
}
.close {
text-align: center;
width: 2%;
color: #FF0000;
float: right;
margin-right: 1%;
}
.close:hover {
background-color: #FF0000;
color: #FFFFFF;
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>What's up?</title>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<body>
<header>
<h5>Your tasks:</h5>
</header>
<div id="container"></div>
<footer>
<input type="text" placeholder="Enter task here..." id="input" autofocus>
<a class="waves waves-light btn" onclick="checkButton()">Add</a>
</footer>
</body>
</html>
I also have a codepen to play around with.
The issue
The problem is that you are using position: fixed; on the header and footer but don't know how much height they will take up, this means you can't use margin or padding to reliably "reserve" the space.
The solution
If header and footer have a fixed height you could add top and bottom padding to #container to "clear" them.
If header and footer don't have a set height one way to ensure that they stay at the top and bottom while the container takes up the remaining space is to use flexbox instead.
document.addEventListener('DOMContentLoaded', function() {
window.input = document.getElementById('input');
window.container = document.getElementById('container');
window.input.addEventListener('keypress', function(event) {
if (event.keyCode == '13' && window.input.value != '') {
addTask();
}
});
/**for (let i = 0; i < localStorage.length; i++) {
addTask(i, 'auto');
}*/
});
const checkButton = () => {
if (window.input.value != '') {
addTask();
}
};
const addTask = (index, type) => {
let task = document.createElement('div');
if (!type) {
task.textContent = window.input.value;
//localStorage.setItem(window.input.value, window.input.value);
} else {
//task.textContent = localStorage.getItem(localStorage.key(index));
}
task.classList.add('task');
let closeButton = document.createElement('div');
closeButton.textContent = 'X';
closeButton.classList.add('close');
closeButton.setAttribute('onclick', 'removeTask(this)');
task.appendChild(closeButton);
window.container.appendChild(task);
window.input.value = '';
};
const removeTask = (task) => {
window.container.removeChild(task.parentNode);
//localStorage.removeItem(task.parentNode.textContent.substring(0, task.parentNode.textContent.length - 1));
};
#input {
width: 80%;
color: #E6E6FA;
}
body {
background-color: #E9FEF2;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100vh;
}
#container {
/*padding-top: 6%;*/ /** My try with the padding */
width: 100%;
flex: 1 1 auto;
overflow-y: auto;
}
h5 {
margin: 1% 1%;
}
header {
/*position: fixed;
top: 0;*/
width: 100%;
background-color: #333;
color: #E6E6FA;
}
footer {
overflow: hidden;
background-color: #333;
/*position: fixed;
bottom: 0;*/
width: 100%;
padding: 10px;
text-align: center;
}
.task {
text-align: left;
padding: 1% 1% 1% 1%;
background-color: #acaaaa;
width: 100%;
}
.task:nth-child(odd) {
background-color: #ccc7c7;
}
.close {
text-align: center;
width: 2%;
color: #FF0000;
float: right;
margin-right: 1%;
}
.close:hover {
background-color: #FF0000;
color: #FFFFFF;
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>What's up?</title>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<body>
<header>
<h5>Your tasks:</h5>
</header>
<div id="container"></div>
<footer>
<input type="text" placeholder="Enter task here..." id="input" autofocus>
<a class="waves waves-light btn" onclick="checkButton()">Add</a>
</footer>
</body>
</html>
One way to solve this is you need to get the height of both <header> and <footer> during runtime (because the heights are dynamic), this is also needed if you want to be as responsive as possible.
Then after getting the heights, add padding-top: height of header and padding-bottom:height of footer to the body. Oh, and also remove the padding-top in the #container
I used JQuery for this, you can convert it to JavaScript if you want.
It still looks like it is still overlapping, but you can immediately scroll after reaching the footer
/*
You can convert this to javascript if you want
*/
$(function() {
var headerHeight = $('header').outerHeight();
var footerHeight = $('footer').outerHeight();
$('body').css('padding-top', headerHeight);
$('body').css('padding-bottom', footerHeight);
});
document.addEventListener('DOMContentLoaded', function() {
window.input = document.getElementById('input');
window.container = document.getElementById('container');
window.input.addEventListener('keypress', function(event) {
if (event.keyCode == '13' && window.input.value != '') {
addTask();
}
});
/**for (let i = 0; i < localStorage.length; i++) {
addTask(i, 'auto');
}*/
});
const checkButton = () => {
if (window.input.value != '') {
addTask();
}
};
const addTask = (index, type) => {
let task = document.createElement('div');
if (!type) {
task.textContent = window.input.value;
//localStorage.setItem(window.input.value, window.input.value);
} else {
//task.textContent = localStorage.getItem(localStorage.key(index));
}
task.classList.add('task');
let closeButton = document.createElement('div');
closeButton.textContent = 'X';
closeButton.classList.add('close');
closeButton.setAttribute('onclick', 'removeTask(this)');
task.appendChild(closeButton);
window.container.appendChild(task);
window.input.value = '';
};
const removeTask = (task) => {
window.container.removeChild(task.parentNode);
//localStorage.removeItem(task.parentNode.textContent.substring(0, task.parentNode.textContent.length - 1));
};
#input {
width: 80%;
color: #E6E6FA;
}
body {
background-color: #E9FEF2;
}
#container {
width: 100%;
}
h5 {
margin: 1% 1%;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: #E6E6FA;
}
footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
text-align: center;
}
.task {
text-align: left;
padding: 1% 1% 1% 1%;
background-color: #acaaaa;
width: 100%;
}
.task:nth-child(odd) {
background-color: #ccc7c7;
}
.close {
text-align: center;
width: 2%;
color: #FF0000;
float: right;
margin-right: 1%;
}
.close:hover {
background-color: #FF0000;
color: #FFFFFF;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<body>
<header>
<h5>Your tasks:</h5>
</header>
<div id="container"></div>
<footer>
<input type="text" placeholder="Enter task here..." id="input" autofocus>
<a class="waves waves-light btn" onclick="checkButton()">Add</a>
</footer>
</body>
This will work for you:
I have just added Fixed px padding to top and bottom considering your header and footer.
document.addEventListener('DOMContentLoaded', function() {
window.input = document.getElementById('input');
window.container = document.getElementById('container');
window.input.addEventListener('keypress', function(event) {
if (event.keyCode == '13' && window.input.value != '') {
addTask();
}
});
/**for (let i = 0; i < localStorage.length; i++) {
addTask(i, 'auto');
}*/
});
const checkButton = () => {
if (window.input.value != '') {
addTask();
}
};
const addTask = (index, type) => {
let task = document.createElement('div');
if (!type) {
task.textContent = window.input.value;
//localStorage.setItem(window.input.value, window.input.value);
} else {
//task.textContent = localStorage.getItem(localStorage.key(index));
}
task.classList.add('task');
let closeButton = document.createElement('div');
closeButton.textContent = 'X';
closeButton.classList.add('close');
closeButton.setAttribute('onclick', 'removeTask(this)');
task.appendChild(closeButton);
window.container.appendChild(task);
window.input.value = '';
};
const removeTask = (task) => {
window.container.removeChild(task.parentNode);
//localStorage.removeItem(task.parentNode.textContent.substring(0, task.parentNode.textContent.length - 1));
};
#input {
width: 80%;
color: #E6E6FA;
}
body {
background-color: #E9FEF2;
}
#container {
padding: 49px 0 71px;
/** My try with the padding */
width: 100%;
}
h5 {
margin: 1% 1%;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: #E6E6FA;
}
footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
text-align: center;
}
.task {
text-align: left;
padding: 1% 1% 1% 1%;
background-color: #acaaaa;
width: 100%;
}
.task:nth-child(odd) {
background-color: #ccc7c7;
}
.close {
text-align: center;
width: 2%;
color: #FF0000;
float: right;
margin-right: 1%;
}
.close:hover {
background-color: #FF0000;
color: #FFFFFF;
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>What's up?</title>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<body>
<header>
<h5>Your tasks:</h5>
</header>
<div id="container"></div>
<footer>
<input type="text" placeholder="Enter task here..." id="input" autofocus>
<a class="waves waves-light btn" onclick="checkButton()">Add</a>
</footer>
</body>
</html>
Hope this was helpfull.
Related
I am making a webpage with .css and .html and have a div "rowcontainer" which I would like to move inside the div "selected" when the checkbox is checked then preferably move back if it is unchecked. Also I am planning to have a lot of these rows so is there I way I can give them separate names so I can refer to them individually?
edit: I have found a solution, thanks to #mplungjan I have added the code which worked for me below.
<script type="text/javascript">
const selected = document.querySelector(".selected");
const main = document.getElementById("tablecontainer")
main.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("move")) {
const rowContainer = tgt.closest(".rowcontainer");
if (tgt.checked) selected.append(rowContainer)
else main.append(rowContainer)
}
})
selected.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("move")) {
const rowContainer = tgt.closest(".rowcontainer");
main.append(rowContainer)
}
})
</script>
.selected{
margin:auto;
width: 80%px;
height: auto;
min-height: 30px;
margin-bottom: 1%;
}
#tablecontainer {
min-height:200px;
}
.rowcontainer {
margin: auto;
width: 80%;
height: 30px;
}
.name {
line-height: 30px;
float: left;
width: 60%;
height: 100%;
padding-left: 15px
}
.ako {
line-height: 30px;
text-align: center;
float: left;
width: 20%;
height: 100%;
}
.select {
line-height: 30px;
text-align: center;
float: left;
width: 20%;
height: 100%;
}
<div id = "selected" class = "selected"></div>
<div id="tablecontainer">
<div class = "rowcontainer" style = "background- color: #e6e6e6;">
<div class = "name"><t>Patrick Star</t></div>
<div class = "ako"><t>13GWZ</t></div>
<div class = "select">
<input type = "checkbox" class = "checkbox move">
</div>
Try this
No need to name them. but you will need JavaScript
If you need to keep the order, you will need to have a list of them and possibly use a data attribute
const selected = document.querySelector(".selected");
const main = document.getElementById("mainContainer")
main.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("move")) {
const rowContainer = tgt.closest(".rowcontainer"); // the container the checkbox is in
if (tgt.checked) selected.append(rowContainer)
else main.append(rowContainer)
}
})
.selected {
margin: auto;
max-width: 800px;
height: auto;
min-height: 30px;
margin-bottom: 1%;
}
.rowcontainer {
margin: auto;
width: 80%;
height: 30px;
}
.name {
line-height: 30px;
float: left;
width: 60%;
height: 100%;
padding-left: 15px
}
.ako {
line-height: 30px;
text-align: center;
float: left;
width: 20%;
height: 100%;
}
.select {
line-height: 30px;
text-align: center;
float: left;
width: 20%;
height: 100%;
}
.checkbox {
height: 17px;
width: 17px;
margin: auto;
margin-top: 6px;
}
<div id="mainContainer">
<div class="selected"></div>
<div class="rowcontainer">
<div class="name">
<bt>Name</bt>
</div>
<div class="ako">
<bt>Ako</bt>
</div>
<div class="select">
<bt>Select</bt>
<input type="checkbox" class="checkbox move">
</div>
</div>
</div>
Use this script on your page.
const maindiv = document.querySelector('.selected'); // this is your maindiv 'selected'
maindiv.style.backgroundColor = 'green'; // colored so that change is visible
const row = document.querySelector('.rowcontainer'); // this is your row
row.style.backgroundColor = 'cornflowerblue'; // colored so that change is visible
const checkbox = document.querySelector('.checkbox'); // this is your checkbox
window.onload = check; // this checks if he checkbox is checked or not when page loads up
checkbox.onclick = check; // this will check when user click on chekbox
// the function that does all the work
function check() {
if (checkbox.checked) {
maindiv.appendChild(row); // it will append your row to maindiv (if chekbox is checked)
}else{
document.body.appendChild(row); // it will append your row to the body (if checkbox is not checked)
}
}
In my web application initially showing Image with overlapping the video when the user click on it the form will show up after submitting the form storing the value in cookie for One day. If cookie have value the YouTube video will show. So that user can watch this is the functionality we have.
The functionality are working but the video are not showing if cookies have value. For this I tried below code.
Here I have submitting the code If cookie have value replacing the YouTube video. It's not working for me. Please suggest us where I went wrong.
<html>
<head>
<title>Set Cookies</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style type="text/css">
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: -60px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #f7f7f7;
margin: auto;
padding: 20px;
border: 1px solid #888;
max-width: 340px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal{
padding-left: 35px;
padding-right: 35px;
}
#contactform input,select {
height: 40px;
border: 1px solid #C6C6C6;
color: #000;
margin: 5px 0 0;
}
.errorMessage{
color: #d13800;
font-size: 12px;
display: none;
}
.customButton{
background-color: #0095eb !important;
color: #fff !important;
}
</style>
<style type="text/css">
.youTypeLink{
display: none;
}
.thumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.thumb li {
width: 193px;
}
.thumb li ~ li {
margin-left: 20px;
}
.thumb .thumbCaption {
padding: 10px 0;
}
.overlay {
position: relative;
}
.overlay .thumbnail {
display: block;
}
.overlay .time {
position: absolute; z-index: 2;
right: 3px; bottom: 3px;
padding: 2px 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background: rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center / 50px 50px;
}
.playWrapper .playBtn {
position: absolute;
z-index: 2;
width: 50px;
height: 50px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto; /* center */
}
.thumb .overlay:hover .playWrapper {
opacity: 1;
}
</style>
<script>
function setCookie(cname,cvalue,exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
let user = getCookie("username");
if (user !== "") {
$('#youTubeImage').css({"display":"none !important"});
$('#youTypeLink').css({"display":"initial !important"});
/* player = new YT.Player('player', {
width : '320',
height : '180',
videoId : 'qlEUrEVqDbo',
playerVars: { 'autoplay': 1 },
events : {
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange
}
});*/
console.log(user);
setCookie("username", "cookiesValue", 1);
}else{
$('#youTubeImage').css({"display":"initial"});
$('#youTypeLink').css({"display":"none"});
}
</script>
</head>
<body>
<div>
<ul id="youTubeImage" class="thumb">
<li>
<div class="overlay">
<img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt="">
<span class="time">3:28</span>
<a href="#" class="playWrapper" id="myBtn">
<!--<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>-->
</a>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
</ul>
<div class="youTypeLink">
<ul class="thumb">
<li>
<div class="overlay">
<iframe width="370" height="303" src="https://www.youtube.com/embed/OXmIptsCsw0">
</iframe>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Please suggest us to work properly. If cookie have value show video or else showing image.
BOT user session is getting overlapped in web channel. we are using https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js
Issue: we are passing country, user unique id and email address from UI to BOT via webchat channel. user are seeing other user's data when they query for their detail i.e. my details. Is this due to using cdn reference? what could be the reason, how to resolve this?
below is the webchat code-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script src="https://askadamwebappdev.azurewebsites.net/AskAdam/babelpolyfill7.4.4.js"></script>
<style>
.chat-box {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 4px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border: 4px solid #12abdb;
margin: 0px;
display: none;
flex-direction: column;
box-sizing: border-box;
min-width: 320px;
min-height: 300px;
position: absolute;
height: 65%;
width: 400px;
bottom: 5px;
left: 5px;
z-index: 99999999;
}
#media only screen and (max-width: 700px) {
.chat-box {
width: 100%;
height: 100%;
transform: none;
margin: 0px;
}
.chat-box header .bot-name {
margin-left: 53px !important;
}
.chat-box header .logo {
margin-top: -4px !important;
width: 60px !important;
height: 60px !important;
}
}
button.chat-box-maximize {
background-color: #E7E7E7;
border-radius: 50%;
border: 2px solid #12abdb;
bottom: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
color: White;
font-size: 30px;
height: 96px;
outline: 0;
padding: 0px;
position: fixed;
left: 20px;
width: 96px;
}
button.chat-box-maximize:focus:not(:active),
button.chat-box-maximize:focus:not(:active) {
background-color: #2a6fa8;
border-color: #2a6fa8;
}
button.chat-box-maximize:active {
background-color: White;
color: #39c;
}
button.chat-box-maximize img {
border-radius: 50%;
margin-top: 5px;
}
.chat-box header {
background-color: #12abdb;
flex-shrink: 0;
display: flex;
cursor: move;
flex-basis: 53px;
}
.chat-box header button {
width: 40px;
height: 40px;
background-color: Transparent;
border: 0;
color: White;
outline: 0;
margin-top: 9px;
cursor: default;
}
.chat-box header button.minimize {
margin-top: 3px;
}
.chat-box header button:focus:not(:active),
.chat-box header button:hover:not(:active) {
color: rgba(255, 255, 255, 0.6);
}
.chat-box header button:focus:active {
color: rgba(255, 255, 255, 0.4);
}
.chat-box header .bot-name {
font-size: 21px;
margin-left: 107px;
font-weight: bold;
color: white;
width: 142px;
}
.chat-box header .bot-title {
font-size: 15px;
margin-left: -121px;
margin-top: 27px;
color: white;
word-break: keep-all;
white-space: nowrap;
}
.chat-box header .logo {
z-index: 1;
width: 120px;
height: 120px;
position: absolute;
margin-top: -61px;
margin-left: -2px;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/image/responsive/ask-adam-virtual-agent-avatar.png);
}
.chat-box header .filler {
flex: 0 10000 100%;
}
.css-1dgbgmu>.image {
background-image: url(/image/responsive/ask-adam-virtual-agent-avatar.png);
background-size: contain;
}
.css-1m1alj7 {
background-color: #12abdb !important;
}
.css-1dgbgmu {
background-color: white !important;
}
.css-1vieo9r .ac-pushButton {
color: #12abdb !important;
}
.css-1vieo9r .ac-pushButton:active {
border-color: #12abdb !important;
}
.css-1vieo9r .ac-pushButton:focus {
outline: 0;
}
.css-14x775w {
display: none;
}
.chat-box ::-moz-selection {
background: #12abdb;
}
.chat-box ::selection {
background: #12abdb;
}
.web-chat {
overflow: hidden;
width: 100%;
height: 100%;
}
.connect-spinner {
display: flex;
margin: auto;
text-align: center;
}
.connect-spinner .content {
margin: auto;
}
.connect-spinner .content .icon {
font-size: 64px;
}
.chat-box-header img {
width: 100%;
}
.chat-box {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.chat-box code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.resizable .resizers {
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
}
.resizable .resizer {
width: 10px;
height: 10px;
position: absolute;
z-index: 999999;
}
.resizable .resizer.top-left {
position: absolute;
left: -5px;
top: -5px;
cursor: nwse-resize;
}
.resizable .resizer.top-right {
position: absolute;
right: -5px;
top: -5px;
cursor: nesw-resize;
}
.resizable .resizer.bottom-left {
position: absolute;
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
.resizable .resizer.bottom-right {
position: absolute;
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}
</style>
<div id="chat-box-container" class="chat-box resizable">
<div class="resizer top-left"></div>
<div class="resizer top-right"></div>
<div class="resizer bottom-left"></div>
<div class="resizer bottom-right"></div>
<header id="chat-box-header" class="chat-header">
<div class="logo"></div>
<div class="bot-name">Ask Adam</div>
<div class="bot-title">Virtual Assistant</div>
<div class="filler"></div>
<button onclick="minimizeConversation()" class="minimize">
<i class="far fa-window-minimize fa-lg"></i>
</button>
<button onclick="restartConversation()" class="restart-conversation">
<i class="fas fa-times fa-lg"></i>
</button>
</header>
<div class="web-chat" id="webchat" role="main"></div>
</div>
<button onclick="minimizeConversation()" class="chat-box-maximize">
<!--i class="far fa-comment-alt"></i-->
<img src="/image/responsive/ask-adam-virtual-agent-avatar.png" />
</button>
<script type="text/javascript">
"use strict";
function makeResizableDiv(div) {
const element = document.querySelector(div);
const resizers = document.querySelectorAll(div + " .resizer");
const minimum_size = 320;
let original_width = 0;
let original_height = 0;
let original_x = 0;
let original_y = 0;
let original_mouse_x = 0;
let original_mouse_y = 0;
for (let i = 0; i < resizers.length; i++) {
const currentResizer = resizers[i];
currentResizer.addEventListener("mousedown", function(e) {
e.preventDefault();
original_width = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("width")
.replace("px", "")
);
original_height = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("height")
.replace("px", "")
);
original_x = element.getBoundingClientRect().left;
original_y = element.getBoundingClientRect().top;
original_mouse_x = e.pageX;
original_mouse_y = e.pageY;
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
});
function resize(e) {
if (currentResizer.classList.contains("bottom-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height + (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
}
} else if (currentResizer.classList.contains("bottom-left")) {
const height = original_height + (e.pageY - original_mouse_y);
const width = original_width - (e.pageX - original_mouse_x);
if (height > minimum_size) {
element.style.height = height + "px";
}
if (width > minimum_size) {
const left = original_x + (e.pageX - original_mouse_x);
element.style.width = width + "px";
element.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
} else if (currentResizer.classList.contains("top-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
const top = original_y + (e.pageY - original_mouse_y);
element.style.top = top + "px";
}
} else {
const width = original_width - (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
element.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
const top = original_y + (e.pageY - original_mouse_y);
element.style.top = top + "px";
}
}
}
function stopResize() {
window.removeEventListener("mousemove", resize);
}
}
}
makeResizableDiv(".resizable");
(function() {
dragElement(document.getElementById("chat-box-container"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById("chat-box-header")) {
document.getElementById(
"chat-box-header"
).onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
})();
var minimized = true;
var store;
var directLine;
var token = "this_is_bot_secret";
(function() {
botInit();
})();
var usr_country = "india";
var usr_mail = "this_is_username#accenture.com";
var usr_login_id = "this_is_userloginId_unique_Across_org";
function botInit() {
var styleOptions = {
botAvatarImage: "/image/responsive/ask-adam-virtual-agent-avatar.png"
};
store = window.WebChat.createStore({}, function(_ref) {
var dispatch = _ref.dispatch;
return function(next) {
return function(action) {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
type: "WEB_CHAT/SEND_EVENT",
payload: {
name: "USER",
value: {
"COUNTRY": usr_country,
"ID": usr_login_id,
"MAIL": usr_mail,
"Service_Now": "true"
}
}
});
} else if (action.type === "DIRECT_LINE/DISCONNECT_FULFILLED") {
return;
}
return next(action);
};
};
});
directLine = window.WebChat.createDirectLine({
token: token
});
window.WebChat.renderWebChat({
directLine: directLine,
store: store,
styleOptions: styleOptions
},
document.getElementById("webchat")
);
document.querySelector("#webchat > *").focus();
}
function minimizeConversation() {
var maximizeButton = document.getElementsByClassName(
"chat-box-maximize"
)[0];
var chatBox = document.getElementsByClassName("chat-box")[0];
if (minimized) {
maximizeButton.style.display = "none";
chatBox.style.display = "flex";
minimized = false;
} else {
maximizeButton.style.display = "inline";
chatBox.style.display = "none";
minimized = true;
}
}
function restartConversation() {
minimizeConversation();
const element = document.getElementById("chat-box-container");
element.removeAttribute("style")
var messages = document.getElementsByClassName("css-1qyo5rb");
while (messages.length > 0)
messages[0].parentNode.removeChild(messages[0]);
botInit();
}
</script>
It doesn't look like you're specifying a user ID in the props or the token. Have a look at this documentation.
Specify a userID. There are two ways to specify the userID: in props, or in the token when generating the token call (createDirectLine()). If both methods are used to specify the userID, the token userID property will be used, and a console.warn will appear during runtime. If the userID is provided via props but is prefixed with 'dl', e.g. 'dl_1234', the value will be thrown and a new ID generated. If userID is not specified, it will default to a random user ID. Multiple users sharing the same user ID is not recommended; their user state will be shared, which creates a security risk when authenticating.
I have this simple form for uploading files:
<form method="post" action="">
<input id="holder" type="file" style="padding: 5px; width:100%; height:100px; border: 5px dashed #ccc">
</form>
http://jsfiddle.net/e98b2w7s/
But now I need a way to add this text in the background inside the dotted area:
"or Drag and Drop your file here"
Is there a way to do that?
You may do better to just set your styles to your form instead, in which case you can just give the form itself the background image for a bit of a cleaner solution:
Edit: Removed background image to show with text instead for a cleaner approach.
form {
padding: 5px;
width: 100%;
height: 100px;
border: 5px dashed #ccc;
}
form h1 {
text-align: center;
color: #ccc;
}
<form method="post" action="">
<input id="holder" type="file">
<h1>Drag & Drop Files Here</h1>
</form>
You don't need to use a background image, however, you could just create an h1 that says "Drag & Drop Here" and then use an SVG or FontAwesome to add the cloud and/or arrow icons.
Please try below solution
<form action="youractionfile.php" method="POST">
<input type="file" multiple>
<p>Drag your files here or click in this area.</p>
<button type="submit">Upload</button>
</form>
CSS
<style type="text/css">
body{
background: rgba(0,0,0,0.9);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #fff;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 170px;
color: #ffffff;
font-family: Arial;
}
form input{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form button{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form button:hover{
background: #149174;
color: #0C5645;
}
form button:active{
border:0;
}
</style>
below javascript code
$(document).ready(function(){
$('form input').change(function () {
$('form p').text(this.files.length + " file(s) selected");
});
});
As you mentioned a question here I'm posting my answer
$(function () {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({ top: y - 15, left: x - 100 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function (e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({ top: y - 15, left: x - 160 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function (e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
})
#drop-zone {
/*Sort of important*/
width: 300px;
/*Sort of important*/
height: 200px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
border: 2px dashed rgba(0,0,0,.3);
border-radius: 20px;
font-family: Arial;
text-align: center;
position: relative;
line-height: 180px;
font-size: 20px;
color: rgba(0,0,0,.3);
}
#drop-zone input {
/*Important*/
position: absolute;
/*Important*/
cursor: pointer;
left: 0px;
top: 0px;
/*Important This is only comment out for demonstration purposes.
opacity:0; */
}
/*Important*/
#drop-zone.mouse-over {
border: 2px dashed rgba(0,0,0,.5);
color: rgba(0,0,0,.5);
}
/*If you dont want the button*/
#clickHere {
position: absolute;
cursor: pointer;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: 20px;
line-height: 26px;
color: white;
font-size: 12px;
width: 100px;
height: 26px;
border-radius: 4px;
background-color: #3b85c3;
}
#clickHere:hover {
background-color: #4499DD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drop-zone">
or Drag and Drop files here
<div id="clickHere">
or click here..
<input type="file" name="file" id="file" />
</div>
</div>
Html:
<input id="holder" type="file" placeholder="or Drag and Drop your file here" />
<label for="holder"> or Drag and Drop your file here </label>
Css:
[type=file] {
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
}
input,
[type=file] + label {
border: 1px solid #CCC;
border-radius: 3px;
text-align: left;
padding: 10px;
width: 150px;
margin: 0;
left: 0;
position: relative;
}
Js:
$("[type=file]").on("change", function(){
// Name of file and placeholder
var file = this.files[0].name;
var dflt = $(this).attr("placeholder");
if($(this).val()!=""){
$(this).next().text(file);
} else {
$(this).next().text(dflt);
}
});
Working example here. Hope this work
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);
});