Develop Reference

How to set textarea height using min-height?

I am trying to create a message input field, using textarea. The reason I am using textarea is to be able to dynamically change the height.
To be able to dynamically change the height of the textarea and the parent divs, I have implemented this code.
The code works, just fine. To be able to use this JavaScript code I have to use min-height on the textarea. The problem is that I want to set the height of the textarea to 10px but it simply doesn't want to work, when using min-height. I does somehow work when I use height, but then the JavaScript won't work.
UPDATE:
I am just trying to create a field where the user can write a message and then post it.
Currently the textarea is too tall in my opinion, there is no reason for it to be taller than needed. So i want the height to initially be 20px, and then be able to expand as the user types.
UPDATE UPDATE:
I want to know how to set the height of the textarea to 10px or 20px, but still be able to dynamically change the height when the user types, using the javascript code i have provided
Any ideas on how to solve this? Btw, I'm not very well versed in CSS.
var areaName = "finder__input";
var textarea = document.getElementById(areaName);
textarea.addEventListener("input", function() {
const textarea = document.querySelector("textarea");
const textareaHeight = textarea.clientHeight;
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
});
body {
color: #292929;
background-color: #616f91
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 100px;
}
.finder {
border: 1px solid #fff;
background-color: #f6f5f0;
border-radius: 5px;
/* width: 722px; */
padding: 3px;
box-shadow: 2px 2px 1px black, -1px -1px 1px white;
}
.finder__outer {
position: relative;
/* width: 700px; */
border-radius: 5px;
min-height: 1px;
padding: 8px;
background-color: transparent;
box-shadow: inset 2px 2px 5px -2px black, inset -10px -10px 5px -7px white;
}
.finder__input {
border: none;
resize: none;
background-color: red;
outline: none;
font-size: 15px;
letter-spacing: 1px;
width: 100%;
font-weight: bold;
min-height: 10px;
max-height: 90px;
}
<div class="container">
<div class="finder">
<div class="finder__outer" id="finder__outer">
<textarea id="finder__input" class="finder__input" type="text" name="q" placeholder="Write a message..."></textarea>
</div>
</div>
</div>

Resize textarea height on input
This is basically similar to this jQuery related question: Resize Textarea on Input.
Here's a rewrite in vanilla JavaScript
const textareaResize = (elTextarea) => {
elTextarea.style.height = "auto";
const h = elTextarea.scrollHeight;
elTextarea.style.height = `${h}px`;
};
document.querySelectorAll(".flexheight").forEach((elTextarea) => {
elTextarea.addEventListener("input", textareaResize); // on input
textareaResize(elTextarea); // on init
});
textarea.flexheight {
resize: none;
width: 100%;
box-sizing: border-box;
font: inherit;
height: 1rem;
}
Starts small and increment height as user types: <br>
<textarea class="flexheight" placeholder="Write a message..."></textarea>
<br>
<textarea class="flexheight" placeholder="Write about yourself..."></textarea>

var areaName = "finder__input";
var textarea = document.getElementById(areaName);
textarea.addEventListener("input", function() {
const textarea = document.querySelector("textarea");
const textareaHeight = textarea.clientHeight;
//textarea.style.height = "10px";
textarea.style.minHeight = textarea.scrollHeight + "px";
});
try using minHeight

