image width and height different between desktop and iPad on webpage? - javascript

I wrote a simple javascript code to load an image and alert its width and height, but I found its width and height will different between desktop and iPad.
For example, I load an image that size is 8000*1845, browser shows image width is 8000 and height is 1845. Therefore, on iPad, browser show image width is 2000 and height is 462.
The other image is 2600 * 2400, browser shows image width is 2000 and height is 2400, but it shows image width is 1300 and height is 1200.
I don't know whether I misunderstanding something or not. Will iOS downsize the image?
Anybody knows? Please tell me what happen?
var img8000 = new Image();
img8000.src = '8000_1845.jpg';
img8000.onload = function () {
alert(img8000.width + ' ' + img8000.height);
}
var img2600 = new Image();
img2600.src = '2600_2400.jpg';
img2600.onload = function () {
alert(img2600.width + ' ' + img2600.height);
}

When you get the image's height or width using this.width or when using jQuery's $(this).width() you are actually getting its current dimensions. If the image is scaled up or down, then the values you get will not match the actual source image's dimensions.
I made an example you can play with. It is pre-written to use onclick, but if you remove those onclick attributes and uncomment the jQuery code, you'll find it alerts the same values.
You should attempt to avoid image scaling by placing the image somewhere on the page where the CSS does not affect its size (as a test, try making a blank page containing just the image), and remove any custom height/width attributes if they exist.
Otherwise, if the scaling is done natively by the iPad Safari browser, there is little you can do.

Related

Jquery .load() callback function timing.

I am trying to load an image using .load() then based on the size of that image manipulate it to fit into a certain area. The issue I'm having is that when my callback function runs the image is not actually loaded and I cannot get the height and width. This is how my code looks.
foo.load("/loadimage/"+id, function(){editImage(foo)});
function editImage(foo){
var $fooImg = foo.find(img);
var imgHeight = $fooImg.height();
var imgWidth = $fooImg.width();
}
$fooImg height and width both return 0 when this runs though. I checked the network status of the request in chrome and it says that it is "pending".
I want to run this right after the image is loaded then if the image it taller then wide I want to set CSS height to 100% and vise versa for width.

jQuery resize with animate

I have an image, the full image size is 1920x1080. When displayed on screen in one place it's 128x128, and you can move it to another part of the screen and it resizes to 50% using jQuery's .animate() function, then calls $(el).resizable(), but the resizable region is 1920x1080 so you have to scroll down, way past the image to get to the resize handles.
I created a custom function to animate the upscaling of the image and 'destroy' the resize, then after upscaling the image it recalls resize and still the handles are 1920x1080 regardless of how big the image is on the screen. I have even tried, after calling resizable on the image, to directly manipulate the CSS of the ui-wrapper to match the size of the image, but it always resets to 1920x1080. Below is a snippet of code that I'm using trying to directly manipulate the wrapper... unsuccessfully.
Anyone has any ideas how I can get resizable() to put the handles at the edge of the image regardless how big or small the image is, instead of placing them at the edges of the full sized image. Thank you!
el.resizable('destroy');
var myHeight = el.height(),
myWidth = el.width();
el.resizable({
aspectRatio: that.calculateAR(el)
})
el.parent('.ui-wrapper').css({
width: myWidth + "px",
height: myHeight + "px"
})

How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?

