I have a div and I would like to center the image inside the div both horizontally and vertically. I do not want to use CSS page. I want to learn how to do this using only html with CSS inline.
<div id="circle1" style="position:absolute;">
<img id="circle1img" style="position:absolute; left:50%; top:50%"/>
</div>
I set the position of the div and the size of the image at run time in the following way:
var divW = randomInt(200,300);
var imgW = randomInt(20,120);
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img).width = imgW;
document.getElementById("circle1img").height = imgW;
This does not currently work.
Here is a stand alone to test it out. Note that all the javascript customizations of the css are necessary and CANNOT be put inside the inline text. So please do not do this as a solution. Thanks!! You can see from this example that the border is around the image and not the circle1 div.
<html>
<head>
</head>
<body>
<div id="circles" style="display:none">
<div id="circle1" style="position:absolute; text-align:center;">
<img id="circle1img"/>
</div>
</div>
<script type="text/Javascript">
document.getElementById("circle1img").src = "37.png";
document.getElementById("circle1").style.left = "200px";
document.getElementById("circle1").style.top = "200px";
document.getElementById("circle1").style.border = "2px solid blue";
var divW = 200;
var imgW = 100;
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img").width = imgW;
document.getElementById("circle1img").height = imgW;
document.getElementById("circles").style.display = "block";
</script>
</body>
</html>
From HTML perspective, it will be:
<div id="circle1" style="position:absolute; text-align:center;">
<img id="circle1img" src="your_image_src_goeshere..." />
</div>
Let me know if it resolves the issue or not.
EDIT:
<html>
<head>
</head>
<body>
<div id="circles" style="display:none">
<div id="circle1" style="position:absolute; text-align:center;">
<img id="circle1img"/>
</div>
</div>
<script type="text/Javascript">
document.getElementById("circle1img").src = "37.png";
document.getElementById("circle1").style.left = "200px";
document.getElementById("circle1").style.top = "200px";
document.getElementById("circle1").style.border = "2px solid blue";
var divW = 200;
var imgW = 100;
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img").width = imgW;
document.getElementById("circle1img").height = imgW;
document.getElementById("circle1img").style.padding = 5;
document.getElementById("circles").style.display = "block";
</script>
</body>
</html>
Related
I want two divs on my page to be aligned, I have set the {display:inline-block;} in the css of both elements but it still didn't work, I looked up in chrome and I found out that the size of the element is enormous (900x330), and it's probably what's stopping the elements from getting aligned
HTML:
<div id="shopmain" align="center" style="margin-bottom:30px;margin-top:10px;align-items: center;">
<div id="shop1" width="25%">
<img id="1" src="images/shop/1/1-1.jpg" style="width:20%">
<p style="color:#974A2B;margin-bottom:1px;">TRIANGLE I</p>
<p style="color:#974A2B;margin-top:1px;">88,99€</p>
<button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-1" onclick="document.getElementById('1').src='images/shop/1/1-1.jpg'">1-1</button>
<script type="text/javascript">
var buttons = document.getElementById("button1-1");
buttons.innerHTML = '<img src="images/shop/1/1-1c.jpg" />';
</script>
<button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-2" onclick="document.getElementById('1').src='images/shop/1/1-2.jpg'">1-2</button>
<script type="text/javascript">
var buttons = document.getElementById("button1-2");
buttons.innerHTML = '<img src="images/shop/1/1-2c.jpg" />';
</script>
<button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-3" onclick="document.getElementById('1').src='images/shop/1/1-3.jpg'">1-3</button>
<script type="text/javascript">
var buttons = document.getElementById("button1-3");
buttons.innerHTML = '<img src="images/shop/1/1-3c.jpg" />';
</script>
<button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-4" onclick="document.getElementById('1').src='images/shop/1/1-4.jpg'">1-4</button>
<script type="text/javascript">
var buttons = document.getElementById("button1-4");
buttons.innerHTML = '<img src="images/shop/1/1-4c.jpg" />';
</script>
</div>
<div id="shop2" width="25%">
<img id="2" src="images/shop/2/2-1.jpg" style="width:20%">
<p style="color:#974A2B;margin-bottom:1px;">TRIANGLE II</p>
<p style="color:#974A2B;margin-top:1px;">88,99€</p>
<button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-1" onclick="document.getElementById('2').src='images/shop/2/2-1.jpg'">2-1</button>
<script type="text/javascript">
var buttons = document.getElementById("button2-1");
buttons.innerHTML = '<img src="images/shop/2/2-1c.jpg" />';
</script>
<button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-2" onclick="document.getElementById('2').src='images/shop/2/2-2.jpg'">2-2</button>
<script type="text/javascript">
var buttons = document.getElementById("button2-2");
buttons.innerHTML = '<img src="images/shop/2/2-2c.jpg" />';
</script>
<button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-3" onclick="document.getElementById('2').src='images/shop/2/2-3.jpg'">2-3</button>
<script type="text/javascript">
var buttons = document.getElementById("button2-3");
buttons.innerHTML = '<img src="images/shop/2/2-3c.jpg" />';
</script>
</div>
</div><br/>
CSS:
#button1-1 {display:inline-block;}
#button1-2 {display:inline-block;}
#button1-3 {display:inline-block;}
#button1-4 {display:inline-block;}
#button2-1 {display:inline-block;}
#button2-2 {display:inline-block;}
#button2-3 {display:inline-block;}
#shopmain {display:inline-block;}
#shop1 {display:inline-block;margin-right:10px;margin-left:10px;}
#shop2 {display:inline-block;margin-right:10px;margin-left:10px;}
If it can help, the default sizes of all the images is 900x1350 but the image is displayed as 180x270 on the screen.
Thanks for your help.
It would help if you could post a pen so we could see the problem. However, my suggestion is to use max-width instead of width.
I have 2 divs and I am trying to swap them around automatically every Sunday at 11:59. My divs:
Could anyone help please?
<html>
<head>
<title>HTML Title</title>
<script>
function changeDiv(){
var d = new Date();
if (d.getDay == 0 && d.getHours == 11 && d.getMinutes == 59) {
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
}
</script>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
This brother will be the right answer. The first code I have given you will only change the name of the div container but do not swap two divs to which one will display.
Give it a try by running this snippet (in this example it changes the div to display and indicate which div is displayed.
function changeDiv(){
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
<html>
<head>
<title>HTML Title</title>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
Im trying to convert my div to PDF.
this is my HTML code:
I can download it just fine but I want to show in the PDF file the Div float:left is aligned with Div Float:right.
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>
Right now it show the Div left in the first row, and the Div right in the next row. Help Please.
as I stated in the comments jspdf does not support css as is.
But I found this post which has a reference for HtmlToCnavas plugin which could help.
As i know javascript can not generate full page html with css to PDF.
If your project written by PHP in back-end, dompdf will help you.
Notice: CSS float is not supported (but is in the works).
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!
I wanted to know if it is possible to create an image using html5.
Currently i am creating a text using canvas, now i want to convert that text into an image.
In order to save the canvas to an image file, you can use Nihilogic's code.
Use the canvas text functions.
For example:
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillText("Sample String", 10, 50);
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Create an image DOM element, and set the src to the canvas.toDataURL method.
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
var image = document.getElementById("Img");
image.src = c.toDataURL("image/png");
}
<canvas id="c" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<img id="Img" width="300" height="150" style="border:1px solid #d3d3d3;"/>
<button onclick="copy()">Copy</button>