I am using javascript for the editable div element.
var div = document.getElementById('htmlelement');
var ele = document.createElement('div');
ele.setAttribute('id','inputelement');
ele.style.display = 'inline-block';
ele.style.border = 'none';
ele.style.minHeight = '100px';
ele.style.maxHeight = '100px;'
ele.style.padding = '10px';
ele.style.fontSize = '12px';
ele.style.color = 'blue';
ele.setAttribute('contentEditable','true');
div.appendChild(ele);
ele.focus();
Now after focus black border shows over the div area automatically.
I want to remove and change that border color, but I think CSS will not work for this. because div element is dynamically created by javascript.
is any way to remove that black border or change that border color.
i am tryijng to use css but not working because of dynamic element creation
like,
[contenteditable] {
outline: 0px solid transparent;
}
When you talk about "border" you mean "outline"? You can just set it to none.
var div = document.getElementById('htmlelement');
var ele = document.createElement('div');
ele.id = 'inputelement';
ele.style.display = 'inline-block';
ele.style.border = 'none';
ele.style.minHeight = '100px';
ele.style.maxHeight = '100px;';
ele.style.padding = '10px';
ele.style.fontSize = '12px';
ele.style.color = 'blue';
ele.setAttribute('contentEditable', 'true');
div.appendChild(ele);
ele.focus();
div[contenteditable] {
outline: none;
}
<div id="htmlelement"></div>
Related
I am trying to get my div element to the center of the screen that I have aligned to the center but the top margin is still stuck on the top and not centered.
I have tried divElement.style.marginTop = "100px"; but that didn't change anything.
//this is the javascript
function stopDesc(){
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="0 auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
}
Right now the div is centered but the top is stuck to the top of the screen and I want it in the center or at least 100px down from the top.
Edit this line:
divElement.style.margin="0 auto";
and make it:
divElement.style.margin="100px auto";
maybe you've added divElement.style.marginTop = "100px" above that line of code so that it was overriden.
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="100px auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
I created a chrome extension that inserts some html into a page (see screenshot below of how it looks...top right corner is the inserted HTML).
I want to create functionality such that when the user clicks the "Skip for now" text, the inserted HTML should disappear or be hidden. I'm having a difficult time doing that within my current code.
Inject.js gets called through this function:
chrome.tabs.executeScript(tab.ib, {
file: 'inject.js'
});
Inject.js (I'm not sure how to write a new function to hide all the elements that were created below and how to call that function from the HTML section at the bottom):
(function() {
// Create div
var div = document.createElement('div');
// Div styling
// Positioning
div.style.position = 'fixed';
div.style.boxSizing = 'border-box';
div.style.display = 'block';
div.style.zIndex = 10000000;
div.style.top = '20px';
div.style.right = '20px';
// Size
div.style.height = '130px';
div.style.width = '330px';
// Padding
div.style.paddingTop = '20px';
div.style.paddingBottom = '20px';
div.style.paddingLeft = '20px';
div.style.paddingRight = '20px';
div.style.borderRadius = '25px';
// Text
div.style.textAlign = 'center';
div.style.fontSize = '11px';
// Color
div.style.backgroundColor = '#505F69';
div.style.color = 'white';
div.style.border = '2px solid grey';
// HTML
div.innerHTML += '<u>Click to activate your To a Cause donation.</u><br><br>';
div.innerHTML += '<u>Skip for now</u>';
// Append
document.body.appendChild(div);
})();
You should create the skip button as an HTML node (like you did for the div) and append it to the div. Then you can do:
skipButton.onclick = () => {
document.body.removeChild(div);
};
I want to embed button on image using dom. There will be multiple images having multiple button on it which deletes image on click.
I want something like this - JSFiddle
Code I tried:
var div = document.createElement('div');
var parent = document.getElementById('images1');
var btn = document.createElement('input');
btn.type = 'button';
btn.className="multiple",
div.style.cssText = "position: relative; margin-bottom: 10px ; width: 100%;";
btn.style.cssText = " position: absolute; top: 10px; background-image: url(http://totravelistolearn.in/wp-content/themes/travel/images/cross-512.png); width: 20px; height: 20px; border: 0; background-size: 100%; background-repeat: no-repeat;";
//textbox.placeholder = 'Add details about attached Image';
//btn.value = "Remove";
btn.onclick = removeImage;
img = new Image();
img.style.display = 'block';
img.className = 'hi1';
img.style.cssText = 'height: 100px; width: 100px; position: relative;';
img.src = results[i];
div.appendChild(div);
div.appendChild(img);
div.appendChild(btn);
Function to remove image -
function removeImage(){
$$(this).prev("img").remove();
$$(this).remove();
div.parentNode.removeChild(div);
}
you need to use class instead of id, also closest() will do the job for you: DEMO
$('.myButton').click(function(){
$(this).closest('.MyImage').remove();
});
On button click, you can remove the div that contains that image and button, like this :
$('.myButton').on('click', function() {
$(this).closest('div.MyImage').remove();
});
As, I wouldn't advice using same id on multiple elements in one page, I have changed them to classes and then worked through that. I'd suggest you do the same, if your use-case allows you to.
Here is the updated Fiddle
As I Understand , written this code please check once.
function createItem() {
div = document.createElement("div");
div.setAttribute("class", "parent");
image = document.createElement("img");
image.src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg";
image.style.width = "100%";
btn = document.createElement("button");
btn.setAttribute("class", "MyButton");
var textnode = document.createTextNode("X");
btn.appendChild(textnode);
btn.style.position = "absolute";
btn.style.left = "10px";
btn.style.left = "10px";
div.appendChild(image);
div.appendChild(btn);
div.style.width = "100px";
div.style.height = "100px";
div.style.overflow = "hidden";
div.style.marginBottom = "10px";
document.body.appendChild(div);
}
createItem();
createItem();
createItem();
parentDiv = document.getElementsByClassName("parent");
console.log(parentDiv.length);
buttonObject = document.getElementsByClassName("MyButton");
for (var i = 0; i < buttonObject.length; i++) {
buttonObject[i].id = i;
buttonObject[i].onclick = function() {
myId = this.getAttribute("id");
parentDiv[myId].remove()
}
}
There is a problem in the onclick method, I want borders to be removed on all pictures except one when a new one is clicked
Error is: Uncaught TypeError: object is not a function
on line: images(i).style.display = "none";
<!DOCTYPE html>
<html>
<head>
</head>
<title></title>
<script>
var images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg', '06.jpg', '07.jpg', '08.jpg', '09.jpg', '10.jpg',
'11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg',
'21.jpg', '22.jpg', '23.jpg', '24.jpg', '25.jpg', '26.jpg', '27.jpg', '28.jpg', '29.jpg', '30.jpg',
'31.jpg', '32.jpg', '33.jpg', '34.jpg', '35.jpg', '36.jpg', '37.jpg', '38.jpg', '39.jpg', '40.jpg'];
var end = 'cross.jpg';
//to change index in array to display
var first = 0;
var last = 4;
//sets border on image
function setUpImage(i){
var img = document.createElement('img')
img.src = images[i];
//adds image to screen
document.getElementById('content').appendChild(img);
img.onclick = function(){
//if it doesnt have a border
if(img.style.border != "10px solid blue"){
//puts a blue border around image
img.style.border = "10px solid blue";
//add padding
img.style.padding = "10px 10px 10px 10px";
for(var i=0; i<=images.length; i++){
images(i).style.display = "none";
}
}
}
}
</script>
<style>
#content{
width: 600px;
}
</style>
<body onload="buildImage();">
<div id="content"></div>
<button id="button" onclick="addImages()">More</button>
</body>
your problem is that you did not actually select the img elements but rather the string in you images[] array, you will want to give your images an id so you can select them later, then iterate through them like you were, like this:
//sets border on image
function setUpImage(i){
var img = document.createElement('img')
img.src = images[i];
img.id = images[i];
//adds image to screen
document.getElementById('content').appendChild(img);
img.onclick = function(){
//if it doesnt have a border
if(img.style.border != "10px solid blue"){
for(var i=0; i<=images.length; i++){
document.getElementById(image[i]).style.border = "initial";
}
//puts a blue border around image
img.style.border = "10px solid blue";
//add padding
img.style.padding = "10px 10px 10px 10px";
}
}
}
I would however recomment only using one onclick function and giving this function to the onclick event for each image, like this:
function imgClick(el){
//if it doesnt have a border
if(el.style.border != "10px solid blue"){
for(var i=0; i<=images.length; i++){
document.getElementById(image[i]).style.border = "initial";
}
//puts a blue border around image
el.style.border = "10px solid blue";
//add padding
el.style.padding = "10px 10px 10px 10px";
}
}
and
//sets border on image
function setUpImage(i){
var img = document.createElement('img')
img.src = images[i];
img.id = images[i];
//adds image to screen
document.getElementById('content').appendChild(img);
img.onclick = imgClick(this);
}
You make handy use of querySelectorAll, and CSS classes. In your CSS:
img.bordered { border: 1px solid black; }
And then you make use of this class in JavaScript via:
function clickHandler(evt) {
var container = ... || document.body;
var thisImage = evt.target;
var allImages = topelement.querySelectorAll("img");
// this is a NodeList, we want an array, so we convert:
allImages = [].slice.call(allImages);
allImages.forEach(function(img) {
if(img===thisImage)
return img.classList.remove("bordered");
img.classList.add("bordered");
});
}
And then you bind that function either in HTML:
<img src="..." onclick="clickHandler">
Or in your JS when you create the elements:
...
var img = document.createElement("img");
img.addEventListener("click", clickHandler);
img.src = ...;
container.appendChild(img);
...
Done. All images are now given a CSS class that gives than a border, unless it's the image you clicked, in which case the border class gets removed instead. (If you remove a class that wasn't there, nothing happens, and if you add a class that was already there, also nothing happens).
Note that container var, which should be the element that houses all the images you want to toggle. Generally you wouldn't want to apply this to every possible image on a page, but only a specific set of images.
I am trying to overlay text onto a hyperlinked image which has been dynamically created using the document.createElement() function. However, even with an absolute position of left: 0px and top: 0px, the text keeps appearing below the image, and not at the top, left corner as it should:
//mainDiv is a container to hold all the hyperlinked images
for (i = 0; i < imgArray.length; i++)
{
img = document.createElement("img");
img.src = imgArray[i].src;
img.style.width = imgArray[i].wdth;
img.style.height = "auto";
imgLink = document.createElement("a");
imgLink.href = imgArray[i].url;
imgLink.appendChild(img);
imgLabel = document.createElement("p");
imgLabel.innerHTML = imgArray[i].desc;
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgContainer = document.createElement("div");
imgContainer.style.display = "inline";
imgContainer.style.position = "relative";
imgContainer.appendChild(imgLabel);
imgContainer.appendChild(imgLink);
mainDiv.appendChild(imgContainer);
}
The only problem is the positioning of the text div, imgLabel.
Here's a simplified example of the issue on jsFiddle: http://jsfiddle.net/mPL3q/1/
block & inline-block does not work: http://jsfiddle.net/MwjXV/
1st solution
// label
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgLabel.style.margin = '0px';
// container
imgContainer.style.position = "relative";
// tip: parent element of another element containing floated elements
// should have property overflow set to hidden
imgContainer.style.float = "left";
imgContainer.style.margin = "5px";
2nd solution
// label
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgLabel.style.margin = "0px";
// container
imgContainer.style.display = "inline-block";
imgContainer.style.position = "relative";
// you will have gaps between the containers even if the margin is set to 0
imgContainer.style.margin = "0px";
// if you don't want these gaps, set margin-left to -5px (but not to the first element)
if(i !== 0){
imgContainer.style.marginLeft = "-5px";
}
EDIT After analyzing your code...
// change <p> to <label>
imgLabel = document.createElement("label");
imgLabel.innerHTML = "Image " + i;
imgLabel.style.left = "0px";
// you don't need the next line ;)
//imgLabel.style.top = "0px";
imgLabel.style.color = "White";
imgLabel.style.position = "absolute";
1st jsFiddle | 2nd jsFiddle | 3rd jsFiddle
You can do this, add
img.style.zIndex="1";
and
imgLink.style.display = "block";
to their respective blocks
http://jsfiddle.net/mPL3q/8/
OR
if inline-block works for you then
imgContainer.style.display = "inline-block";
http://jsfiddle.net/mPL3q/7/