Is it possible to resize the entire 'div' container using javascript ? Inside my div i have 2 images and placed one over another. 1st image has is 720x1280 and 2nd image has 40x40. Now, while resizing my div container both the images should get resized proposinally.
function addWidth() {
var elem = document.getElementById("Image1");
if (elem != null) {
var mydiv = elem.clientWidth;
document.getElementById("divImage").style.width = mydiv + "px";
}
}
function resizediv() {
var height = window.innerWidth;
if (document.body.clientHeight) {
height = document.body.clientHeight;
}
height = parseInt(height) - 10;
document.getElementById("Image1").style.height = parseInt(height - document.getElementById("divImage").offsetTop - 8) + "px";
}
window.onresize = resizediv;
I have tried for an single image and its works fine. But i want the same to happens for an div container.
Try this:
$(window).resize(function() {
addWidth();
resizediv();
});
Along with this, like #Alex said, you can also add width:100% for the images.
Related
I need to show an image in the largest size possible so I use javascript to create a square div with the maximum dimensions that fit the browser window.
I load the image and then I then change the width and height attributes to values that will make the image fit.
This works fine for 99% of images, but I have some that are shown in landscape format when they actually in portrait. I know they should be portrait because they are shown correctly in Windows explorer, Photoshop etc, and even when I right-click on the displayed image in a browser and select "show image in new window"
I have even rotated the image with PhotoShop and it is still shown landscape.
This makes me think that metadata is not being respected.
In ASPX Page_Load... imgImage.ImageUrl = "~/" & tPath
In HTML
function resizeImg() {
var windowWidth = window.innerWidth || document.documentElement.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var imgMax = windowHeight - 54;
var div = document.getElementById('divImage');
div.style.width = imgMax + 'px';
div.style.height = imgMax + 'px';
var divW = div.offsetWidth;
var divH = div.offsetHeight;
var winR = divW/divH
var newImgH = imgH;
var newImgW = imgW;
if(newImgW > divW) {
newImgW=divW
newImgH = Math.floor(Math.round(divW / imgR));
}
if(newImgH > divH) {
newImgH=divH
newImgW =Math.floor(Math.round(divH * imgR));
}
img.setAttribute('width',newImgW);
img.setAttribute('height',newImgH);
img.setAttribute('hspace',(divW - newImgW)/2);
img.setAttribute('vspace', (divH - newImgH) / 2);
}
function sizeChange() {
var container = document.getElementById('container');
var main = document.getElementById('main');
var content = document.getElementById('content');
var h = window.innerHeight;
container.style.height = h;
main.style.height = h*.9;
content.style.height = (h*.9)*.9;
}
document.addEventListener("resize", sizeChange);
I'm trying to manipulate the items in my html so the height of the container is constantly the height of the window and that when it's scaled, the height of the container scales. I have it set up so it gets the ID of each element it's going to manipulate and then adjusts by a % of what I want it to be. Does anyone have any feedback on why this is happening?
I would think most of what you are doing could be done with CSS. If you want to stick with JS, then you need to add units to your values. So change the code to something like
container.style.height = h+"px";
main.style.height = Math.floor(h*.9)+"px";
content.style.height = Math.floor((h*.9)*.9)+"px";
I'm using this plugin to create image zoom and gallery, yet I want to scale all images to fit with the container (using ratio algorithm).
Here is ratio function :
function scaleSize(maxW, maxH, currW, currH){
var ratio = currH / currW;
if(currW >= maxW && ratio <= 1){
currW = maxW;
currH = currW * ratio;
} else if(currH >= maxH){
currH = maxH;
currW = currH / ratio;
}
return [currW, currH];
}
And this is how the gallery load images :
var img = $('<img>').load(function(){
img.appendTo(a);
image_container.html(a);
}).attr('src', src).addClass(opts.big_image_class);
What I've tried :
var newSize = scaleSize(300, 320, $(".simpleLens-big-image").width(), $(".simpleLens-big-image").height());
var img = $('<img>').load(function(){
img.appendTo(a);
image_container.html(a);
}).attr('src', src).addClass(opts.big_image_class).width(newSize[0]).height(newSize[1]);
But scaleSize is not working properly since the current width and height is not yet defined (image not yet exist in dom).
Thanks for any pointers.
I took a look into plugin code and think you call your scaleSize() too early. An image with class simpleLens-big-image exists first after var img is set up and addClass() is done.
Try following:
var img = $('<img>').load(function(){
img.appendTo(a);
image_container.html(a);
}).attr('src', src).addClass(opts.big_image_class);
// at this point img should contain $(".simpleLens-big-image") so we can refer to img
var newSize = scaleSize(300, 320, img[0].naturalWidth, img[0].naturalHeight());
img.width(newSize[0]).height(newSize[1]);
Try something like this and call the onload method. This will make sure that the image is loaded to the DOM before you resize
var img = $('<img>');
img.src = src ;
img.onload = function() {
// Run onload code.
} ;
I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?
By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});
Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/
I have JS which resize the width and height of Image which is working fine if I used Alert before assigning the actual image src to the image object and if I omit the alertbox, it is not working. Please suggest me how to fix it.
`
<html>
<head>
<script type="text/javascript" language="javascript">
function resize_image_height_weight(id, hgt, wdth)
{
//alert(id);
Obj=document.getElementById(id);
myImage = new Image();
myImage.src = Obj.src;
var heights = myImage.height;
var widths = myImage.width;
// alert("Height=>" + heights + " Width=> " + widths);
if(heights > hgt || widths > wdth)
{
if(heights > widths)
{
var temp = heights/hgt;
var new_width = widths / temp;
new_width = parseInt(new_width);
heights = hgt;
widths = new_width;
}
else
{
var temp = widths/wdth;
var new_height = heights / temp;
new_height = parseInt(new_height);
heights = new_height;
widths = wdth;
}
}
Obj.height = heights;
Obj.width = widths;
}
</script>
</head>
<body>
<div>
<center>
<img src="http://www.google.co.in/intl/en_com/images/srpr/logo1w.png" id="i" alt="Google logo" height="150" width="150">
<script type="text/javascript">
document.images[document.images.length-1].onload = resize_image_height_weight("i",150,150);
</script>
</center>
</div>
</body>
</html>`
When you set the .src on an image, you have to wait until the image is successfully loaded until you can read it's height and width. There is an onload event handler that will tell you when the image is loaded.
Here's a place in your code where this issue could occur:
Obj=document.getElementById(id);
myImage = new Image();
myImage.src = Obj.src;
var heights = myImage.height;
var widths = myImage.width;
In this case, since the image was already elsewhere in the document, you should just read the height and width off the existing element rather than the new element.
Be very careful when testing because if the image is in your browser cache, it may load immediately, but when it's not in your cache, it takes some time to load and won't be available immediately.
Putting an alert at the right place in your script can allow the image to load before the script proceeds which could explain why it works with the alert.
As RobG mentions, your onload handler is also faulty (needs to be a function, not the returned result of a function).
Here's a simpler function to scale an image to fit the bounds. This uses a trick that you only need to set one size (height or width on the image) and the other will be scaled by the browser to preserve the aspect ratio.
function resizeImage(id, maxHeight, maxWidth) {
// assumes the image is already loaded
// assume no height and width is being forced on it yet
var img = document.getElementById(id);
var height = img.height || 0;
var width = img.width || 0;
if (height > maxHeight || width > maxWidth) {
var aspect = height / width;
var maxAspect = maxHeight / maxWidth;
if (aspect > maxAspect) {
img.style.height = maxHeight + "px";
} else {
img.style.width = maxWidth + "px";
}
}
}
You can see it in action here: http://jsfiddle.net/jfriend00/BeJg4/.
In the function assigned to onload:
> document.images[document.images.length-1].onload =
> resize_image_height_weight("i",150,150);
you are assigning the result of calling resize_image_height_weight which throws an error in IE. Set it to a function instead:
document.images[document.images.length-1].onload = function() {
resize_image_height_weight("i",150,150);
};