Can't get jquery show() to show the element [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm ready to throw my pc through the window, somehow I can't seem to find my mistake. I feel like I am going insane. I have a simple login page in which you enter a name and a room code then you press submit. After you press submit I want to hide the form and show an element that says you are connected to the server. I'm using the following ejs/HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<link href="/assets/styles.css" rel="stylesheet" type="text/css" />
<script src="/assets/zoomFriendsAjax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
</head>
<body>
<script src="/assets/sockets.js"></script>
<h2>Welcome To ZoomFriends</h2>
<div id="pagecontent">
<div id="serverform">
<form>
<label for="servercode"><strong>Server Code:</strong></label>
<input type="text" id="servercode" name="servercode" placeholder="Insert your server code here..." required>
<label for="nickname"><strong>Your Nickname</strong></label>
<input type="text" id="nickname" name="nickname" placeholder="Insert your nickname here..." required>
<button type=submit>join room</button>
</form>
<div>
<div id="connpage">
<h2>Connected to server</h2>
</div>
</div>
</body>
</html>
and then there is this ajax js file, which activates on submit and contains a function to show connected which should show the "connpage" and hide the "form" it only does the latter:
$(document).ready(function(){
$('#serverform').on('submit', function(){
var player = $('input[type="text"]#nickname');
var room = $('input[type="text"]#servercode');
var joindata = {player: player.val(), room: room.val()};
$.ajax({
type: 'POST',
url: '/button',
data: joindata,
success: function(data){
serverconnected();
}
});
return false;
});
function serverconnected(){
$('#connpage').show();
$('#serverform').hide();
}
});
Then there is this css in which connpage is set to display: none;
body{
background: #0d1521;
font-family: tahoma;
color: #989898;
text-align: center;
}
#todo-table{
position: relative;
width: 95%;
background: #090d13;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
#todo-table form:after{
margin: 0;
content: '';
display: block;
clear: both;
}
#connpage{
display: none;
}
input::placeholder {
font-style: italic;
}
input[type="text"]{
width: 100%;
padding: 20px;
background:#181c22;
border: 0;
float: left;
font-size: 20px;
color: #989898;
text-align: center;
}
label{
width: 100%;
padding: 20px;
background:#23282e;
border: 0;
float: left;
font-size: 20px;
color: #989898;
text-align: center;
}
button{
padding: 20px;
width: 100%;
float: left;
background: #23282e;
border: 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 80px;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
width: 100%;
padding: 20px;
box-sizing: border-box;
font-family: arial;
font-size: 20px;
cursor: pointer;
letter-spacing: 1px;
}
li:hover{
text-decoration: line-through;
background: rgba(0,0,0,0.2);
}
h1{
background: url(/assets/logo.png) no-repeat center;
margin-bottom: 0;
text-indent: -10000px;
text-align: center;
}
And this is the part of the server script that deals with the clicking of the submit button:
//if submit button is pressed
app.post('/button', urlencodedParser, function(req, res){
//console.log("pushed the button")
var message = req.body.player;
var found = rooms.some(el => el.roomcode === req.body.room);
if (found){
var targetindex = rooms.findIndex(element => element.roomcode === req.body.room);
io.to(rooms[targetindex].gamesocketid).emit('joinroom', {player: req.body.player, room: req.body.room, socket: socket.id});
//var currentroom = rooms.find(element => element.roomcode === req.body.room);
rooms[targetindex].players.push({nickname: req.body.player, id: socket.id});
//currentroom.players.push({nickname: req.body.player, id: socket.id});
console.log('player ' + req.body.player + ' joined room ' + req.body.room + ' with socket ID ' + socket.id);
//console.log(currentroom);
console.log(rooms[targetindex]);
res.json(rooms[targetindex]);
}
});
as far as I know everything is going as it should, EXCEPT the connpage NEVER SHOWS, i get through every function, all data is logged the way I want, except $('#connpage').show(); does nothing, it doesn't even have the common decency to send me an error or something ;p. Can anyone please help, I'm going nuts.... Eventually I need lots of show and hide to go on, to go through all the states of the page, without refreshing the page. Any help would really be welcome, thank you for even taking a look.

You have a syntax error in your HTML. You never close your serverform TAG.That way your connpage is INSIDE that container and gets hidden too Change
<div id="serverform">
....
<div>
to
<div id="serverform">
...
</div>

normally $("#connpage").show(); should work, maybe in some part of your app you are overriding it, you can use $('#connpage').css('display', '') as an alternatif.
if none of them work , you can remove the display none, and at the beginning you can hide it with .hide() .
i wish it helps

How can I create a Help popup [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to add a small box next to a question on a form I am asking which when clicked will pop up with a box of text for help about the question. How can i add some java script to create a Pop-up box that will appear when clicked rather than using on mouse over

Design it as you like.
Note that you can add several help popups. Just add class="help" and a title containing the help text.
var helpBox = document.getElementById("helpBox");
var helpElements = document.getElementsByClassName("help");
for (var i = 0; i < helpElements.length; i++) {
helpElements[i]._helpText = helpElements[i].title;
helpElements[i].removeAttribute("title");
helpElements[i].onclick = function(e) {
helpBox.style.display = "block";
helpBox.innerHTML = "<span id='close' title='Close'>X</span>" +
e.target._helpText;
helpBox.children[0].onclick = function() {
helpBox.style.display = "none";
}
}
}
body {
background-color: #f4f4f4;
font-family: sans-serif;
}
.help {
cursor: help;
}
#helpBox {
position: absolute;
top: 100px;
display: none;
width: 300px;
left: 50%;
margin-left: -150px;
border: 1px solid gray;
padding: 10px;
background-color: white;
z-index: 1000;
}
#helpBox #close {
float: right;
cursor: pointer;
background-color: red;
color: white;
padding: 0 6px;
}
<span class="help" title="Help text">Help</span>
<div id="helpBox"></div>

