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.
Related
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.
I am trying to make a board where users can move sticky notes here and there which contain data.
I am utilizing the sortable jQuery library at the moment. It is working as it is designed to, but I want to modify the functionality a little. When I remove an item from the list, I want an empty space to be left in its place. For example, if I am removing the first item from the list, the rest of the items shouldn't be moved up and take the empty space.
Similarly, when I have only one item in a list and I remove it, I cannot add anything back to that list since the list goes away. I want to stop that from happening as well.
Here's the snippet (click to open).
$(document).ready(function() {
$('.sort-me-alpha').sortable({
connectWith: '.sort-me-gamma',
receive: function (event, ui) {
if ($(ui.item).hasClass('special')) {
ui.sender.sortable('cancel');
}
}
});
$('.sort-me-beta').sortable({
connectWith: '.sort-me-gamma',
receive: function (event, ui) {
if (!$(ui.item).hasClass('special')) {
ui.sender.sortable('cancel');
}
}
});
$('.sort-me-gamma').sortable({
appendTo: document.body,
items: '.sticky',
placeholder: "testclass",
connectWith: '.sort-me-alpha, .sort-me-beta',
receive: function (event, ui) {
//console.log(event, ui.item);
//ui.item.remove(); // remove original item
}
});
});
.sort-me {
/* background-color: #3498db; */
min-height: 30px;
margin: 10px;
padding: 10px;
width: auto;
vertical-align: top;
display: inline-block;
}
.sort-me-alpha {
/* background-color: #3498db; */
min-height: 30px;
margin: 10px;
padding: 10px;
width: auto;
vertical-align: top;
display: inline-block;
}
.sort-me-gamma {
/* background-color: #3498db; */
min-height: 30px;
margin: 10px;
padding: 10px;
width: auto;
vertical-align: top;
display: inline-block;
}
.sort-me-beta {
/* background-color: #3498db; */
min-height: 30px;
margin: 10px;
padding: 10px;
width: fixed;
vertical-align: top;
display: inline-block;
}
.testclass {
background-color: gray;
border: 2px solid gray;
width: 100%;
height: 100%;
}
.sticky {
/* position: absolute; */
right: 0;
z-index: 150;
/* transform: rotate(5deg); */
width: 200px;
min-height: 150px;
margin: 10px 10px 10px;
padding: 10px;
/* font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; */
font-size: 14px;
color: #000;
background: rgba(255, 255, 51, 0.8);
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.3);
}
.sticky:before,
.sticky:after {
content: "";
display: block;
position: absolute;
width: 16px;
height: 16px;
top: 0;
right: 0;
}
.sticky:before {
border-top: solid 8px #fff;
border-right: solid 8px #fff;
border-left: solid 8px transparent;
border-bottom: solid 8px transparent;
}
.sticky:after {
border-bottom: solid 8px #dddd33;
border-left: solid 8px #dddd33;
border-right: solid 8px transparent;
border-top: solid 8px transparent;
}
.ui-helper {
width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div class="sort-me-alpha">
<div class="sticky">
<b>Card 1</b> Put any text in here.
</div>
<div class="sticky">
<b>Card 2</b> Put any text in here.
</div>
</div>
<div class="sort-me-beta">
<div class="sticky">
<b>Card n</b> Put any text in here.
</div>
</div>
<div class="sort-me-gamma">
<div class="sticky">
<b>Card 3</b> Put any text in here.
</div>
<div class="sticky">
<b>Card 4</b> Put any text in here.
</div>
</div>
</div>
When I move Card N to any other list, I cannot bring it back since the list ceases to exist.
Also if I were to move Card 3 to any other list, Card 4 comes up and takes its place, I know this is the default behavior, but can I override it?
One question per question, please. I'll answer the first one.
You should use:
$("#sticky-id").css('visibility','hidden');
The property visibility:hidden keeps the space as it is.
To remove an element, just use remove() instead of touching visibility.
If you want to add an element inside the list use:
remove: function(event, ui) {
console.log(event);
console.log('removed');
$('.sort-me-gamma').prepend('<div class="sticky">' + '<b> I am a dummy card </b>' + '</div>' );
}
And if you want a generic function to do this, you'll need:
.insertAfter('#list :nth-child(<give childnumber here>)')
And to get childnumber use an on click event and set an attribute which contains the ID in each card when creating HTML code, for example id=card-number-[putherevalue]
The file upload field is controlled by the browser so that one should automatically be translated based on the browsers settings. I need set my language on this button. How I can do that?
I've found solution on sitepoint. Just below .file-resume on your file input name and then modify your button.
/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-resume {//FILE-REsume == your name of file input
display: inline-block;
position: relative;
width: 120px;
height: 40px;
border-radius: 5px;
border: solid 1px #11b28e;
background: gray;
color: #FFF;
overflow:hidden;
}
/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
input.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}
/* Add button text */
.wpcf7-file:before {
content: "прикріпити файл";
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}
To change the text 'Select File' on the button I use the code below. And it works fine for me.
However, I can't change the text "No file chosen" next to the button.
Can anyone tell me something about this topic?
.wpcf7-file::-webkit-file-upload-button {
visibility: hidden;
}
.wpcf7-file::before {
content: 'Select File NEW';
display: inline-block;
background: #00a0dd !important;
padding: 15px 15px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font-size: 10pt;
color:#FFF
}
.wpcf7-file:hover::before {
border-color: black;
}
.wpcf7-file:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
Thank you for the help in advance.
This project is a signup form that will use a chat system to collect the user's profile details during their onboarding process. This is my first jQuery project, so I am struggling to spot my mistakes.
My jQuery should append the value in the textarea to the #message-feed div and apply the CSS classes of .message, .bubble and .user to the new element it creates.
However, when I type into the text area and click submit, it flashes the value I have just typed with no styling in the message feed, but it instantly disappears.
The reason for this CSS structure is the interchangeability between the .bot and .user classes depending on whether it is a question presented to the user by the website, or a user's response to a question.
Here is a link for a JSFiddle but it loads very differently than on my local machine (JSFiddle shows errors.
HTML
<div id="container">
<div id="message-feed">
<h1>Let's get to know you a little bit more…</h1>
</div>
<form method="POST">
<div id="text-response">
<textarea id="text-response" placeholder="Type in here…"></textarea>
</div>
<input type="submit" class="submit-response">
</form>
</div>
CSS
#container {
width: 320px;
height: 480px;
background-color: #fff;
position:absolute;
left:50%;
top:50%;
margin:-240px 0 0 -160px;
}
#message-feed {
width: 100%;
height: 100%;
margin: auto;
overflow-y: scroll;
}
.message {
padding: 0px 15px 15px 15px;
width: 90%;
}
.message:after {
content:"";
display: block;
clear: both;
}
.bubble {
border: 0.5px solid #005393;
max-width: 80%;
padding: 10px;
}
.bot {
color: #005393;
float: left;
border-radius: 12px 12px 12px 0px;
}
.user {
float: right;
background-color: #005393;
border-radius: 12px 12px 0px 12px;
color: #fff;
}
#text-response {
height: 23px;
width: 220px;
border-top: 1px solid #eee;
background-color: #fff;
float: left;
}
textarea {
height: 20px;
width: 220px;
float: left;
resize: none;
border: none;
padding: 10px;
line-height: 22px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
overflow: auto;
}
.submit-response {
height: 45px;
width: 80px;
background-color: #005393;
color: #fff;
float: right;
text-align: center;
line-height: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
border: 0;
}
.submit-response:hover {
opacity: 0.5;
}
jQuery
$(document).ready(function() {
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
});
2 problems over there :
1/ You're not preventing the event default behavior. That means whenever you're clicking on the button which is a submit input, it will send a POST request. So the page will change. To prevent this :
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
2/ You're not actually adding the classes. $.append appends elements, not classes. So :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessageText = $('textarea[name=text-response]').val(),
$newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');
$('#message-feed').append($newMessage);
});
Now obviously it doesn't have to be a span, it could be anything else. It still has to be an element.
Also, this is only resolving the issues you had on the front end. You'll need AJAX to send the POST to the server side and get the data without refreshing/leaving the page. But that's another topic.
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";