I'm working on a mobile web app, and in my page I have a div element with its width set to 100%.
I need to set the height of this div so that the height is correct for a set aspect ratio. So for example, if the screen was sized to 300 pixels wide and the ratio was 3:2, my script should grab the width of the div (which at this point should be 300px) and set the height to 200px.
On first load, this works perfectly. However, if I rotate the screen of my phone to landscape, the width of the div obviously changes, so I need to reset its height in order to keep the correct ratio.
My problem is that I can't find an event which fires after the elements are resized. There is an orientationchange event built into jQuery Mobile, which helpfully fires when the screen is rotated from portrait to landscape and vice-versa:
$(window).bind('orientationchange', function (e) {
// Correctly alerts 'landscape' or 'portrait' when orientation is changed
alert(e.orientation);
// Set height of div
var div = $('#div');
var width = div.width();
// Shows the *old* width, i.e the div's width before the rotation
alert(width);
// Set the height of the div (wrongly, because width is incorrect at this stage)
div.css({ height: Math.ceil(width / ratio) });
});
But this event seems to fire before any of the elements in the page have resized to fit the new layout, which means (as mentioned in the comments) I can only get the pre-rotation width of the div, which is not what I need.
Does anyone know how I can get the div's new width, after things have resized themselves?
A few methods for you to try:
(1) Set a timeout inside your orientationchange event handler so the DOM can update itself and the browser can draw all the changes before you poll for the new dimension:
$(window).bind('orientationchange', function (e) {
setTimeout(function () {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
}, 500);
});
It won't make too big of a difference but note that Math.ceil takes a lot longer to complete (relatively) than Math.floor since the latter only has to drop everything after the decimal point. I generally just pass the browser the un-touched float number and let it round where it wants to.
(2) Use the window.resize event instead to see if that updated fast enough for you:
$(window).bind('resize', function (e) {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
});
On a mobile device this will fire when the orientation changes since the size of the browser view-port will also change.
(3) If you are updating the size of this <div> element because it holds an image, just apply some CSS to the image to make it always be full-width and the correct aspect ratio:
.my-image-class {
width : 100%;
height : auto;
}

javascript jquery cycle rescale images to browser window BUT keeping aspect ratio

i have a php based site that needs to display images on the homepage that have arbitrary proportions. the requirement is to make them fill the browser window but to retain their aspect ratio.
for some reason i am having some trouble getting this to work using the jquery cycle plugin.
essentially the server-side code just pulls them from the db and pushes img elements into a div. i read the image sizes using php and write that to the alt element
then in my javascript code i have this:
$(document).ready(function() {
var window_h = $(window).height();
var window_w = $(window).width();
// sets the div that contains the jquery cycle images
$('#homepage-background-images').width(window_w);
$('#homepage-background-images').height(window_h);
$(window).resize(function() {
window_h = $(window).height();
window_w = $(window).width();
$('#homepage-background-images').width(window_w);
$('#homepage-background-images').height(window_h);
});
// homepage cycle
$('#homepage-background-images').cycle({
fx: 'fade',
speed: 5500,
fit: 1,
width: window_w,
height: window_h,
});
// ...
Obviously this isn't going to work since each image has a different aspect ratio, but I was wondering how one might pass serial aspect ratios into jquery cycle? These will always need to take the browser window size into consideration...
I have tried using the 'before' option on jquery, but it seems that you can't really affect the image properties there. I tried to use that to change the window_h variable based on a quick aspect ratio calculation but even updating that in my onBefore function seems to yield no result on the cycling images...
Any ideas? Is this tricky or am I just missing something obvious?
Thanks!
- J
If you use CSS max-width and max-height instance of HTML width and height it don't lose aspect ratio. Try adding style attribute to your image

Background position image overlay (Works in IE, not in Mozilla/Chrome/Safari)

I am having an issue positioning a background image using the following jquery background position command in Firefox, Google Chrome, and Safari. The code works correctly in IE 8.
$('#element').css({ backgroundPosition: 'xpx ypx' });
The desired effect is a continuous stream of fluid from the right side of the screen to the left, blurred out while behind the main page content. This is achieved using 2 fluid images, one completely sharp and one completely blurred. As the user resizes the window, a jquery function calculates the appropriate positioning of the blurred image (set as a background image) and edits the backgroundposition css attribute.
The x position of the image is calculated dynamically based on window size and the y position is static. The css appears to be modified correctly (note the backgroundposition display in the right most text box). However, the background image I am attempting to overlay is absent in mozilla/chrome/safari. See jscript code below:
$(window).resize(function () {
// image positioning variables
var windowwidth = $(window).width();
var imgwidth = $('#imgFluid').width();
var offset = $('#divFluidBlur').offset();
// calculate and implement position
blurPositionLeft = (windowwidth - imgwidth) - offset.left;
$('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' });
// debug: display actual css Background Position of element to text box
$("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition); }
Thanks in advance for your help,
Andrew
What you are doing should work. Anyway, you may want to try a little cleaner version: $('#divFluidBlur').css('background-position', blurPositionLeft + 'px' + ' 30px'); And you may want to use Firebug to temporary disable or change values of other styles that could be iterfering.
Could you privide an online example of the problem?

Categories