javascript liste sur plusieurs lignes [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a list of items contained in a dynamically created div. Unfortunately when the list is too long, it overflows the div. Is there a way to get a newline when the list overflows?
CSS:
div.StdDiv{
width: 30%;
background-color: #ffcc00;
text-align: center;
font-size: 100%;
color: #000000;
padding: 0.5em;
border: 1px solid #ccc;
margin-bottom: 1px;
}
ul.boxy {
list-style:none;
padding: 0px;
margin: 0px;
height: auto;
text-align: center;
}
ul.boxy li {
cursor:move;
display:inline;
margin-right: 2px;
margin-bottom: 2px;
padding:2px 6px 2px 6px;
border: 1px solid silver;
background-color: #eee;
font-size: 100%;
}
HTML:
<div id="divListMots" class="StdDiv">
<span id="ListMots">la la lere</span>
</div>
JavaScript:
var numlist = ['0','1','2','3','4','5','6','7','8','9'];
var textlist = ['li0','li1','li2','li3','li4','li5','li6','li7','li8','li9'];
var ListMots ='';
var ListOfWordsStart = '<ul class="boxy" id="ul">   ';
var ListOfWordsEnd = '</ul>';
var LiWordStart = '<li id="box' ;
var LiWordEnd = ' " class="">' ;
var LiWord ='';
var sep = '    ';
var Output = '';
for (var k=0; k<numlist.length; k++) // pour tous les trous
{
var num = numlist[k];
var WordText = textlist[num];
LiWord = LiWordStart + num + LiWordEnd + WordText +'</li>' + sep;
Output = Output + LiWord ;
}
ListOfWords = ListOfWordsStart + Output + ListOfWordsEnd;
document.getElementById('ListMots').innerHTML = ListOfWords;
jsfiddle

Question in english:
Hello,
I have a list of items contained in a dynamically created div.
Unfortunately when the list is too long, it overflows the div. Is there
a way to get a newline when the list overflows?
The easiest way to accomplish this would be to use
display: inline-block;
instead of
display: inline;
New CSS:
ul.boxy li {
cursor:move;
display:inline-block;
margin-right: 2px;
margin-bottom: 2px;
padding:2px 6px 2px 6px;
border: 1px solid silver;
background-color: #eee;
font-size: 100%;
}
Updated jsFiddle
You should note, however, that this may not work with older browsers.

How to solve this? [] [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
why this problem occurs.I am added a tag element(number) in Hoursdiv through
dynamically.but the problem is:- element is not added in proper way.after added 6
element, space created.
javascript code:-
for(var i=1 ; i<=12; i++) {
(function () {
var cc=i;
if(cc<=9)
cc='0'+i;
var _id1 = "time"+cc;
str1 += "<a id='"+_id1+"' class='hournum a_Cal' >"+cc+"</a>";
}());
}
css code (h2ooooooo edit note: I have no idea if 'a_cal' is actually in the css file, but I've kept it here in case):
'a_cal'
.a_Cal{
text-decoration: none;
color: black;
width: 18%;
height: 11%;
float: left;
border-radius: 4px;
}
.hournum{
padding:5px;
}
.hoursdiv{
border: 1px solid #6699FF;
position: absolute;
top: 25%;
left: 4%;
text-align: center;
color: red;
width: 45%;
height: 52%;
background-color: white;
}

Hm, I feel dirty looking at your code.
If your problem is that space on the right side of the container then let me explain what's going on.
The reason that space is there is because the 6th element is too wide to stay on the same "row", and it gets pushed down to the next row. The reason it's too wide is because of the combined use of %-width and padding in your css, which never ends well.
Illustration
I've constructed an example of how I think you want it to look.
I also cleaned your code a little ;)
Example | Code
In this example I use absolute values instead of percentages. The benefit from this is that I can calculate the exact width required for my container.
A link's width is the sum of the width + padding + margin + border:
40 + (5*2) + (2*2) + (1*2) = 56 px
And we want 5 links per "row"
56 * 5 = 280 px
So the container's width has to be at least 280px to fit 5 links per row.
CSS
.hournum{
text-decoration: none;
color: black;
width: 40px;
float: left;
padding: 0px 5px;
text-align: center;
color: red;
border-radius: 3px;
border: 1px solid black;
margin: 2px 2px;
}
.container{
position: absolute;
top: 10px;
left: 10px;
width: 280px;
background-color: white;
border: 1px solid #6699FF;
padding: 2px;
}
Javascript
var str = "";
for(var i=1 ; i<=12; i++){
var cc = i;
var row
if(i <= 9) cc = "0" + i
str += ''+cc+"";
}
document.body.innerHTML = '<div class="container">'+str+"</div>";
Result