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.
Related
I have seen in a couple of cases of converting text into images but nobody mention that if a text is too long i-e more then 1000 words how can I display them in image with using a font size of 15px
my HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
<div id="the_text"></div>
<button id="show_img_btn">Convert to Image</button>
<div id="show_img_here"></div>
</body>
my Script code
window.onload=function(){
$("#show_img_btn").on("click", function () {
var canvas = document.createElement("canvas");
canvas.width = 620;
canvas.height = 80;
var ctx = canvas.getContext('2d');
ctx.font = "30px Arial";
var text = $("#the_text").text();
ctx.fillText(text,10,50);
var img = document.createElement("img");
img.src=canvas.toDataURL();
$("#show_img_here").append(img);
//$("body").append(canvas);
});
};
My question is if I convert this image it will converted into one line help me how can i convert the whole text into image and set the height and width.
Create a dummy element and apply same style props, append to dom and get the with of it. based on that you can split the text. Helpful snippet given below.
// JS:
function getDimen(text) {
var div = document.getElementById("dummy");
div.innerHTML = text
var h = (div.clientHeight + 1) + "px";
var w = (div.clientWidth + 1) + "px"
return({ h, w })
}
console.log(getDimen("some text hi a a s a a s as a s as a s as a s as a s"))
// HTML
<div id="dummy"></div>
// CSS:
#dummy {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
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 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);
}
Here I have a function that creates a div box, but I wish to move the styling to a external css file. When I do that, however, the boxes are no longer styled. How could I apply the css to the div boxes that are created dynamically? Is it even worth moving the styling to an external css file?
function createBox() {
var box = document.createElement("DIV");
box.setAttribute("id", "box");
document.body.appendChild(box);
boxStyle = box.style;
boxStyle.position = "absolute";
boxStyle.background = '#'+Math.floor(Math.random()*16777215).toString(16);
boxStyle.width = Math.floor(Math.random()*50) + '%';
boxStyle.height = Math.floor(Math.random()*50) + '%';
boxStyle.top = Math.floor(Math.random()*100) + '%';
boxStyle.left = Math.floor(Math.random()*100) + '%';
}
EDIT: I realized that what's been causing me grief in my CSS is that I was using Math.floor and Math.random() functions that don't work in CSS. Silly me!
As you are creating div with id #box, add the following css in the external css file and include it in the <head>
#box {
position: absolute;
background: red;
width: 90px;
height: 50px;
left: 100;
top: 100;
}
It looks like you will creating more boxes of with same id #box. I would recommend you to create based on classes. And use css to apply the styles based on the classname.
function createBox() {
var box = document.createElement("DIV");
box.setAttribute("class", "boxes");
document.body.appendChild(box);
}
css:
.boxes {
position: absolute;
background: red;
width: 90px;
height: 50px;
left: 100;
top: 100;
}
demo
You can apply CSS to dynamicly created items the same way for usual HTML. All you need is to target the correct selector.
http://codepen.io/anon/pen/mnIhj
You can gather the properties you wish to apply on the div box in a class in external style sheet, and use:
function createBox() {
var box = document.createElement("DIV");
box.setAttribute("id", "box");
box.className = "boxStyle";
document.body.appendChild(box);
}
Try this chnages in your script,
function createBox() {
var box = document.createElement("DIV");
box.setAttribute("id", "box");
document.body.appendChild(box);
var boxStyle = document.getElementById("box").style;
boxStyle.position = "absolute";
boxStyle.background = '#'+Math.floor(Math.random()*16777215).toString(16);
boxStyle.width = Math.floor(Math.random()*50) + '%';
boxStyle.height = Math.floor(Math.random()*50) + '%';
boxStyle.top = Math.floor(Math.random()*100) + '%';
boxStyle.left = Math.floor(Math.random()*100) + '%';
}
I've been using this code:
<div class="divClassName">
<button onClick="functionName1();");'>Enter Text Here</button>
<script>
function functionName1() {
var src = "name.jpg";
show_image("name.jpg", 200, 200, "absolute", 1, "<alt>");
}
function show_image(src, width, height, position, zIndex, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height
img.position = position;
img.style.zIndex = zIndex;
img.alt = alt;
document.body.appendChild(img);
}
</script>
</div>
<!-- Use actual names for divClassName, functionName1, and name.jpg if you want to. -->
This makes images appear upon button click, but it appears in the top left corner of the screen instead of where I want it to be. I've been trying
function show_image(src, width, height, position, left, top, zIndex, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height
img.position = position;
img.left = left;
img.top = top;
img.style.zIndex = zIndex;
img.alt = alt;
...But it doesn't work. Any fixes/answers?
EDIT: Question answered. Used:
img.style.position = position;
img.style.left = left;
img.style.top = top;
Updated :
If you assign position:absolute ,then you must have to give their left , top or bottom , right !
So :
you have to pass extra parameter to your function, where you want to show your img:
function show_image(src, width, height, position,left,top, zIndex, alt) { //left,top as example
var img = document.createElement("img");
img.src = src;
img.style.width = width;
img.style.height = height
img.style.position = position;
img.style.left = left+'px';
img.style.top = top+'px';
img.style.zIndex = zIndex;
img.alt = alt;
document.body.appendChild(img);
}
Or Another Short way to give Style to img is :
img.attributes = "style = left:"+left+"px;top:"+top+"px;...And So on..";
You are positioning the image absolute. So if top = 0 and left = 0 it will render in the top left of the screen.
If you want it to render in the top left of the div. You can still position your image absolute with top = 0 and left = 0.
But: you need to give the parent element a position relative.
so for example:
<body>
<div id="container">
// img src etc...
</div>
<body>
and the css should be
#container {
width: 960px;
height: 500px;
margin: 100px auto;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}