I have a contenteditable div with id="textarea" I also have a few buttons that insert different texts/symbols at a cursor position. The problem occurs when I click outside of the textarea div (the text inside of buttons, too); the text/symbol is being inserted outside of the div. How can I prevent this? Can I "force focus" onto that div? I have only one textarea although I may have more in future.
For insertion, I used the code suggested by Tim Down on another thread:
Insert html at caret in a contenteditable div
here is the code for my textarea and buttons.
<div id="textarea" contenteditable="true">
<style scoped>
#example-one { margin-bottom: 10px; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 3px dashed #0090D2; }
</style>
<p id="inside">
</p>
</div>
<div id="buttons">
<button type="button" onclick="pasteProjectionAtCaret()">Π</button>
</div>
document.getElementById('textarea').onblur=function(){
document.getElementById('textarea').focus();
};
This makes it so that whenever textarea loses focus, Javascript set the focus back immediately, thus not allowing the user to leave.
Related
I am building a web page for homework. I am trying to figure out how to make a child div appear whenever I hover over the parent div at the bottom, sort of like a dropdown menu. The thing is that the child div has a class and I want only the element that is hovered to show the child div from the parent div. More specifically, the parent div I am talking about is <div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();> and the child div I am talking about is <div class="dropdown-content">. I want to use Vanilla Javascript (preferred) or CSS (not preferred).
TLDR: How do I target only current hovered element from HTML/CSS class in Vanilla Javascript?
How do I do that?
I got this far:
HTML
<!--Lab 1-->
<!--Each individual box.-->
<div class="box">
<!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();">
<!--The div with an image in it. Top one inside the box div.-->
<div>
<a href="Lab_01/LB1_WeiJianZhen_DD.html">
<!--Get an image with 300px width by 200px height. Make it responsive.-->
<img src="../../../Visual Content/placeholder.jpg" alt="Under Contruction" class="imgGrids">
</a>
</div>
<!--The div that contains the heading or title of the lab.-->
<div class="txtBar">
<h3>Lab 1</h3>
</div>
<!--The div that drops down to explain the lab with some text.-->
<div class="dropdown-content">
<p>My first website ever made in an HTML file! Describes a bit about the process of making a very basic website like mine.</p>
</div>
<!--End of inside box div.-->
</div>
<!--End of box div.-->
</div>
CSS
/*Creates the styling of the dropdown box.*/
.dropdown-content {
display: none;
position: relative;
background-color: #62ff36;
box-shadow: 0px 8px 16px 0px rgba(56, 255, 42, 0.8);
padding: 12px 0px;
z-index: 1;
}
JavaScript
function showDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "block";
}
function hideDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "none";
}
The easiest, most performant and overall definitely best way to solve this problem clearly is using CSS.
.inside-box:hover .dropdown-content { display: block; }
If for whatever reason you insist go with Javascript (which I do explicitly not recommend), you are going to have to add 2 listeners to each .inside-box, one for mouseenter, the other for mouseleave:
document.querySelectorAll('.inside-box').forEach(insideBox => {
insideBox.addEventListener('mouseenter', () => insideBox.querySelector('.dropdown-content').style.display = 'block');
insideBox.addEventListener('mouseleave', () => insideBox.querySelector('.dropdown-content').style.display = 'none');
})
Using inline event listeners like you suggested is considered very bad practice, so don't try that.
I'm using dropzone.js for Ajax uploading of images. The problem is that I have the following div containers
<div id="images-container" class="ui-sortable dz-clickable">
<div id="file-image">
<p><b>Add images</b></p>
<small>Click or drag&drop here</small>
</div>
</div>
And dropzone.js is initialised as follows:
$("#file-image").dropzone();
My css is looking like this:
#file-image {
border: 1px solid rgb(187, 187, 187);
background: rgb(247, 247, 247);
box-sizing: border-box;
float: left;
display: block;
position: relative;
z-index: 20;
cursor:pointer;
}
The problem is that when I click on the text (Add images or Click or drag & drop.) the plugin cannot be activated. How can I make the entire #file-image div clickable?
I've changed your div to a form and added an action and it seems to be working fine.
HTML
<div id="images-container" class="ui-sortable dz-clickable">
<form action="/action" id="file-image" class="dropzone">
<p><b>Add images</b></p>
</form>
</div>
This an extract from the official website - "Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute."
So I think you need to use the action attribute to get it to work.
Codepen - https://codepen.io/anon/pen/aGKBgY
I'm following this tutorial: http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition
But I want to get the "Hover Over Me" text right next to the "When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible."
For example, the ideal output would be:
When you move the mouse over the text below, the tooltip text will
fade in and take 1 second to go from completely invisible to visible.
Hover over me
instead of
When you move the mouse over the text below, the tooltip text will
fade in and take 1 second to go from completely invisible to visible.
Hover over me
The tool tip should obviously still show up on hover. What part of the CSS would I have to change?
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
What about changing the structure a little put the Hover over me text in a <span> and not a <div> and then put that inside the <p> tag like this:
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible. <span class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</span></p>
</body>
Here is a JS Fiddle showing it
Let me explain a little as well: in HTML a <p> tag is a block element and, thus, it cannot allow other block elements inside of it (such as <div>). The <span> tag is not block, it is inline, allowing you to place it in side of a <p> tag. Often times, we use <span> tags when we want to edit text inside of a <p> tag because it doesn't break the text in the <span> tag into a new line like a <div> or a second <p> tag would do (as you saw in your example.
The reason this is on two lines is that the paragraph tag enclosing the instructions is a block level element. Meaning it will start and end a new line. You could set the display of this element in your css as inline and it should show text as inline.
p{
display: inline;
}
I was wonder how I can create a text input that has an auto-adjustable height so that it gets taller to fit your text? For example, if I start typing a paragraph, it expands from a few lines to fit the paragraph.
Here's what I've currently got:
#commenttext {
width: 413px;
min-height: 22px;
max-height: 100%;
display: inline;
font-size: 11px;
color: #777777;
word-wrap: break-word;
font-family: "Open Sans", "Tahoma";
top: 7px;
position: relative;
left: 7px;
padding-left: 7px;
}
<form action="" method="POST">
<input type="text" id="commenttext">
</form>
But that's just a normal text area.
How can I make that text area get taller as I type more lines? Do I need Javascript?
Here's a CSS-only solution: Use a div with contenteditable set to true.
<div contenteditable="true"
style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
See this JSFiddle for an example.
EDIT:
If you want to be able to submit this text, you'll need a little bit of javascript to put it into an input field. Add this to your form:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" contenteditable="true"
style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
</form>
This will put the contents of the div into a hidden input field so it will be submitted to the server through POST with anything else.
See this (updated) JSFiddle for an example.
Take a look at this post here:
Creating a textarea with auto-resize
It has all the code needed (HTML and Javascript) to accomplish what you want.
I am very new to web scripting. I have to cover up this defect asap that's why I am using patches instead of some permanent fix .
I got a defect that a tab get selected only when the lettering of it get selected.
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0px;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%'>Search</span>
</div>
There is an issue with z-index but fixing that create some further issues. So I got that the div is get selected when span is selected.
So how can I make whole span cover that div.
Update (from comment)
ok i will try to make it more clear to you as you can see there is an onclick event in that div so whenever you should click on that div some thing need to be loaded. but that tab got selected only when mouse cursor is taken over Search ie we can click only when mouse is on lettering
add display:inline-block; to the <span>
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;left:0px;background-color:transparent;width:75px;border:1px solid blue;' >
<span style='text-align:left;width:100%;border:1px solid red;display:inline-block;'>Search</span>
</div>
I have added border:1px solid red; and border:1px solid blue; for reference
Demo: http://jsfiddle.net/dfJFV/
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%;display:block;'>Search</span>
</div>
add display: block to the <span>