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
Related
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
I'm new to coding, and I'm trying to learn the basics. I wanted to practice what I learned by making flashcards (nothing complicated like saving it, importing it, or exporting it). So far, I made a table that the user can edit. I know how to gather data from the table, but I don't know how to make a CSS flashcard appear every time the user adds a card to the table. I am aware that the code will not work since I put the CSS in JavaScript since this code is just meant to show what I am trying to do. Also, if I am taking a completely wrong approach, please let me know. Thank you! Please excuse the poor variable naming, I was just testing some things.
<script>
function getFlashcardValue() {
for (var repeat = 0; repeat < 200; repeat++) {
var Table = document.getElementById('flashcardsTable');
var column1 = 0;
var column2 = 1;
var numberOfFlashcards = 2;
for (var row = 0; row < numberOfFlashcards; row++) {
var Cells = Table.rows.item(1).cells;
var Question1 = Cells.item(column1).innerHTML;
var Cells1 = Table.rows.item(1).cells;
var Answer1 = Cells.item(column2).innerHTML;
document.getElementById("myFlashcardQuestion" + row).innerHTML = Question1;
document.getElementById("myFlashcardAnswer" + row).innerHTML = Answer1;
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<span id="myFlashcardQuestion1"></span>
</div>
<div class="flip-card-back">
<span id="myFlashcardAnswer1"></span>
</div>
</div>
</div>
}
}
}
</script>
<p style = "font-size: 25px">Hover over the flashcard to flip it!</p>
<style>
.flip-card {
background-color: transparent;
width: 350px;
height: 175px;
margin: auto;
padding: 5px 5px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
background-color: lightblue;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: lightblue;
width: 350px;
height: 175px;
color: black;
font-size: 35px;
text-alignment: center;
}
.flip-card-back {
background-color: red;
color: white;
font-size: 35px;
text-alignment: center;
transform: rotateY(180deg);
}
</style>
So first of all you can create a code snippet in stackoverflows editor (see below), or use jsfiddle and post a shared-link.
It depends on which action the user has to do after he enters the data.
If it is, for example, a button click, then it is possible to call a function that shows the user's input in the flashcard. Now if you want that for every single Q&A you have to create Elements in the for loop and edit them there. Here a little example.
var allCards = document.getElementById("allCards");
for (var i = 1; i <= 5; i++) { //i used 5, you should use length of data
var question = document.createElement("div");
question.textContent = "Question " + i;
question.classList.add("flip-card");
allCards.appendChild(question);
}
.flip-card {
background-color: lightblue;
width: 350px;
height: 175px;
margin: 10px auto;
padding: 5px 5px;
font-size: 35px;
text-align: center;
}
<div id="allCards"></div>
Edit:
As promised, here is an example of how you can set up the flip cards.
https://jsfiddle.net/ybu59hfp/1/
Your concern should now be resolved. If you have any further questions, feel free to write to me in the chat or read a little about JavaScript on the Internet.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
In semantic UI, when using the dropdown component, once you make a selection, it selects the word and appears as a keyword select as shown, allowing for multiple selections:
How can this be done with a text field that takes in any input, and after the user presses enter it will create a selection in the gray box similar to semantic ui? I need to allow this for multiple custom text inputs. Thanks in advance to anyone that can help.
Your description inspired me to implement this feature. Here's what I came up with:
function multiSearchKeyup(inputElement) {
if(event.keyCode === 13) {
inputElement.parentNode
.insertBefore(createFilterItem(inputElement.value), inputElement)
;
inputElement.value = "";
}
function createFilterItem(text) {
const item = document.createElement("div");
item.setAttribute("class", "multi-search-item");
const span = `<span>${text}</span>`;
const close = `<div class="fa fa-close" onclick="this.parentNode.remove()"></div>`;
item.innerHTML = span+close;
return item;
}
}
.multi-search-filter{
border:1px solid #DDD;
border-radius: 3px;
padding:3px;
min-height: 26px;
}
.multi-search-filter > input {
border: 0px;
outline: none;
font-size: 20px;
}
.multi-search-item {
margin: 2px;
padding: 2px 24px 2px 8px;
float: left;
display: flex;
background-color: rgb(204, 204, 204);
color: rgb(51, 51, 51);
border-radius: 3px;
position: relative;
}
.multi-search-item > span {
font-family: 'Muli';
line-height: 18px;
}
.multi-search-item > .fa {
font-size: 12px;
line-height: 18px;
margin-left: 8px;
position: absolute;
right: 8px;
top: 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
<div class="multi-search-filter" onclick="Array.from(this.children).find(n=>n.tagName==='INPUT').focus()">
<input type="text" onkeyup="multiSearchKeyup(this)">
</div>
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>
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.