I am a JS beginner and I have the following problem: I want that as soon as someone clicks on the URL icon inside the accordion the respective link is copied to the clipboard. Unfortunately (always) only the first link is copied to the clipboard, even if one clicks on the other two URL icons only the first link is copied. Although in the clipboard should be link 2 (from the value field) when i click on URL icon 2 (and the same for number 3 of course). I hope I have described the problem clearly enough.
Where is the error and what do I need to change on the JS code to make it work? Thanks a lot for the help in advance!
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title1" id="myInput"></div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title2" id="myInput"></div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title3" id="myInput"></div>
</div>
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("Copied: " + copyText.value);
}
</script>
</body>
</html>
```
Replace function myFunction like this:
function myFunction(event) {
var target = event.target;
var copyText = target.nextElementSibling;
navigator.clipboard.writeText(copyText.value);
alert("Copied: " + copyText.value);
}
then update all onclick attributes like this
onclick="myFunction(event)"
I found a few issues with your code
You didn't change the id number on the inputs so they all would alert to the same URL which made it difficult to tell which is being clicked on.
You are doing a query selection on an id that appears multiple times. This means it is not being fired on the clicked element.
My approach includes taking advantage of the clicked element by passing it in your click handler.
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div><input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
This lets me pass that event to the function call which will give us access to the current target node.
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
In the above case, I had to do some weird traversing because your input is outside the scope of the clicked element. I removed the code related to mobile stuff because that wasn't relevant to this issue (feel free to put that back in).
here's the codepen with my example.
Related
Trying to make counter(till 9) by javascript.
Hid the counting of 1 to 9. So, when the user enters the target then scroll the counter by its height so the hidden numbers will be shown. Used two set intervals in the code maybe that's why code not running according to expectation.
codepen link --> https://codepen.io/aryansharma-2002/pen/GRyZJJv
same code pasted here:-
HTML CODE
<div class="input">
<h1 class="heading">Enter a value between 0 and 9</h1>
<div class="left">
<input type="number" id="count" placeholder="Enter Number">
</div>
<div class="right">
<button class="submit-btn" id="submit-btn">Start Counter</button>
</div>
</div>
<div class="output">
<div class="count-output" id="count-output">
<span class="zero" data-count="0">0</span>
<span class="one" data-count="1">1</span>
<span class="two" data-count="2">2</span>
<span class="three" data-count="3">3</span>
<span class="four" data-count="4">4</span>
<span class="five" data-count="5">5</span>
<span class="six" data-count="6">6</span>
<span class="seven" data-count="7">7</span>
<span class="eight" data-count="8">8</span>
<span class="nine" data-count="9">9</span>
</div>
</div>
NO NEED TO READ FULL CSS CODE. THE MAIN CSS is that to div.count-output is given some fixed height and width and then the span tag inside it, is giving 100% height and width so that only one number shown at a time. And all the other numbers is hidden by using overflow: hidden; css rule. So, we will scroll the .count-output by using javascript.
CSS CODE
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Roboto', sans-serif;
}
.input{
width: 90%;
margin: 10px auto;
padding: 50px;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,177,204,0.5374883229659051) 0%, rgba(255,0,218,0.32180204845610116) 100%);
}
.heading{
color: white;
word-spacing: 4px;
font-weight: 700;
margin-bottom: 25px;
text-align: center;
}
.left{
float: left;
width: 50%;
/* border: 2px solid black; */
text-align: center;
}
.right{
width: 50%;
float: right;
/* border: 2px solid black; */
text-align: center;
}
.input::after{
content: "";
display: block;
clear: both;
}
.input input[type="number"]{
width: 50%;
font-size: 20px;
padding: 3px 5px;
outline: none;
border: none;
}
.submit-btn{
background: white;
font-size: 18px;
font-weight: 700;
padding: 10px;
border: none;
border-radius: 15px;
box-shadow: 0px 0px 10px 0px white;
}
.output{
width: 80%;
margin: 20px auto;
background: rgba(0, 0, 0, 0.685);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.output .count-output{
/* border: 2px solid white; */
width: 75px;
/* height: 75px; */
height: 75px;
background: white;
box-shadow: 0px 0px 5px 0px white;
overflow: hidden;
}
.count-output span{
display: inline-block;
width: 100%;
height: 100%;
border-top: 2px solid red;
font-size: 70px;
/* text-align: center; */
display: flex;
justify-content: center;
align-items: center;
/* font-weight: 700; */
}
JS CODE
// when we click the submit button then take the data of the count, then start the counter and from 1 to 9 data hidden there so by js scroll it after 1sec when the target reaches stop and show alert
var input=document.getElementById("count");
var btn=document.getElementById("submit-btn");
var counter=document.getElementById("count-output");
console.log(input);
console.log(btn);
console.log(counter);
var scrollTillTarget=function (target) {
let count=0;
var heightCounter=counter.clientHeight;
console.log(heightCounter);
let intervalId=setInterval(function () {
if (count==target) {
alert("Target has reached");
clearInterval(intervalId);
counter.scrollTo(0,0);
return;
}
// By this line scrolling occurs instantly so the scrolling is not shown. So, used the setInterval so that do small scrolling in small time till the height of counter.
// counter.scrollBy(0,heightCounter);
let currentScroll=0;
let scrollId=setInterval(function () {
if (currentScroll==heightCounter) {
clearInterval(scrollId);
return;
}
counter.scrollBy(0,1);
currentScroll++;
},1);
count++;
},1000);
}
btn.addEventListener("click",function (event) {
var targetCount=input.value;
console.log(targetCount);
// now start the counter and scroll the count-output div to the span where the data-count attribute of span is equal to the targetCount
scrollTillTarget(targetCount);
});
Problem - Want that scrolling must show and also in 1 second. Then next scrolling till the target count.
This problem occuring maybe because the call stack is blocked by the setInterval callback function.
Solved this question by some other technique but want the answer why the above code is having some problem.
Solved Link- https://codepen.io/aryansharma-2002/pen/MWrjELL
There is a input with type number where the user can write a number. If the number is greater than 4 it will change the color of the input border to red.
I want to show the tooltip in the same situation, not on hover. Is it a way to do that?
<div className="tooltip">
<input
className="partial-quantity-input"
type="number"
min="0"
max="4"
value={quantity}
onChange={changeValue}
/>
<span className="tooltiptext">Exceeds original ordered quantity.</span>
</div>
css:
.partial-quantity-input {
background: rgb(255, 255, 255);
border-radius: 0px;
border: 1px solid rgb(255, 255, 255);
height: 40px;
width: 40px;
outline: none;
&:focus {
border: 1px solid rgb(201, 200, 200);
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:invalid {
outline: none;
border: 1px solid red;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
bottom: 100%;
left: 50%;
margin-left: -60px;
width: 120px;
color: rgb(0, 0, 0);
text-align: center;
padding: 5px 0;
background: rgb(255, 255, 255);
border-radius: 3px;
border: 1px solid rgb(220, 220, 220);
height: 38px;
width: 252px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
as it is in the code, it shows the tooltip on hover (.tooltip:hover).
I tried .tooltip:invalid or .tooltip(input:invalid) but did not work.
Any ideas?
Using no combinator (better said: the Descendant Combinator) like this .element1 .element2 will make CSS look for any element that fits the .element2-selector that is a descendant of .element1. This means, .element2 can either be a direct or indirect child of .element1.
For your case you should use a sibling combinator, ~ (General Sibling Combinator) or + (Adjacent Sibling Combinator) to select .tooltiptext for when input can be selected using the :invalid-selector.
.tooltip input:invalid ~ .tooltiptext {
/* Your CSS-rule to make `.tooltiptext` visible */
}
Another solution
Just for this question I created a CSS tool-class .tooltipped. Simply format your <input> like the following to incorporate the tooltip (the classes in the brackets are options one of which needs to be chosen):
<div class="tooltipped (top | bottom | left | right)">
<input />
<div class="(on-invalid | always)">
<div>
<div>
(Place your content here)
</div>
</div>
</div>
</div>
The content you place in (Place your content here) can be a simple message up to more HTML-code. When simply inserting a message, you might want to set white-space: pre to retain its formatting, as it would otherwise try to keep the tooltip as narrow as possible.
Since the tooltip is placed using position: absolute, you should make sure yourself that the tooltip to be shown has enough space to be read when being displayed.
Changing the side on which the tooltip should be shown is as easy as changing the directional class of .tooltipped. This can even be done easily with JavaScript.
For example, you could change the directional-class when the phone might be too small to display the tooltip in its initial direction.
Obviously, you can make the input-element be of any type. If you want to invalidate it yourself (e.g. when :invalid wouldn't trigger), you can give it the class .invalid with JS for the same effect regarding this tooltip's features.
Here is an example showing basically all the available features:
/* For this example */
html, body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-areas:
". ."
". .";
align-items: center;
justify-items: center;
}
input:invalid {
border-color: red;
outline-color: red;
background: pink;
}
/* Tool-class: Tooltip */
.tooltipped * {margin: 0}
.tooltipped {
--tt-bg: #3f3f3f;
display: flex;
align-items: center;
}
.tooltipped > div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.tooltipped > div > div {
position: absolute;
display: flex;
align-items: center;
}
.tooltipped > div > div::before {
content: "";
border: 4px solid transparent;
}
.tooltipped > div > div > div {
padding: 0.1rem 0.4rem;
border-radius: 2px;
color: white;
background: var(--tt-bg);
}
/* Directional-classes */
.tooltipped.right > div > div {transform: translateX(50%)}
.tooltipped.right > div > div::before {border-right-color: var(--tt-bg)}
.tooltipped.left {flex-flow: row-reverse}
.tooltipped.left > div {justify-content: flex-end}
.tooltipped.left > div > div {flex-flow: row-reverse}
.tooltipped.left > div > div::before {border-left-color: var(--tt-bg)}
.tooltipped.top {flex-flow: column-reverse}
.tooltipped.top > div > div {
flex-flow: column-reverse;
transform: translateY(-50%);
}
.tooltipped.top > div > div::before {border-top-color: var(--tt-bg)}
.tooltipped.bottom {flex-flow: column}
.tooltipped.bottom > div > div {
flex-flow: column;
transform: translateY(50%);
}
.tooltipped.bottom > div > div::before {border-bottom-color: var(--tt-bg)}
/* "Listener"-classes */
.tooltipped input:invalid + .on-invalid,
.tooltipped input.invalid + .on-invalid {visibility: visible}
.tooltipped > .always {visibility: visible}
<div class="tooltipped top">
<input type="number" min="0" max="4"/>
<div class="on-invalid">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class="tooltipped right">
<input type="number" min="0" max="4"/>
<div class="always">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class="tooltipped bottom">
<input type="number" min="0" max="4"/>
<div class="on-invalid">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class="tooltipped left">
<input type="number" min="0" max="4"/>
<div class="always">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
You can achieve the tooltip part using JavaScript:
For example:
let input = document.getElementById("quantity-input");
let tooltip = document.getElementById("invalid_entry");
input.addEventListener("keyup", function(e){
if(e.currentTarget.value.length > 4){
tooltip.innerHTML = "Exceeded length of 4";
tooltip.style.display = "block";
input.style.border = "3px solid red";
}
else if(e.currentTarget.value.length <= 4) {
tooltip.innerHTML = "";
tooltip.style.display = "none";
input.style.borderColor = "1px solid black";
}
})
.partial-quantity-input {
background: rgb(255, 255, 255);
border-radius: 0px;
border: 1px solid rgb(255, 255, 255);
height: 40px;
width: 40px;
outline: none;
&:focus {
border: 1px solid rgb(201, 200, 200);
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:invalid {
outline: none;
border: 1px solid red;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
bottom: 100%;
left: 50%;
margin-left: -60px;
width: 120px;
color: rgb(0, 0, 0);
text-align: center;
padding: 5px 0;
background: rgb(255, 255, 255);
border-radius: 3px;
border: 1px solid rgb(220, 220, 220);
height: 38px;
width: 252px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#invalid_entry {
display: none;
background: orange;
padding: 6px;
color: #fff;
position: absolute;
left: 20px;
top: 28px;
}
<div className="tooltip">
<span id="invalid_entry"></span>
<input
className="partial-quantity-input"
id="quantity-input"
type="number"
min="0"
max="4"
/>
<!-- <span className="tooltiptext">Exceeds original ordered quantity.</span> -->
</div>
Fiddle Code
I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...
I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.
I have an HTML page where I am fetching data from a text file and displaying it in a TextArea. The data is being sent through as expected, but it is not displaying in a visible format
If you click and drag your mouse in the TextArea, as if you were highlighting/selecting the content, then it is visible, but not on it's own.
Issue: This is what I am able to see
But when I select some text by clicking and dragging, I am able to see this:
image output
code:
This is the function I am using
function rdata() {
var file = document.getElementById("myFile").files[0];
var reader = new FileReader();
reader.onload = function(e) {
var textArea = document.getElementById("myTextArea");
textArea.value = e.target.result;
};
reader.readAsText(file);
}
HTML :
<tr>
<td colspan="2">
<div class="container">
<div class="backdrop">
<div class="colors">
</div>
</div>
<textarea id="myTextArea" onclick="rdata();"></textarea>
</div>
</td>
</tr>
CSS code
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.container, .backdrop, #myTextArea {
font: 12px 'Open Sans', sans-serif;
letter-spacing: 1px;
width: 48%;
height: 250px;
}
#myTextArea {
margin: 0;
position: absolute;
border-radius: 0;
background-color: transparent;
z-index: 2;
color: transparent;
resize: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid transparent;
overflow: auto;
pointer-events: none;
}
.colors {
white-space: pre-wrap;
word-wrap: break-word;
}
i have changed the color to black for #myTextArea it is working but my text appears "Blur" how do i fix it
output appears blur
change color in your CSS
#myTextArea {
margin: 0;
position: absolute;
border-radius: 0;
background-color: transparent;
z-index: 2;
color: red; /* i change it to red , u can change to any color u want */
resize: none;
}
It's because of the color: transparent; line in the CSS for #myTextArea. That causes the text to be transparent. Remove it or change it to an actual visible color.
I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.
You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/
You can use Jquery Tooltip:
Jquery Tooltip
Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html
Try this property it's asp but may work for your case
ErrorMessage="Your Message";