So I'm working on my website and I have made quite a progress with it. However as it is it's plain.
So I decided to make a few JavaScript animations that would bring my website to life.
However in JavaScript I only know to use specific resolutions given inside the canvas tag in html.
( Is it possible to do something like using percentages of the page
height and width like in css? )
So my JavaScript animation has a set resolution and I want to put it on my animation on a gradient rectangle on which I have some text.
So here is my problem. How can I put my animation on that rectangle without having to change the resolution on the canvas and without distorting the JS animation.
const cvs = document.getElementById("myCanvas");
const ctx = cvs.getContext("2d");
let position = {
x:0,
y:cvs.height/4
};
function resize() {
// Our canvas must cover full height of screen
// regardless of the resolution
var height = window.innerHeight;
// So we need to calculate the proper scaled width
// that should work well with every resolution
var ratio = cvs.width/cvs.height;
var width = height * ratio;
cvs.style.width = width+'px';
cvs.style.height = height+'px';
}
window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
ctx.fillStyle = "#66ccff";
ctx.fillRect(0,0,cvs.width,cvs.height);
function animation(){
ctx.fillStyle = "black";
ctx.fillRect(position.x,position.y,10,30);
position.x+=5;
if(position.x>cvs.width){
position.x = 0;
}
window.requestAnimationFrame(animation);
}
animation();
#group{
position:relative;
background-color:#5c85d6;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
width:100%;
height:30%;
margin-left: auto;
margin-right:auto;
}
.some_text{
position:absolute;
text-align:center;
top:1%;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
font-size:5vw;
font-family: 'Baloo Bhai', cursive;
}
#myCanvas{
position:absolute;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right:auto;
top:-30%;
}
.some_other_text{
position:absolute;
top:30%;
font-size:5vw;
font-family: 'Baloo Bhai', cursive;
text-align:center;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet">
</head>
<body>
<div id ="group">
<canvas id = "myCanvas" width = "1000" height ="1500"></canvas>
<h1 class = "some_text">Some text here</h1>
</div>
<h1 class = "some_other_text">Some more text that I want to see without the blue of my js animation</h1>
</body>
</html>
Yes I could add a background to my second text that would cover the JavaScript animation so I can see only what I need however that would still render that covered part, slowing down the web-page loading time (I think).
Related
I am expecting the images to shift to the right. Runner increments and prints 1px, 2px, 3px etc. to console, but new margin wont be set. What's the problem?
Together with the code below, what I have written above should be sufficient to understand my problem. But I am, at this point, simply writing to get rid of the prompt to write more text.
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal{
background-image: url('whiteboard.jpeg');
position:absolute;
z-index:-1;
}
.scaled{
transform:scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
}
.normal, .scaled{
width:100vw;
}
div img{
width:100%;
height:auto;
}
</style>
<script>
window.onload=function(){
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner =0;
setInterval(function(){
normal.style.marginRight="-"+runner+"px";
scaled.style.marginRight="-"+runner+"px";
runner++;
console.log("respons - "+runner+"px")
},50);
}
</script>
The marginRight style describes the distance of the div element to its parent's right side. A negative marginRight will not work here - instead try marginLeft. Depending your desired direction of the animation use a positive or negative value.
window.onload = function() {
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner = 0;
setInterval(function() {
normal.style.marginLeft = "-" +runner + "px";
scaled.style.marginLeft = "-" +runner + "px";
runner++;
console.log("respons - "+runner+"px")
}, 50);
}
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal {
background-image: url('whiteboard.jpeg');
position: absolute;
z-index: -1;
background-color: blue;
}
.scaled{
transform: scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
background-color: red;
}
.normal, .scaled{
width: 100vw;
}
div img {
width: 100%;
height: auto;
}
</style>
I'm trying to create an online image cropper where the user uploads a photo and it is displayed with a box (frame) that is changeable via buttons. Crops the photo and sends it back to the user.
I have a basic template of form uploader in php (working). It then displays the image in a div with another transparent div above it with a border marking the cropping area.
The initial values for the divs are set in the css section via php as the page is sent to the user. I'm trying to adjust the size of the frame div, as the width given is the image width +2 px for the frame (same for height) and it should just be the images width (-2 px).
This code should be working, but when the alerts pop up, they show that the frame width/height has not changed the original values, and it appears as though the frame does not change.
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
width: 500px;
height: 334px;
background-color: black;
}
.top {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 500px;
height: 334px;
position: absolute;
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: white;
z-index: 999;
}
.bottom {
top: 0px;
left: 0px;
position absolute;
width: 500px;
height: 334px;
background-color: green;
// background-image: url(uploads/1505002267.jpg);
z-index: 998;
}
</style>
<script type="text/javascript">
function myOnLoad() {
var w = 500;
var h = 334;
var frame = document.getElementsByClassName('top')[0];
w = w - 2;
h = h - 2;
//frame.setAttribute("style", "width: " + w + "px;");
//frame.setAttribute("style", "height: " + h + "px;");
frame.style.width = w + "px;";
frame.style.height = h + "px;";
alert(frame.offsetWidth);
alert(frame.offsetHeight);
}
</script>
<title>Test Website</title>
</head>
<body onload="myOnLoad()">
<div class="wrapper">
<div class="bottom" id="image">
<div class="top" id="frame">
</div>
</div>
</div>
</body>
</html>
I am aware that I can change the value php gives to the css section, but I'm going to need to change the crop ratio in the next step anyway, so I need this way to work. Please help, I've been looking at this code for way too long.
Remove the semicolon in the quotes.
frame.style.width = w + "px";
frame.style.height = h + "px";
Also, offsetHeight and offsetWidth takes border into consideration. Since your border width is 1px, it adds 2px to both height and width of the image canceling out the subtraction with 2.
Read more about offset width and height on MDN.
I'm writing some code for a simple slideshow that is intended to display a single, full image at a time and to advance to other images using arrow keys. I want every image to be displayed in full on the screen such that the user is not required to scroll in order to see the full image; the image is sized such that its maximum height is the browser height if the image is more high than wide and such that its maximum width is the browser width if the image is more wide than high.
How can this be done? Currently my code requires the user to scroll to see the bottom of images that are more high than wide. I have set the img CSS style to max-height: 100% and max-width: 100%.
<html>
<head>
<title>slideshow</title>
<style type="text/css">
html, body{
background: #333333;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial Black;
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
img{
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="container">
<div id="slideshow">
<img
alt="slideshow"
src="http://i.imgur.com/hPvyf52.png"
id="image_slide"
onclick="change_image()"
/>
</div>
</div>
<script>
var images = [
"1.png",
"2.png",
"3.png",
"4.png",
"5.png"
];
var index = 0;
var images_length = images.length-1;
function change_image(direction){
var img = document.getElementById("image_slide");
var img_preload_next_1 = new Image()
var img_preload_next_2 = new Image()
if(direction == "next"){
index++;
}else{
index--;
}
if(index > images_length){
index = 0;
}else if(index < 0){
index = images_length;
}
img.src = images[index];
img_preload_next_1.src = images[index + 1];
img_preload_next_2.src = images[index + 2];
}
document.onkeydown = function(event){
event = event || window.event;
if (event.keyCode == "37"){
change_image("previous");
}else if (event.keyCode == "39"){
change_image("next");
}
}
</script>
</body>
</html>
Instead of using an img tag, set the background of the div as follows.
background-size: contain;
background-image: url(http://i.imgur.com/hPvyf52.png);
height: 100%;
width: 100%
Then swap the background image.
I think you should set the width and height of the container. Styling img to 100% will get the exact size of the image.
They setting the container dimensions. You can also try overflow:hidden
I have a div that has a fixed size of 500x500. Inside this div I have an image tag which can be dynamic. Meaning that it can have a size of a square, a rectangle (width > height), or a vertical rectangle (height > width). The issue is that I don't want this image to be squished, I wanted to keep the aspect ratio of the image. So say the image size is 1000x250, then I want it to be resized as 500x125 and then centered on this 500x500 box. If the size is 500x1000 then we wanted it to be resized as 250x500 and then centered with white spacing on the left and right.
Is there an easy way to do this using purely css or do I need javascript in order to do this? and how?
Here's the structure of what I have now:
<div class="product-large" style="position: relative; overflow: hidden;"><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" alt=""><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" class="zoomImg" style="position: absolute; top: -236.43249427917618px; left: -188.05491990846681px; opacity: 0; width: 1024px; height: 714px; border: none; max-width: none;"></div>
Updated for vertical centering - jQuery required.
HTML
<div class="product-large">
<img src="image1.jpg">
</div>
<div class="product-large">
<img src="image2.jpg">
</div>
CSS
.product-large {
width:500px;
height:500px;
border:1px red solid;
position:relative;
}
.product-large img {
max-width:500px;
max-height:500px;
width:auto;
height:auto;
position:absolute;
top:50%;
left:50%;
}
Javascript (jQuery)
$(".product-large img").each(function () {
//get height and width (unitless) and divide by 2
var hWide = ($(this).width()) / 2; //half the image's width
var hTall = ($(this).height()) / 2; //half the image's height, etc.
// attach negative and pixel for CSS rule
hWide = '-' + hWide + 'px';
hTall = '-' + hTall + 'px';
$(this).addClass("js-fix").css({
"margin-left": hWide,
"margin-top": hTall
});
});
New Fiddle: http://jsfiddle.net/Asvdk/2/
I think you can do:
#conatiner {
line-height:500px;
height:500px;
width:500px;
}
#img {
max-width: 100%;
max-height:100%;
display: block;
margin: 0 auto;
vertical-align: middle;
}
minimal partial example here: http://jsfiddle.net/cahs4/
I didn't do the vertical alignment but you can see what I mean
If you're consider to use jQuery, then you can have a look at the ImgCenter jQuery plugin here.
So this is what I want to do :
I have a regular rectangle image, and I want to be displayed as a rounded image. How can I do this?
(Image credit)
I hope I got this right:
you have a rectangular non-square image, something like this
(width > height) or like this
(height > width)
and you want to display it in a circle without distorting it,
probably as much as you can display of it and the central part,
something like this:
Solutions:
When you know the size of the image it is really simple: you put it in a wrapper, give a wrapper a width and a height that are both equal to the minimum between the width and the height of the image itself. You then give the wrapper border-radius: 50%; and overflow: hidden;.
Next, you position the image such that the central part is visible.
if the width of the image is greater than its height (landscape
image), then you set its left margin to be (height-width)/2
otherwise, if the height of the image id greater than its width
(portrait image), then you set its top margin to be (width-height)/2
demo
Relevant HTML:
<a href='#' class='circle-wrap'>
<img src='image.jpg'>
</a>
Relevant CSS for landscape image (dimensions: 468px x 159px):
.circle-wrap {
overflow: hidden;
width: 159px; height: 159px; /* height of img */
border-radius: 50%;
}
.circle-wrap img {
margin: 0 0 0 -154px; /* (height-width)/2 */
}
Alternatively, you could use a JavaScript solution (I'm suggesting this because you list javascript among the tags) if you don't know anything about the orientation (portrait or landscape) of your image or about its dimensions.
demo
I've used a few images of different orientations sizes for testing. The HTML for one:
<a class='circle-wrap' href='#'>
<img src='image.jpg'>
</a>
Relevant CSS:
.circle-wrap {
overflow: hidden;
padding: 0;
border-radius: 50%;
}
.circle-wrap img { display: block; }
JavaScript:
var wrps = document.querySelectorAll('.circle-wrap'),
toCircle = function(a) {
var style, w, h, img;
for(var i = 0; i < a.length; i++) {
style = window.getComputedStyle(a[i]);
w = parseInt(style.width.split('px')[0],10);
h = parseInt(style.height.split('px')[0],10);
/* part that makes the wrapper circular */
a[i].style.width = a[i].style.height = Math.min(w,h)+'px';
/* part that takes care of centering imgs */
img = a[i].querySelector('img');
if(w > h)
img.style.marginLeft = ((h - w)/2) + 'px';
else if(w < h)
img.style.marginTop = ((w - h)/2) + 'px';
}
};
toCircle(wrps);
Try
img { border-radius:50%; }
Note that the image must have equal width and height for this to work. If the image doesn't, you can set the width and height with CSS as well.
img { border-radius:50%; width:200px; height:200px; }
Fiddle
All you need is CSS to do this:
<img class='circle' src='/my/img/path/img.jpg' />
<style type="text/css">
img.circle {
-ie-border-radius: 50%; /* IE */
-khtml-border-radius: 50%; /* KHTML */
-o-border-radius: 50%; /* Opera */
-moz-border-radius: 50%; /* Mozilla / FF */
-webkit-border-radius: 50%;/* Chrome / Safari */
border-radius: 50%; /* CSS Compliant */
}
</style>
Have a white square image with a transparent circle in the middle and overlay on the image.