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/
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 create a sidebar using only JavaScript, but I can't add the close button to the div.
I tried this:
var sideb = document.createElement("Div");
sideb.style.height = "100%";
sideb.style.width = "0px";
sideb.style.backgroundColor = "rgb(30,30,30)";
sideb.style.top = "0px";
sideb.style.right = "0px";
sideb.style.margin = "0px";
sideb.style.padding = "0px";
sideb.style.position = "fixed"
document.body.appendChild(sideb);
var close = document.createElement("Button");
close.innerText = "close";
close.onclick = close;
document.body.sideb.appendChild(close)
But it's not working.
document.body.sideb.appendChild(close)
body doesn't have a property/key called sideb
you just need
sideb.appendChild(close)
You have a couple of bugs in your code. Did you make a function called close? I ask this because you're assigning close to the onclick handler of the button, but after you defined close to be the button element in the local scope. If not, you have to write a function to actually "close" the div. Also, as another person pointed out, sideb is not a property of document.body. You can just call sideb's appendChild method to add the button.
var sideb = document.createElement("Div");
sideb.style.height = "100%";
sideb.style.width = "0px";
sideb.style.backgroundColor = "rgb(30,30,30)";
sideb.style.top = "0px";
sideb.style.right = "0px";
sideb.style.margin = "0px";
sideb.style.padding = "0px";
sideb.style.position = "fixed";
document.body.appendChild(sideb);
var close = document.createElement("Button");
close.innerText = "close";
close.onclick = function() {
sideB.parentNode.removeChild(sideB);
};
sideb.appendChild(close);
Also, if you want to remove some code duplication, you can use Object.assign to remove all the extra references to sideb.style.
Object.assign(sideb.style, {
height: "100%",
width: "0px",
backgroundColor: "rgb(30,30,30)",
top: "0px",
right: "0px",
margin: "0px",
padding: "0px",
position: "fixed"
});
document.body.sideb in this form mean that you call a property called sideb , there is no sideb in your body object so just use sideb.appendChild()
var sideb = document.createElement("Div");
sideb.style.height = "100%";
sideb.style.width = "0px";
sideb.style.backgroundColor = "rgb(30,30,30)"; sideb.style.top = "0px";
sideb.style.right = "0px";
sideb.style.margin = "0px";
sideb.style.padding = "0px";
sideb.style.position = "fixed"
document.getElementByTagName('body')[0].appendChild(sideb);
var close = document.createElement("Button");
close.innerText = "close";
close.onclick = close;
sideb.appendChild(close)
I am trying to create 4 div(s) that are supposed to have a width of 5px and sit at the top, bottom, left and right margins of the viewport, essentially acting all together as a frame or border to the page.
Here is my code:
function border () {
edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.left = 0;
edgeT.style.top = 0;
edgeT.style.right = 0;
edgeT.style.width = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.left = 0;
edgeB.style.right = 0;
edgeB.style.bottom = 0;
edgeB.style.width = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.bottom = 0;
edgeL.style.width = "5px";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.top = 0;
edgeR.style.bottom = 0;
edgeR.style.right = 0;
edgeR.style.width = "5px";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
}
For some reason, when calling the function, the left and right divs (i.e. edgeL and edgeR) are displayed properly, but there is no trace of edgeT and edgeB (top and bottom ones). I cannot understand why since the code is exactly the same for all four of them. FYI the problem is relevant in both Chrome and Firefox.
I know I could use CSS to achieve the same result, but since this is mostly a learning exercise I would still like to understand what is causing the issue in this case.
Thank you all in advance for your help.
Regards,
You should define for the top and bottom divs width: 100% and height: 5px (they're aligned horizontally) and for the left and right divs width: 5px and height: 100% (aligned vertically).
var edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.top = 0;
edgeT.style.left = 0;
edgeT.style.width = "100%";
edgeT.style.height = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
var edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.bottom = 0;
edgeB.style.left = 0;
edgeB.style.width = "100%";
edgeB.style.height = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
var edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.width = "5px";
edgeL.style.height = "100%";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
var edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.right = 0;
edgeR.style.top = 0;
edgeR.style.width = "5px";
edgeR.style.height = "100%";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
If you want to see the top and the bottom then you need to give them a height, not a width.
I am writing a box that appears in the center of a website. To do that I dynamically (js) create two elements - overlay that covers whole page and has 0.5 opacity to show some website, and a box that should have no opacity.
The problem is that both the overlay and the box are a bit transparent.
this.createOverlay = function () {
handler = document.createElement('div');
handler.style.display = 'hidden';
handler.style.width = '100%';
handler.style.height = '100%';
handler.style.top = 0;
handler.style.left = 0;
handler.style.position = 'absolute';
handler.style.background = 'black';
handler.style.color = "#aaaaaa";
handler.style.opacity = "0.5";
handler.style.filter = "alpha(opacity = 5)";
return this;
};
this.createCenteredBox = function (width, height, url) {
var data = JSON.parse(data);
handler = document.createElement('a');
handler.href = data.product_feed_deep_link;
handler.target = "_blank";
handler.style.display = "block";
handler.style.width = width + "px";
handler.style.height = height + "px";
handler.style.position = "absolute";
handler.style.color = "black";
handler.style.backgroundColor = "#ffffff";
handler.style.opacity = "1";
handler.style.top = "50%";
handler.style.left = "50%";
handler.style.marginTop = "-" + height / 2 + "px";
handler.style.marginLeft = "-" + width / 2 + "px";
handler.style.padding = "0 10px 10px 10px";
handler.style.borderRadius = "4px";
var div = document.createElement('div');
handler.appendChild(div);
return this;
};
This is the code, I can't turn off box'es opacity no matter if I set opacity to 1 on it, or opacity filter, or whatever.
How can I solve this?
Opacity isn't inherited (see here), however, all elements that reside inside (descendants) of that elements that the opacity property is applied to will be effected.
The best way to get around this is to use rgba.
handler.style.background = "rgba(0, 0, 0, .5)"; // RGB 0,0,0 is #000 (black).
//handler.style.opacity = "0.5";
//handler.style.filter = "alpha(opacity = 5)";
See 2nd and 3rd answer here as well