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>
Related
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 10 months ago.
Improve this question
How I turn the smartphone screen horizontal when he was opening my site?
I found an article on this topic before some days ago and here it is: How to Change Screen Orientation with Javascript In here, you can see a live demo of that. I have just copied and pasted them in the code snippet as well but I think it won't run properly in here because it is inside a snippet.
var _LOCK_BUTTON = document.querySelector("#lock-landscape-button"),
_UNLOCK_BUTTON = document.querySelector("#unlock-button"),
_STATUS = document.querySelector("#orientation-status");
_STATUS.innerHTML = screen.orientation.type + ' mode';
// upon lock to landscape-primary mode
document.querySelector("#lock-landscape-button").addEventListener('click', function() {
if(document.documentElement.requestFullscreen)
document.querySelector("#container").requestFullscreen();
else if(document.documentElement.webkitRequestFullScreen)
document.querySelector("#container").webkitRequestFullScreen();
screen.orientation.lock("landscape-primary")
.then(function() {
_LOCK_BUTTON.style.display = 'none';
_UNLOCK_BUTTON.style.display = 'block';
})
.catch(function(error) {
alert(error);
});
});
// upon unlock
document.querySelector("#unlock-button").addEventListener('click', function() {
screen.orientation.unlock();
_LOCK_BUTTON.style.display = 'block';
_UNLOCK_BUTTON.style.display = 'none';
});
// when screen orientation changes
screen.orientation.addEventListener("change", function() {
_STATUS.innerHTML = screen.orientation.type + ' mode';
});
// on exiting full-screen lock is automatically released
document.addEventListener("fullscreenchange", function() {
_LOCK_BUTTON.style.display = 'block';
_UNLOCK_BUTTON.style.display = 'none';
});
document.addEventListener("webkitfullscreenchange", function() {
_LOCK_BUTTON.style.display = 'block';
_UNLOCK_BUTTON.style.display = 'none';
});
html {
height: 100%;
}
body {
margin: 0px;
background-color: #336699;
height: 100%;
width: 100%;
}
#container {
}
#container:fullscreen {
width: 100%;
height: 100%;
background-color: green;
}
#container:-webkit-full-screen {
width: 100%;
height: 100%;
background-color: green;
}
#orientation-status {
text-align: center;
margin: 30px 0;
color: white;
}
button {
background-color: white;
border: 1px solid #336699;
color: #336699;
width: 300px;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
font-weight: 700;
outline: none;
}
#lock-landscape-button {
}
#unlock-button {
display: none;
}
<div id="container">
<p id="orientation-status"></p>
<div id="buttons-container">
<button id="lock-landscape-button">Lock to Landscape Mode</button>
<button id="unlock-button">Unlock</button>
</div>
</div>
Before going to landscape mode, screen should be in fullscreen mode. Otherwise it won't work because of some security issues.
Except this method, you can also rotate the whole body by adding this body { transform: rotate(-90deg) } CSS code but I can't be sure about that because most of the time, it will not work properly as how as you need.
Thanks and best regards!
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 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.
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