I would like to display an overlay over textarea to display formatted input (textarea does not support tags inside). For now I'm able to pass text that inputed into text area to overlay div but I could not hide text in textarea and it bothers:
overlay = document.getElementById('overlay')
query_template = document.getElementById('query_template')
query_template.addEventListener('input', (e) => {
console.log(query_template.value);
overlay.innerText = query_template.value;
query_template.innerHTML = query_template.value;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
border:1px solid transparent
}
div,
textarea {
position: absolute;
width: 300px;
height: 200px;
top: 0;
left: 0;
font-size: 1em;
line-height: 1em;
}
</style>
</head>
<body>
<body>
<div class="parent">
<div id="overlay" style="color: #1a1a1a"></div>
<textarea id="query_template" style="color: white; background: transparent"></textarea>
</div>
</body>
</body>
</html>
How can I hide text in textarea?
u can set
textarea{
color:transparent;
}
Try opacity.
textarea {
opacity: 0;
}
Related
I have to create boxes inside of a div(The div here is box) whenever the user clicks the button. I have done the following so far, but no boxes are created.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
height: 50px;
width: 50px;
border-color: blue;
}
#box {
width: 700px;
height: 700px;
border: solid black;
}
</style>
</head>
<body>
<h1>The onclick Event</h1>
<button id ="theBoxes" >Creating boxes</button>
<div id = "box"></div>
<script>
var x = document.getElementById("theBoxes");
x.addEventListener("click", myFunction)
function myFunction() {
var box = document.createElement('div');
box.classList.add('myDiv');
document.body.appendChild(box);
}
</script>
</body>
</html>
var x = document.getElementById("theBoxes");
x.addEventListener("click", myFunction)
function myFunction() {
var box = document.createElement('div');
box.classList.add('myDiv');
document.body.appendChild(box);
}
.myDiv {
height: 50px;
width: 50px;
border: 1px solid blue;
}
#box {
width: 700px;
height: 700px;
border: solid black;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>The onclick Event</h1>
<button id ="theBoxes" >Creating boxes</button>
<div id = "box"></div>
</body>
</html>
Your code is working, unfortunately border-color: blue in myDiv doesn't work and the box also added outside your div #box.
So I modify a bit your code by adding position: absolute in #box and border: 1px solid blue in .myDiv.
I have a confusing issue. When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.
If you add a container class it works fine.
$(function(){
$('.container').hover(function(){
var boxId = $(this).find("[data-id]").attr('data-id');
$('#'+boxId).stop().fadeToggle();
});
});
.leftbox {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.rightbox {
width: 100px;
height: 100px;
border: 1px solid black;
background: #99bf8f;
margin-left: 110px;
display: none;
}
.container {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="leftbox" data-id="functionbox1"></div>
<div class="rightbox" id="functionbox1"></div>
</div>
<script src="test.js"></script>
</body>
</html>
Can someone help me with a issue I have. So I have two divs div1 needs to be the height and width of the browser screen and over flow hidden.
Within that div I have another div div2 which is twice the width and hight of the first div. I then need to move that div around on mouse move.
#view-window {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#background-wrapper {
background: url('../images/background.png') no-repeat center center;
background-size: 100% 100%;
position: absolute;
}
<div id="view-window">
<div id="background-wrapper">
</div>
</div>
Kind of like this but when my mouse is in the top left corner of the view box the top top of the red box should be in that corner also.
https://codepen.io/anon/pen/bqKogL
Try this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
#move {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
background: green;
}
</style>
<div id="move">
</div>
<script type="text/javascript">
var div = document.getElementById('move');
document.addEventListener('mousemove',function(e) {
div.style.left = e.pageX+"px";
div.style.top = e.pageY+"px";
});
</script>
</body>
</html>
Use below code:
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$moveable.css({'top': e.pageY,'left': e.pageX});
});
$(".outer").height($(window).height());
$(".outer").width($(window).width());
});
.moveAble {
position: absolute;
}
.info {
background-color:red;
height: 50px;
width:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="moveAble">
<div class="info"></div>
</div>
</div>
I'm presenting some PDFs in a horizontal design with the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject { border: solid 1px #666; max-width: 40%;}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1" ></div>
<div id="pdf2" ></div>
<div id="pdf3" ></div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script>
PDFObject.embed("../../overleaf/a/report.pdf", "#pdf1", {pdfOpenParams:{toolbar: '0'}, page: '1'});
PDFObject.embed("../../overleaf/b/report.pdf", "#pdf2", {pdfOpenParams:{toolbar: '0'}, page: '2'});
PDFObject.embed("../../overleaf/c/report.pdf", "#pdf3", {pdfOpenParams:{toolbar: '0'}, page: '3'});
// PDFObject.embed("../../overleaf/d/report.pdf", "#pdf4", options);
// PDFObject.embed("../../overleaf/e/report.pdf", "#pdf5", options);
</script>
</body>
</html>
I would like to put some text on top of each PDF div, like a brief description about the PDF document. How might I do that?
Snippet
// each pdf must have a heading stored in the array headings
var headings = ["This is the heading for pdf1", "This is the heading for pdf2", "This is the heading for pdf3"]
//get all pdfs container
all_pdf = document.getElementById("scrolly").children;
//loop through and change innerHTML of pdf
for (var x = 0; x < all_pdf.length; ++x) {
all_pdf[x].innerHTML = "<h1>" + headings[x] + "</h1>" + all_pdf[x].innerHTML;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly {
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject {
border: solid 1px #666;
max-width: 40%;
}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1">PDF details1</div>
<div id="pdf2">PDF details2</div>
<div id="pdf3">PDF details3</div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script
Please give me a clue how to achieve that with pure css?
I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. The page automatically resizes then, but these 2 divs heights stays unchanged. Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script?
Or maybe there's another way to make such a layout with a div added by script?
Let me show it in the fiddle:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Thank you!
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. It's very strange behavior even for the css/html
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? It will make it so the div won't expand to include that addition...
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
overflow: hidden;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
If you don't need scrolling - try position:fixed instead of absolute.
You don't need all this CSS, all you need to do is to set their height in CSS explicitely:
first to height: 100vh
after you add new element, to height: calc(100vh + X) where X is distance from initial divs bottom to bottom of the added element.
EDIT: Another solution with removed position: absolute:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html {
height: 100%;
}
body
{
display: flex;
min-height: 100%;
margin: 0 5rem 0 0;
}
div#col1
{
background: #eee;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
width: calc(100vw - 10rem);
}
div#dd
{
background: #f99;
border: 2px solid red;
margin-top: 2000px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>