I'm trying dynamically add a div to a page. This is in Chrome. I've looked at several instructions pages. Seems like this should work, but no joy. I added style attributes that would make it obviously apparent, just to get started. The code is executed, per "Inspect", but no element is appearing. Also the element does not show up in "Inspect/Elements/Find".
function CreateDragClone(partType) {
var cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
//cloneContainer.setAttribute("class", "closeContainer");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.zIndex = "100000";
document.body.append(cloneContainer);
}
With this code you should get a little red dot representing de borderWidth;
Your code is almost done, you just forgot to add width and height to the div element, on the other hand, camelCase shouldn't have the first letter in uppercase.
(function createDragClone() {
const cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.width = "200px";
cloneContainer.style.height = "200px";
cloneContainer.style.zIndex = "100000";
document.body.append(cloneContainer);
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
You need to specify height and width to the created element.
One more thing, partType is passed as an argument but not being used, so you can remove it.
function CreateDragClone() {
var cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
//cloneContainer.setAttribute("class", "closeContainer");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.zIndex = "100000";
cloneContainer.style.width = "100px";
cloneContainer.style.height = "100px";
document.body.append(cloneContainer);
}
CreateDragClone();
Related
I would like to make it so that the user can input a hex into one text box and another hex into a different text box. This would then use linear-gradient so that it would gradient the first color to the second color. In the code snippet is an example of what it may produce. I would prefer to only use css and html but can use javascript if neccessary. Thanks to anyone who attempts to solve this problem any bit. I will respond to any questions in case I am being vague.
body {
background: linear-gradient(to right, #ffb6ce, #ff00ea);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
I created an example.
const body = document.querySelector("body");
const startInput = document.querySelector("#start");
const endInput = document.querySelector("#end");
let startHex = "#fff";
let endHex = "#fff";
let gradient;
function styleBody(){
gradient = `linear-gradient(to right, ${startHex}, ${endHex})`;
body.style.background = gradient;
}
startInput.addEventListener("input", () => {
startHex = event.target.value;
styleBody();
});
endInput.addEventListener("input", () => {
endHex = event.target.value;
styleBody();
});
<input type="color" id="start">
<input type="color" id="end">
const colorPicker1 = document.querySelector("#picker1");
const colorPicker2 = document.querySelector("#picker2");
var firstColor = '#0F0';
var secondColor = '#F00'
document.body.addEventListener("input", gradientPick);
function gradientPick(event) {
if(event.target === colorPicker1){
firstColor = event.target.value;
}
if(event.target === colorPicker2){
secondColor = event.target.value;
}
document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`;
document.body.style.backgroundSize = "contain";
document.body.style.height = "100vh";
}
<input id="picker1" type="color" value="#ff0000">
<input id="picker2" type="color" value="#00ff00">
I'm creating inside a main div, smaller divs from server side (each div contains data, text and images inside) something like this
I want to allow the user to zoom in or out (incase there are more divs then the screen width for example), in a way that the main div will stay with the same size and only the smaller divs will grow or shrink.
here's an example I've found
that provides the solution I want, but the difference is that:
1. I'm creating the div's during run time , and according to the data , the number of divs may change (the example present default image and div)
2. I want that ALL the divs will zoom in or out together.
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm3.aspx.vb" Inherits="TEST.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" >
var speed = 4;
function showImage(src) {
var div = document.createElement("div");
with (div.style) {
width = "300px";
height = "300px";
border = "2px solid black";
textAlign = "center";
overflow = "auto";
}
document.body.appendChild(div);
img = document.createElement("img");
img.src = src;
img.width = 300;
img.height = 300;
div.appendChild(img);
}
function keydown(key) {
var k = 0;
if (key == 187) k = speed;
if (key == 189) k = -speed;
if (key != 0) {
img.width = img.width + k;
img.height = img.height + k;
img.style.margin = ((300 - img.height) / 2).toString() + "px";
}
}
</script>
</head>
<body onkeydown="keydown(event.keyCode)" onload="showImage('http://bjstlh.com/data/wallpapers/67/WDF_1122851.jpg')">
<form id="form1" runat="server">
<h1>press (+) to zoom in <br /> press (-) to zoom out</h1>
</form>
</body>
</html>
I'm not too familiar with Javascript - any help would be appreciated
I build a small function appending an element with an id and styles.
And know my question why does this code not work?
window.addEventListener("load",function(e){
var inButton = document.createElement("DIV"),
body = document.body;
inButton.id = "button";
inButton.style = function (){
height = "200px";
width = "400px";
position = "fixed";
top = "50%";
left = "50%";
marginLeft = -1*(this.width / 2);
marginTop = -1*(this.height / 2);
};
body.appendChild(inButton);
}, false);
I use the following html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<script type="text/javascript" src="js/vendor/modernizr-.8.3.min.js"></script>
</head>
<body>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The Js Code is inside the main.js.
I checked the path again and again, but the path is totally correct.
You are not setting style property correctly. Rest of code is correct.
Here's an example
window.addEventListener("load", function(e) {
var inButton = document.createElement("DIV"),
body = document.body;
inButton.id = "button";
inButton.innerHTML = "Yahooooooooooooooo"; //For example
inButton.style.height = "200px";
inButton.style.width = "400px";
inButton.style.position = "fixed";
inButton.style.top = "50%";
inButton.style.left = "50%";
inButton.style.marginLeft = -1 * (this.width / 2);
inButton.style.marginTop = -1 * (this.height / 2);
body.appendChild(inButton);
}, false);
I have this code but the img.onclick isn't functioning and couldn't figure out what's the reason. Could someone give me some advice? Thanks
var img = document.createElement('img');
img.src = "images/tv.jpg";
img.width = "280";
img.height = "200";
img.onclick = function () {
window.location.href = "~/HEMS/EditDevice.cshtml";
}
...............
cell.appendChild(img);`
Here is working demo
It is working perfectly, You need to make sure that url is correct for changing page location:
var img = document.createElement('img');
img.src = "images/tv.jpg";
img.width = "280";
img.alt='Url not exist';
img.height = "200";
img.onclick = function () {
alert('1');
}
document.getElementById("cell").appendChild(img);
try this one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="content">
content
</div>
<script type="application/javascript">
var img = document.createElement('img');
img.src = "grid.png";
img.width = "280";
img.height = "200";
img.onclick = function () {
window.location.href = "~/HEMS/EditDevice.cshtml";
}
var cnt = document.getElementById('content');
cnt.appendChild(img);
</script>
</body>
</html>
Try
var img = document.createElement('img');
img.src = "images/tv.jpg";
img.width = "280";
img.height = "200";
img.onClick = function () {
window.location.href = "~/HEMS/EditDevice.cshtml";
}
...............
cell.appendChild(img);
I believe it's onClick not onclick.
In addition the url you're redirecting to appears to be an MVC page using tilda notation, as this is a server side concept this is not going to work in JavaScript.
I'm trying to add a div using javascript. The div is appearing in the code and in chromes developer tools but not showing in the actual window ?
Why is this happening, how can I correct this ?
Code:
<div id='body'>
<div id='inner'>div here</div>
</div>
<script>
function add() {
var inner = document.getElementById('inner');
var div = document.createElement('div');
div.style.height = '300px';
div.style.width = '100px';
div.style.color = 'blue';
inner.appendChild(div);
}
add();
</script>
You have set text color, not background-color. So it is there, it's just that it has no content so you can't see it. I assume you meant this:
div.style.backgroundColor = 'blue';
Try this code, it's working for me.
you have to add onload() in body tag
<html>
<head>
<script>
function add() {
var inner = document.getElementById('inner');
var div = document.createElement("div");
div.style.width = "300px";
div.style.height = "100px";
div.style.background = "blue";
inner.appendChild(div);
}
</script>
</head>
<body onload ="add()">
<div id="inner"></div>
</body>
</html>