We have this picture
What I want to try to do is on refresh or on load, the picture highlights a 200x200 square, and removes the rest of the picture like this:
What is the simplest way to do this without javascript if possible?
Here is an example of how you can do this using CSS and javascript. This will work for any height or width window as it gathers the values from the element.
I've commented the javascript but let me know if you wanted something else.
Demo
// Load image element
image = document.getElementById("random-window-image");
// Get the height and width of the window
window_width = document.getElementById("random-window-wrapper").offsetWidth;
window_height = document.getElementById("random-window-wrapper").offsetHeight;
// Calculate a random left value
temp_left = (image.width - window_width) * Math.random();
// Calculate a random top value
temp_top = (image.height - window_height) * Math.random();
// Apply values to the img
image.style.left = "-" + temp_left + "px";
image.style.top = "-" + temp_top + "px";
#random-window-wrapper {
width: 200px;
height: 200px;
overflow: hidden;
position: absolute;
}
#random-window-image {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="random-window-wrapper">
<img id="random-window-image" src="https://placeimg.com/640/480/any">
</div>
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(10px,90px,100px,0px);
}
</style>
</head>
<body>
<img src="https://i.stack.imgur.com/kt5HP.jpg" width="200" height="200">
</body>
</html>
Related
I'm building a website that uses images which must all be scaled down by a consistent factor (0.25). Like others have pointed out here and here, scaling is an operation that is done after the page elements are rendered, resulting in whitespace surrounding the scaled image. I need to get rid of that extra space.
I've read every solution and still can't figure this out. I'm totally fine with a javascript solution—which I still can't figure out—but I can't help but feel there is an alternative to using the scaling element and bypassing javascript altogether.
I could scale all of the original images down using imagemagick, but that's a last resort for a number of reasons.
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
background: #555;
}
img {
display: block;
transform: scale(0.25);
}
</style>
</head>
<body>
<p>Here's my first paragraph.</p>
<div class="image-container">
<img src="https://live.staticflickr.com/65535/51806458206_1e7ba12389_o.png"><img>
<img src="https://live.staticflickr.com/65535/51805498867_57abd12b23_o.png"><img>
</div>
<p>Here my second paragraph</p>
</body>
</html>
Here's a fiddle: https://jsfiddle.net/drfk7xz9/31/. Thank you in advance 🙏
Figured it out (with javascript)
window.onload = function () {
resizeImages();
};
function resizeImages() {
var images = document.querySelectorAll("figure > img");
var originalWidth = 0;
for (var i = 0; i < images.length; i++) {
originalWidth = images[i].naturalWidth;
images[i].style.width = (originalWidth * 0.25) + "px";
}
}
I am displaying one local video and one remote video on the page. I am using this html page on the mobile. It is working fine. Now I have to draw on the local video using mouse (and using canvas). But we didn't specify the exact location of video elements. So unable to think how to render the canvas exactly over local video. Below are the files.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<div id="videos">
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
</div>
</body>
</html>
CSS:
body {
font-family: sans-serif;
}
video {
max-width: 100%;
width: 320px;
}
Can any one please let me know how to overlay canvas exactly over localVideo. Canvas should be at the same position of localVideo and should be same size of localVideo.
You can use the getBoundingClientRect() method to get the information about the position of the current element, and then use this information in order to position the canvas element.
Check the following example:
document.addEventListener("DOMContentLoaded", function(){
const canvas = document.getElementById("canvasEl")
const vid = document.getElementById("localVideo");
const vidStyleData = vid.getBoundingClientRect();
canvas.style.width = vidStyleData.width + "px";
canvas.style.height = vidStyleData.height + "px";
canvas.style.left = vidStyleData.left + "px";
canvas.style.top = vidStyleData.top + "px";
});
body {
font-family: sans-serif;
}
video {
max-width: 100%;
width: 320px;
}
canvas {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<div id="videos">
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
</div>
<canvas id="canvasEl"></canvas>
</body>
</html>
Note that I set the position of the canvas to absolute using the css. If you want you can do this with javascript as well.
You can calculate the X and Y position of the <video> element by using the getBoundingClientRect() method, also you can use both of the offsetWidth and offsetHeight properties to get its width and height.
Then you should add position: absolute; to the <canvas> element so you can set the values of the top and left properties.
Here is your code (inspect the code snippet it to see the difference!):
let xPos = window.scrollX + document.querySelector('#localVideo').getBoundingClientRect().left;
let yPos = window.scrollY + document.querySelector('#localVideo').getBoundingClientRect().top;
document.getElementById('_canvas').style.left = xPos + "px";
document.getElementById('_canvas').style.top = yPos + "px";
document.getElementById('_canvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
document.getElementById('_canvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";
body {
font-family: sans-serif;
}
video {
max-width: 100%;
width: 320px;
}
canvas {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<div id="videos">
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
</div>
<canvas id="_canvas"></canvas>
</body>
</html>
Longshot... I don't think this is possible but I've been shocked before!
I anchor tags, all of which have background images, all 300px wide but their heights all vary. Is there anyway to set these without actually having to type out the height? Sort of setting it to the bg url's dimensions?
Thanks!
I don't think people understand - My fault for rushing the question.
Here's code as an example:
#ex-1 {width: 300px; height: 410px; background: url('/image-1.jpg');}
#ex-2 {width: 300px; height: 420px; background: url('/image-2.jpg');}
#ex-3 {width: 300px; height: 430px; background: url('/image-3.jpg');}
#ex-4 {width: 300px; height: 440px; background: url('/image-3.jpg');}
I'd like to NOT set the height, and it set automatically using CSS only. I don't want to use image tags.
I wasn't sure if this was possible, I assume not.
Thanks
A simple way of doing this is to add an image like this and then make it hidden i used visibility:hidden http://jsfiddle.net/gztpsfkw/1/
i just saw that you don't want to use <img> tags but as for here the image is being hidden and it takes up the space.
<img src="http://placekitten.com/300/301" />aa
And apply the css
a{
display:block;
background-image:url('http://placekitten.com/300/301');
width:100px;
height:auto;
}
img{
visibility:hidden;
}
We can use a visibility: hidden way:
<img src="http://lorempixel.com/100/200/" />
CSS
a {background: url("http://lorempixel.com/100/200/") center center no-repeat; width: 100px;}
a img {visibility: hidden;}
Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/
JavaScript Solution
Procedure
To set the height, dynamically, you need to use JavaScript. So, you can get the computed value by adding a <img /> tag and computing the value by setting the src. The pseudo code would have been like this:
Get the computed value of background-image.
Attach it to a new <img /> element in the DOM.
Get the height of the new <img /> element.
Set the height of the fake background <div>.
JavaScript
$(document).ready(function () {
bg = $(".bg").css("background-image");
$("body").append('<img id="faux" src="' + bg.substring(4, bg.length-1) + '" />');
height = $("#faux").outerHeight();
$("#faux").remove();
$(".bg").height(height);
});
Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/
If you don't want to use inline CSS, you can use this:
$("style").append('.bg {height: ' + height + 'px}');
If you're looking for a way to make the background images fill all the space available then use background-size: cover
I think you're looking for something like this:
function setBackgroundImage(element, src) {
var img = new Image();
img.onload = function() {
element.style.height = img.height+'px';
element.style.backgroundImage = 'url('+img.src+')';
}
img.src = src;
}
Or, if you need to scale the images for the width:
function setImage(element, src) {
var img = new Image();
img.onload = function() {
var sizeRatio = element.offsetWidth / img.width;
element.style.height = (sizeRatio * img.height)+'px';
element.style.backgroundImage = 'url('+img.src+')';
element.style.backgroundSize = 'cover';
}
img.src = src;
}
Side Note: The <a> tag is not a block level element. In order for the <a> to have a height and a width you need to make it a block level element to show the background image.
You would use: display: block
Now for your question... In order to get the background image, with out having to manual type it in you can use a little jQUery to make your life a lot easier. I have modified your CSS and HTML a little bit to accomodate the jQuery.
CodePen Example
#links { overflow: hidden; }
#links a { display: block; float: left; width: 300px; height: 200px;
/* generic height set in case there is no background image */ }
#ex-1 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-2 { background: url('http://www.bing.com/s/a/hpc12.png');}
#ex-3 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-4 { background: url('http://www.bing.com/s/a/hpc12.png');}
<div id="links">
</div>
Here is the jquery. It will loop through all your images and set the height according to your background image
$(document).ready(function(){
$('#links a').each(function(){
var temp = $(this).css('background-image');
temp = temp.replace('url("', '').replace('")', '');
var newImg = new Image();
newImg.src = temp;
imageHeight = newImg.height;
imageWidth = newImg.width;
$(this).css('height', imageHeight);
});
});
Needing a solution to autoresize text in a fixed sized container. A single word should appear really large filling the container. The longer the string the smaller the font becomes as it resizes to fit on one line.
The code I've found (see below) is almost there but for some reason wraps the text onto a second line. Any suggestions on how I could fix it so no matter how long the string of text it will resize and always be just a single line of text?
Thanks
<html>
<head>
<style type="text/css">
#dynamicDiv
{
background: #CCCCCC;
width: 240px;
height: 64px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textSpan = document.getElementById("dynamicSpan");
var textDiv = document.getElementById("dynamicDiv");
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
</script>
</head>
<body onload="shrink()">
<div align='center' id="dynamicDiv"><span id="dynamicSpan">Here is a string of text I want on just one line</span></div>
</body>
</html>
This code works, but I am using a little jQuery, I hope this helps in some way...
<style type="text/css">
#container {
height:100px;
background-color:#eeeeee;
text-align:center;
font-family:Myriad Pro;
}
<style>
<div id="container">01234567890123456789</div>
<script type="text/javascript">
$(document).ready(function()
{
var w = parseInt($("#container").width());
var l = parseInt($("#container").html().length);
var fontSize = ( (w / l) * 2 ) - 2;
fontSize = fontSize+'px';
$("#container").css('font-size', fontSize);
});
</script>
Is there any way to set a fixed/custom height for ligtbox2?
#lightbox img{ width: auto; height: 600px;}
This only resizes the img and not the outer container.
With that declaration you are styling the img within #lightbox
Try removing the img so that you are only styling #lightbox
does this work?
#lightbox { width: auto; height: 600px;}
If you go through the HTML it creates you can see that it's wrapped in a div with id="lightbox" and within that a div with id="outerImageContainer". The latter has a style attribute with the height of the image. Try targeting that. Either overwriting it in your CSS or changing the height after it's loaded.
<html>
<head>
<style type="text/css">
#lightbox { border : solid 2px #000000; position:absolute; }
#lightbox img { width:auto; height: 600px;}
</style>
</head>
<body>
<div id="lightbox">
<img src="Desert.jpg" alt="desert" />
</div>
</body>
</html>
None of these solutions worked, but thanks for your help guys. I had to get my hands dirty in the js... here's my hacked code:
lightbox.js
...
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
var scale = 600 / imgPreloader.height; //modified
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer((imgPreloader.width * scale), //modified imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {
// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();
// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (600 + LightboxOptions.borderSize * 2); //modified
...