I am using bootstrap3 on a site that allows users to upload images of their own. These images are later displayed in a given page. Problem is, some users upload photos that are either bigger or smaller in respect to the div that'll hold them. I wish to resize all these images using CSS (or even JavaScript if need be) in order for them to fit in the div whilst maintaining their aspect ratio. At the same time, I want them to be responsive.
Use the img-responsive class on your image.
From the Bootstrap documentation: "Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element."
Try this: https://jsfiddle.net/murkle/10jd0khz/1/
function openImageInLightBox(imageBase64) {
div = document.createElement("div");
div.id = "myLightboxDiv";
div.style.width = "80%";
div.style.height = "80%";
div.style.position = "fixed";
div.style.top = "10%";
div.style.left= "10%";
div.style.border = "7px solid rgba(0, 0, 0, 0.5)";
div.style.background = "#000";
div.style["background-image"] = "url('" + imageBase64 + "')";
div.style["background-size"] = "contain";
div.style["background-repeat"] = "no-repeat";
div.style["background-position"] = "center";
div.onclick = function() {document.body.removeChild(div);};
document.body.appendChild(div);
// now add transparent image over it
// so that "Save image as..." works
// remove this if you don't need it
var elem = document.createElement("img");
elem.src = imageBase64;
elem.style.height = "100%";
elem.style.width = "100%";
elem.style.opacity = 0;
div.appendChild(elem);
}
Related
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'm trying to use the image generated by https://github.com/qrohlf/trianglify as a background image as the author does on his website (http://qrohlf.com/trianglify/). How do I overlay a div on the document.body.appendChild.
The Trianglify library provides a .png() method we can use to add a dynamically generated image to the page.
This first method simply sets the document.body.style.backgroundImage to the generated Trianglify image. In both cases we'll use window.innerHeight and window.innerWidth to get the height and width of the window when creating the Trianglify image.
// Create the Trianglify image
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
cell_size: 30});
document.body.style.backgroundSize = "cover";
document.body.style.backgroundImage = "url(" + pattern.png() + ")";
html,
body {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.
You could also create an element, and set the Trianglify image as the background on it, to overlay it on the page.
// Create the Trianglify image
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
cell_size: 30});
var overlay = document.createElement("div");
overlay.style.position = "absolute";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.height = "100%";
overlay.style.width = "100%";
overlay.style.opacity = "0.8";
overlay.style.backgroundSize = "cover";
overlay.style.backgroundImage = "url(" + pattern.png() + ")";
document.body.appendChild(overlay);
html,
body {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.
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
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/
I am trying to generate a div element in the corner of the screen from a bookmarklet.
I tried
var newdiv = document.createElement('div');
newdiv.id="blabal";
newdiv.style.background = "#00C";
newdiv.style.border = "4px solid #000";
newdiv.style.width=300;
newdiv.style.heigth=200;
newdiv.style.position="fixed";
newdiv.style.top="20";
document.body.appendChild(newdiv);
to now avail.
Thanks.
You need to provide px with the values, and you got a typo in heigth:
var newdiv = document.createElement('div');
newdiv.id="blabal";
newdiv.style.background = "#00C";
newdiv.style.border = "4px solid #000";
newdiv.style.width="300px";
newdiv.style.height="200px";
newdiv.style.position="fixed";
newdiv.style.top="20px";
document.body.appendChild(newdiv);
example: http://jsfiddle.net/niklasvh/gy9XJ/
This is mostly accurate, but you have a typo in height and you need to provide units for width, height and top. I'm assuming pixels, but the interpreter won't be so kind; 200 could be in ems, pixels, points, percents (200em, 200px, 200pt and 200%, respectively):
var newdiv = document.createElement('div');
newdiv.id="blabal";
newdiv.style.background = "#00C";
newdiv.style.border = "4px solid #000";
newdiv.style.width="300px";
newdiv.style.height="200px";
newdiv.style.position="fixed";
newdiv.style.top="20px";
document.body.appendChild(newdiv);