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.
Related
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;
}
In the below code snippet, on clicking the <div class="inner">Some Text</div> will show up a overlay element. Inside overlay element, on clicking the span element with class popoutTerm will show up the popoutDialog element.
The issue is popoutDialog element is not fully visible, only partially portion of what ever it can display inside the overlay element is visible. I understood that the issue is due to overflow property applied to overlay element. But the requirement is overlay element should be scrollable if it has more content and popoutDialog element should be relative to popoutTerm element.
Please help me to understand and resolve it. Thanks in advance.
HTML Code
<body>
<div style="height:300px;border:1px solid red">Sample Content</div>
<div class="outer">
<div> A </div>
<div> B </div>
<div> C </div>
<div class="inner">Some Text</div>
<div class="overlay">Overlay <span class="popoutTerm">Content <div class="popoutDialog"> popout content </div></span> to display</div>
<div>D</div>
</div>
</div>
<script>
let outerElement = document.querySelector('.outer');
let innerElement = document.querySelector('.inner');
let overlayElement = document.querySelector('.overlay');
let popoutTermElement = document.querySelector('.popoutTerm');
let popoutDialogElement = document.querySelector('.popoutDialog');
innerElement.onclick = function (e) {
console.log('click called');
overlayElement.style.display = 'block';
overlayElement.style.position = 'absolute';
overlayElement.style.top = '50px';
overlayElement.style.left = '50px';
e.stopPropagation();
}
popoutTermElement.onclick = function () {
popoutDialogElement.style.display = 'block';
}
</script>
</body>
CSS Code
.outer {
height: 700px;
border: 1px solid black;
position: relative;
}
.inner {
cursor: pointer;
border: 1px solid blue;
height: 200px;
}
.overlay {
display:none;
height: 500px;
width: 300px;
background-color: green;
color: white;
overflow: auto;
}
.popoutTerm {
color: orange;
cursor: pointer;
position: relative;
}
.popoutDialog {
background-color: red;
color: white;
height: 100px;
width: 100px;
display: none;
position: absolute;
top: -50px;
left: 50px;
}
https://jsfiddle.net/a6v04bLr/
Issue is due to top: -50px; change the value as -10px
.outer {
height: 700px;
border: 1px solid black;
position: relative;
}
.inner {
cursor: pointer;
border: 1px solid blue;
height: 200px;
}
.overlay {
display:flex;
height: 500px;
width: auto;
background-color: green;
color: white;
overflow: auto;
}
.popoutTerm {
color: orange;
cursor: pointer;
position: relative;
}
.popoutDialog {
background-color: red;
color: white;
height: 100px;
width: 100px;
display: none;
position: absolute;
top: -10px;
left: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Utf-8" />
<meta name="viewport" content="width-device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>WonderWoman</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div style="height:300px;border:1px solid red">Sample Content</div>
<div class="outer">
<div> A </div>
<div> B </div>
<div> C </div>
<div class="inner">Some Text</div>
<div class="overlay">Overlay <span class="popoutTerm">Content <div class="popoutDialog"> popout content </div></span> to display</div>
<div>D</div>
</div>
</div>
<script>
let outerElement = document.querySelector('.outer');
let innerElement = document.querySelector('.inner');
let overlayElement = document.querySelector('.overlay');
let popoutTermElement = document.querySelector('.popoutTerm');
let popoutDialogElement = document.querySelector('.popoutDialog');
innerElement.onclick = function (e) {
console.log('click called');
overlayElement.style.display = 'block';
overlayElement.style.position = 'absolute';
overlayElement.style.top = '50px';
overlayElement.style.left = '50px';
e.stopPropagation();
}
popoutTermElement.onclick = function () {
popoutDialogElement.style.display = 'block';
}
</script>
</body>
</html>
I am new to javascript and jquery so I'm not sure where to start.
I am working on a project and it would be nice if the page can auto-scroll into a certain viewport after the user has been inactive for a few seconds.
This can be seen in https://www.nfrealmusic.com/#store when it auto scrolls to a specific section on load up and completes your scroll when you scroll down alittle bit more in between the "merch" and "music" section.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Click the button to scroll to the top of the element with id="content".</p>
<button onclick="myFunction()">Scroll</button>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
</script>
https://codepen.io/Fullstack_developer/pen/bGGKNJX
would like for it to scroll into view automatically without having to press a button!
can this be done with jquery or velocityjs?
Thanks for your help!
function myFunction() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin: 500px;
height: 800px;
width: 2000px;
background-color: coral;
}
<body onload="myFunction()">
<p>Click the button to scroll to the top of the element with id="content".</p>
<button onclick="myFunction()">Scroll</button>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
</body>
You call scroll automatically using this way:
window.onload = function(e){
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
With jQuery, you can use .animate() to scroll without pressing button as shown below:
$(document).ready(function(){
$("#content").animate({ scrollTop: "300px" });
});
window.onload = function(e){
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;}
<!doctype html>
<body>
<p>After loading, it will automatically scroll to the top of the element with id="content".</p>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
</body>
</html>
function select(){
document.getElementById('container').style.border="2px solid red";
}
function pick(){
document.getElementById('container').appendChild(document.getElementById('item'));
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
I want to be able to click the item and it goes to the container div and then I click the item again it goes back to its original place. Can I undo this process? Is there a better way to satisfy the same purpose?
You can do this:
function select(){
document.getElementById('container').style.border="2px solid red";
}
// boolean to keep track of the position
var inside = false;
function pick(){
if(!inside) {
document.getElementById('container').appendChild(document.getElementById('item'));
var getMeHere = document.getElementById('getMeBackHere');
}
else {
var pickMe = document.getElementById('container');
document.getElementById('getMeBackHere').appendChild(document.getElementById('item'));
}
inside = !inside;
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id = "getMeBackHere"></div>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
I would think you could use the parentNode property to check if the item div has the container div as it's parent node, and if it does, append it to the body (or wherever you need it to go). If the item nodes parent is not the container, then append it to the container.
https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode
function select(){
document.getElementById('container').style.border="2px solid red";
}
function pick(){
if(document.getElementById('container').contains(document.getElementById('item')))
{
var item = document.getElementById('item').cloneNode(true);
document.getElementById("container").removeChild(document.getElementById('item'));
document.getElementById('example').appendChild(item);
}
else
document.getElementById('container').appendChild(document.getElementById('item'));
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body id="example">
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
I think this is the only way to do that.
var savedElement;
function select(){
document.getElementById('container').style.border="2px solid red";
document.getElementById('container').removeChild(savedElement);
document.getElementById('container').after(savedElement);
}
function pick() {
savedElement = document.getElementById('item');
document.getElementById('container').appendChild(savedElement);
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
Another solution:
save a copy for document.getElementById('container').parentNode.innerHTML, even you can save it into one array, then it can support undo one by one step.
then when reset, assigns it back ( if save multiple copies into one array, assign with last copy then pop it).
Like below demo:
let cloned = []
cloned.push(document.getElementById('container').parentNode.innerHTML)
function select(){
cloned.push(document.getElementById('container').parentNode.innerHTML)
document.getElementById('container').style.border="2px solid red";
}
function pick(){
cloned.push(document.getElementById('container').parentNode.innerHTML)
document.getElementById('container').appendChild(document.getElementById('item'))
}
function reset(){
cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[0])
cloned = [cloned[0]]
}
function undo(){
cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[cloned.length-1])
cloned.pop()
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<button onclick="reset()">Reset</button>
<button onclick="undo()">Undo</button>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
You can change your 'pick' function to check whether the item is in the container and if it is, append it back to body, like this:
function pick(){
var item = doucumentgetElementById('item');
var container = document.getElementById('container');
if (item.parentElement == container)
{
document.body.appendChild(item);
}
else
{
container.appendChild(item);
}
}
On first click item is moved to the container, on second click it's moved back to the body.
In this JavaScript example when user clicks on 'Change colors' button, it need to swap colors of two div elements. But it doesn't.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
background-color: green;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
But when I change it a little bit and remove 'background-color' from <style> and put it within <div> then it's working.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first" style="background-color: red;">Random text.</div>
<div id="second" style="background-color: green;">Random text.</div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
So is there any way to make it works for solution when 'background-color' is within <style> in <head>?
Element.style only applies to styles within the style attribute of the element. If you want the computed style, which factors in stylesheets and the like...
var firstElem = document.getElementById('first'),
secondElem = document.getElementById('second'),
firstBackground = window.getComputedStyle(firstElement).backgroundColor,
secondBackground = window.getComputedStyle(secondElement).backgroundColor;
firstElem.style.backgroundColor = secondBackground;
secondElem.style.backgroundColor = firstBackground;
This should swap the two colours, regardless of where they are defined.
For this case it whould be more common to use 3 classes in css. One for defining the common style of the divs. And two for defining the differences. Switching the appearance in that case whould just require switching of classes. Such a set-up is far more flexible also for example in combination with annimations.
A way to alter style using Javascript, without inline styling:
https://jsfiddle.net/6tyw211s/10/
<html>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
.color{
background-color: red;
}
.color1{
background-color: green;
}
</style>
<body>
<input type="button" id="color" value="Change colors" />
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
</body>
<script>
var y= document.getElementById('color');
var f=document.getElementById('first');
var s=document.getElementById('second');
y.addEventListener('click', function(){
if (f.className === "color1") {
f.className = "color";
}
else {
f.className = "color1";
}
if(s.className==="color"){
s.className="color1";
}
else{
s.className="color";
}
})
</script>
</html>
You can use switchClass() in jqueryui to do it.
That way, you don't have to specify the background-color values to the divs.
$("#color").click(function myFunction() {
$(".first").switchClass("first", "second", 200, "easeInOutQuad");
$(".second").switchClass("second", "first", 200, "easeInOutQuad");
});
Here is a working version with jqueryui
http://api.jqueryui.com/switchclass/