I added CSS to a checkbox and it works just fine.
I use a local file (named check.png) to use as the check background image and crop it inside the checkbox area.
Here are two checkboxes one checked and one unchecked
Now I'd like to know if it's possible, instead of manually setting 25px in the CSS file, to get the background image's real width and height and set the width to background.width and the height to background.height/2.
That would allow to have it automatically resize if I ever change check.png and still work properly
EDIT: I think I was misunderstood. I want the box to fit the background image, not the image to fit the box. I'll try the opposite anyway
EDIT2: Okay Nvm Apparently fitting the background in the box was a better idea than fitting the box in the image. Thanks :D
You don't have to write the exact width and height.
To scale the background image to fit inside its container, you can simply use:
background-size:contain;
set
background-size: 100% 100%;
background-repeat: no-repeat;
Use this javascript to get image width and height:
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'https://i.stack.imgur.com/4TObz.png';
#Durga's answer fits your need.
However, letting the resource file to decide your DOM component size seems not to be the best practice, doing the opposite way (use css to auto fit the image to your container, as #Koby suggested) is usually preferred.
Related
It's probably something silly, however, with the code I have right now, I can edit non spoilered pictures on the fly, so that their thumbnail is changed to the spoiler thumbnail.
$("[src='path/to/original/thumbnail.jpg']").attr('src', "/static/spoiler.png")
however, the new the thumbnail retains the size of the original thumbnail, and my spoiler image looks extremely strange unless it's at the correct size.
How do I set the thumbnails size, after being changed to the spoiler image?
Width needs to be 94px, and height needs to be 128px, for the record.
Depends on how the image originally got its height and width. If via css, then simply change the height and width using JQuery's ".css()" method:
$("[src='/static/spoiler.png']").css('width', '94px').css('height': '128px');
Or if height and width is set via an attribute:
$("[src='/static/spoiler.png']").attr('width', "94px").attr('height', "128px")
Don't set the src as an attribute, set the property directly:
$("[src='path/to/original/thumbnail.jpg']").each(function(){
this.src = "/static/spoiler.png";
});
I found this in a stackoverflow question on how to draw in canvas http://jsfiddle.net/ArtBIT/kneDX/ and now I want the canvas to cover my whole html page. For example:
<body>
<div id="2">
//code
</div>
<div id="2">
//code
</div>
</body>
So the canvas will be attached to the page and the user could draw over the content of the page. So is there any way to create the canvas inorder to take the 100% of the body be hidden apart from the drawing lines?
Edited:
How can I draw lines continuously without making circles in the above code? Also is there any way to draw something over the text without selecting it when you pass the mouse over it?
First, make the height and width properties of the canvas equal to the page height and page width. (Getting those values is quite difficult, so see the linked questions for the best way to do it -- or just use jQuery.)
Next, add some CSS to make the canvas sit in the absolute top-left corner of the page:
#canvas {
position: absolute;
top: 0;
left: 0;
}
Then, don't change the background color of the canvas as you currently do by calling ctx.clearTo. Canvases are transparent by default, so you'll be able to see the page underneath of it, as long as you don't change the background color.
Pass in the right width and height params instead of (200, 200)
Using window.screen.width and window.screen.height gives you this: http://jsfiddle.net/kneDX/878/
Update:
With this we will end up in canvas being as big as window and not the same size as client area. See apsillers's answer.
I'm using Blueprint CSS to create a 3 column layout:
LEFT COLUMN: span-6
CENTER COLUMN: span-12
RIGHT COLUMN: span-6
In the center column I want to place an SWF object which needs a fixed size upon initialization:
swfobject.embedSWF(url, "flashDiv", flashWidth, flashHeight, params);
I could calculate the initial size relative to the browser window:
var flashWidth = window.innerWidth*0.50;
var flashHeight = window.innerHeight*0.50;
And resize with jQuery:
$(window).height()
But if a Blueprint layout does change based on the browser, then this would seem unnecessary.
In that case, how would I calculate the initial width and height relative to the column-width of the center column in this layout (span-12)?
You'd make an HTML element that behaves in the way you want, then embed the Flash in the HTML element sized at 100% x 100%
Firstly I'd suggest thinking a little more about your flashHeight value as is it really likely to be 50% of the height of the page?
Secondly, resizing flash dynamically I don't believe is possible and I wouldn't think it's a good idea if you can. Keep your graphical elements a fixed size and allow the text and freeform elements to flow around them as the page size changes.
My blog posts live in a container that's 600px wide. When I have an image that's wider than 600px, I resize it via CSS (.post img {max-width: 600px})
I'd like users to be able to click on these resized images and see the full size version in a lightbox, but to do this I need to detect in Javascript which images have been thus resized (since I don't want to lightbox images that appear full size inline in the post)
You can check the image element's width property to get the rendered width of the image. If it's 600, the image is most likely to be shrinked. However, the image might originally as well be exactly 600 pixels wide.
If a browser supports the new HTML 5 naturalWidth property, you can get the original image width (in pixels) and compare that with the value of clientWidth.
I don't believe you can in the sense you are speaking as JS is going to read the image it is in the DOM. However what if you set the max-width in the JS:
Just Psuedocode
onload
{
if (img.width > 600px)
{
img.style = max-width: 600px;
img.lightbox();
}
}
Using Javascript to change an 's src... First time the width and height properties are being set correctly. The Second time they don't change. Why?
So I've got this blank image on my page... <img id="imgCropImage" />
So the idea is that every time a user uploads an image, the uploader's UploadComplete callback will set this image's src to the image that has just been uploaded so that it can be cropped. I then use this image's height and width properties in order to create a blown up crop preview.
It works great the first time. The browser or the DOM or something automagically set the img's height and width attributes which I access via the DOM after the image has loaded. It's beautiful.
If the user uploaded the wrong image, I want to allow them to upload a different one. This time however, the img's width and height attributes, accessed via javascript, remain the same as the prior image. The new image displays correctly in it's own width and height, it's just that the tag's properties do not change along with a new src.
Does anyone know why this happens? Or even better, how I could deterministically get the img's height and width upon loading a new src?
I <3 stackoverflow and I <3 you.
What about "removing" the height and width attributes.
$('#imgCropImage').removeAttr('height');
$('#imgCropImage').removeAttr('width');
That should "Reset" it. (If you're using JQuery that is).
Did you try to replace the previous image by a new one, with the new src?
var newImg = document.createElement('IMG');
newImg.src = newSrc;
oldImg.parentNode.replaceChild(newImg, oldImg);