I've read similar issues on this but no one seems to have an answer. I have an iframe where I am loading an image. When I zoom the iframe becomes bigger or smaller. Is there a way to prevent the iframe from zoooming or a way to keep the ratio when zooming?
I got it working for an image but can seem to get it to work for when I use an iframe
JS
var iframeDimensions = document.getElementById('mobile-iframe');
var iwidth = iframeDimensions.clientWidth;
var iheight = iframeDimensions.clientHeight;
$(window).resize(function(){
var device = detectZoom.device();
newWidth = iwidth / device;
newHeight = iheight / device;
$(iframeDimensions).attr('width', newWidth);
$(iframeDimensions).attr('height', newHeight);
var winW = document.body.offsetWidth;
console.log('zoom level: '+device);
console.log('new width: '+newWidth+'px');
console.log('new height: '+newHeight+'px');
console.log('offsetWidth '+winW);
console.log('scale '+ winW / newWidth);
//$('iframe').css('-webkit-transform', 'scale(' + (device + ", " + device) + ')')
$('iframe').width();
//$('iframe').css('-webkit-transform', 'scale(1)');
});
HTML
<iframe id="mobile-iframe" src="https://www.google.com/logos/doodles/2013/maria-callas-90th-birthday-6111044824989696-hp.jpg" width="534" height="210" frameborder="0"></iframe>
Solution with JS:
take a look at this How to detect page zoom level in all modern browsers? for example to detect the browser zoom level and then multiply the width and height of your iframe with the inverse value so in the end they visually stay the same.
Example: zoom level is 1 (Standard): width: 100px; height: 50px;
zoom level is 2: width: 50px; height: 25px; -> Browser shows it double the size so it stays the same
just added: I still wouldn't recommend doing it due to usability ;)
Related
Imagine I have the below element appended to the document :
<html>
<head>
<style>
#resizable {
position: absolute;
top: 30px;
left: 30px;
background: url(http://www.some243x350image.jpg) no-repeat;
height: 243px;
width: 350px;
background-size: contain;
}
</style>
</head>
<body>
<div id="resizable"></div>
</body>
</html>
I'd like to be able to resize the above div proportionally, without any max/min height/width limits.
Below is the code I've written (Working Example : http://jsfiddle.net/7wYAh/) but it has two main bugs :
1. The div's height and width do not change proportionally all the time (even though the image obviously does, given that I'm using background-size: contain;.
2. There are sudden increases/decreases in the height/width of the element the moment the element is "grabbed".
I'm not using an aspect ratio variable. What I'm doing is that I choose randomly whether to resize based on height or width every time. So if the height changes then I'll resize the width based on the height increase. And vice versa. Isn't that proportional as well? Meaning that if the height increases by 2px, I'll increase the width by 2px as well and vice versa.
Looking for an answer to my problem I found this post but I don't want to use width/height limits and I don't understand the use of the ratio.
So can you spot anything wrong with this code (assume that the elementCanBeResized is set to true whenever the mouse grabs the bottom right corner of the div) :
Working Example : http://jsfiddle.net/7wYAh/
var $element = $('#resizable');
var previousResizeX, previousResizeY, resizeDistanceX, resizeDistanceY;
$(window).mousemove(function (mouseCoordinates)
{
if (!elementCanBeResized)
{
return;
}
if (typeof previousResizeX === 'undefined')
{
previousResizeX = mouseCoordinates.pageX;
previousResizeX = mouseCoordinates.pageY;
}
else
{
var newResizeX = mouseCoordinates.pageX;
var newResizeY = mouseCoordinates.pageY;
// resizing proportionally based on width change
if (newResizeX !== previousResizeX)
{
resizeDistanceX = newResizeX - previousResizeX;
previousResizeX = newResizeX;
previousResizeY += resizeDistanceX;
newWidth = $element.width() + resizeDistanceX;
newHeight = $element.height() + resizeDistanceX;
}
// resizing proportionally based on height change
else if (newResizeY !== previousResizeY)
{
resizeDistanceY = newResizeY - previousResizeY;
previousResizeY = newResizeY;
previousResizeX += resizeDistanceY;
newHeight = $element.height() + resizeDistanceY;
newWidth = $element.width() + resizeDistanceY;
}
$element.css({
height: newHeight,
width: newWidth
});
}
});
I assume that you want to resize by clicking at some point and then 'dragging' de mouse. Okay.
To question 2: You are storing the point where you click in previousResizeX. But I don't see you cleaning its value after the release of the button. If you don't set previousResizeX to 'undefined' again, next time you click there will be a 'sudden change' of width/height because newResizeX will be the distance between the place where you pressed the mouse the first time and its current position.
To question 1: You are increasing the width/height the same number of pixels every time, that's why your div doesn't resize proportionally. I explain: if you start with a div that's 200 x 100, its width is the double of the height. When you duplicate its width, to be proportional you have to duplicate the height. But if you drag your mouse 100px, you'll end with a (200+100) x (100 + 100) div, which is 300 x 200. The image's width is no longer the double of its height. You need to calculate the ratio between width and height at the beginning:
var ratio = $element.height() / $element.width();
...
resizeDistanceX = newResizeX - previousResizeX;
resizeDistanceY = resizeDistanceX * ratio;
previousResizeX = newResizeX;
previousResizeY += resizeDistanceY;
newWidth = $element.width() + resizeDistanceX;
newHeight = $element.height() + resizeDistanceY;
...
//For Y
resizeDistanceY = newResizeY - previousResizeY;
resizeDistanceX = resizeDistanceY / ratio;
previousResizeY = newResizeY;
previousResizeX += resizeDistanceX;
newHeight = $element.height() + resizeDistanceY;
newWidth = $element.width() + resizeDistanceX;
And remember to set resizeDistanceX and resizeDistanceY once the mouse is released.
Hope this helps you.
I have a problem with a JavaScript I'm developing for my website. I have images which opens on hovering over them.
First my script calculates if the image should be displayed on the right or on the left of my window:
$("html,body").live("mousemove", function (e) {
//console.log("mousemove: "+e.pageX)
var width_window = $(window).width();
var center = width_window / 2;
if (e.pageX < center) {
side = 'left';
} else {
side = 'right';
}
});
Then, once we know on which side of the window the image will be displayed, I have another script to resize the image, depending of the height & width of my window, including the margins:
this.resizeImg = function (img, offset) {
var d = new Date();
//console.log(d, side);
var window_height = $(window).height();
var img_height = $(img).height();
var img_top = $(img).offset().top;
var window_width = $(window).width();
var img_width = $(img).width();
var img_left;
side == 'left' ? img_left = offset.left : img_left = window_width - offset.left;
console.log(window_width, img_left)
var image_resize_height = window_height - img_top - 20;
var image_resize_width = window_width - img_left - 20;
if (img_height + img_top > window_height && img_width + img_left > window_width) {
console.log("h w")
if (image_resize_width > image_resize_height) {
$(img).css('height', image_resize_height + 'px').css("width", "auto");
} else {
$(img).css('width', image_resize_width + 'px').css("height", "auto");
}
} else if (img_height + img_top > window_height) {
//console.log("h")
$(img).css('height', image_resize_height + 'px').css("width", "auto");
} else if (img_width + img_left > window_width) {
//console.log("w")
$(img).css('width', image_resize_width + 'px').css("height", "auto");
} else {
//console.log("non")
}
};
It almost works, but sometimes my images exceed the window width or height. I can't find the solution...
Here is my CSS:
.vignette {
max-height: 800px;
max-width : 800px;
z-index : 2;
top : 25px;
}
.info{
position : relative;
}
.info img {
position : absolute;
display : none;
cursor : pointer;
}
My full script in jsFiddle: http://jsfiddle.net/CrnNZ/
Here is the link to my website : http://olivierlellouche.com/
Thanks a lot for your help !
Are you taking care of the fact that you are moving the image down 25px in:
.vignette {
top : 25px;
}
The only height adjustment I see is 20px:
var image_resize_height = window_height - img_top - 20;
You may just need to subtract few more pixels to your calculations?
Or better yet:
var img_top = $(img).offset().top;
May be top of the offset area and not the raw top of the image. In which case, you still need to subtract 25px for that.
(From your website) The other thing that may be useful is to always enable, or always disable the vertical scroll-bar on the right. Or re-size the text area to be smaller than the available area when their isn't a scroll-bar. (Unfortunately, I could not get your jsfiddle to work at all and the only error from their I could view was vertical calculation errors. I could not see any horizontal errors.)
Does the problem continue if you subtract a few more pixels off the height?
I can't tell from your code but, does it place the image then re-size it? It may be better idea to calculate the size available before trying to place the image, that way it never changes sizes once it is placed.
EDIT:
After looking at your webpage with much smaller sized window I thought of something else. $(window).height() is not the same as $(document).height(). See: $(window).height() vs $(document).height You may need to calculate the remaining page differently if they are not the same.
If you go to the slideshow I am working on here, you can see that the image resizes and moves correctly if you resize the browser window.
...unless you make the browser window's width smaller than a certain amount (i can't tell what defines that amount) and then it stretches the image instead of scaling it. How can I fix this?
Here is my resize code:
winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
$('#curImg img').css({width:winWidth});
imgWidth = winWidth;
imgHeight = $('#curImg img').height();
$("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
$("#curImg").css({height: winHeight + "px"});
}else{
$('#curImg img').css({height:winHeight});
imgHeight = winHeight;
imgWidth = $('#curImg img').width();
$("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
$("#curImg").css({width: winWidth + "px"});
}
You could also check out this jQuery plugin:
http://srobbin.com/jquery-plugins/backstretch/
Or CSS tricks which looks at multiple solutions:
http://css-tricks.com/perfect-full-page-background-image/
You should take a look to tha background-size properties, especially at the cover values
Something I wrote that works:
//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height
iRatio = iWidth/iHeight;
wRatio = oWidth/oHeight;
if(iRatio<wRatio){
imageWidth = oWidth;
imageHeight = Math.ceil(iHeight*(oWidth/iWidth));
}
else{
imageHeight = oHeight;
imageWidth = Math.ceil(iWidth*(oHeight/iHeight));
}
$('#backgroundResizeImage').css({
'height': imageHeight,
'width': imageWidth
});
Hope this helps!
I rewrote your example a bit to make a self-contained demonstration.
Two notes unrelated to your question.
Make sure to cache any of your jQuery objects. You don't want to fetch items repeatedly, as that comes with an unnecessary performance cost.
My example shows this happening in the resize event for the window - I'm not sure how you had yours set up. For production, it's very important to throttle events bound to things like the window resize event, since they can be fired as fast as a browser can manage, which can lead to bad consequences. See this excellent article by John Resig on a time this bit Twitter in the ass.
The biggest relevant change is that I altered the way it's setting the heights and widths of images depending on how their ratio compares to the window. I think this way is a little clearer, but that's subjective. But it does work!
http://jsfiddle.net/L4k3s/2/
var $window = $(window),
$img = $('img'),
imgRatio = $img.width() / $img.height();
$window.on('resize', function (event) {
var imgWidth = $img.width(),
imgHeight = $img.height(),
winWidth = $window.width(),
winHeight = $window.height(),
ratio = winWidth / winHeight;
// The image is wider than the window
if (ratio < imgRatio) {
$img.width(winWidth);
$img.height(winWidth / imgRatio);
$img.css({
left: 0,
top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
});
// The image is taller than the window
} else {
$img.width(winHeight * imgRatio);
$img.height(winHeight);
$img.css({
left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
top: 0
});
}
});
How do I get the browser window height so I can find the center position?
I only need the window height, not the web page height.
I tried $(window).height() / 2 but it only works if the browser has focus from the top of the page. If I scroll down I get the wrong center.
To get the y value of the center of the current viewable area, use:
$(window).scrollTop() + $(window).height() / 2
I tried it on this page, by opening up the Web Inspector and entering:
$('<p>').text('test').appendTo('body').css({position: 'absolute', top: $(window).scrollTop() + $(window).height() / 2});
I think that the body's height needs to be in brackets for it to work properly:
var center = $("body").scrollTop() + ($("body").height() / 2);
However, if you're making a popup dialog, it's better to detect if the user is not on a mobile device then use the CSS "position: fixed". You detect for mobile devices because Mobile Safari doesn't understand fixed positioning in iOS versions before 5. Use this code for the detection:
var isMobile = navigator.appVersion.indexOf("Mobile/") != -1;
Ad#m
Try window.outerHeight and window.outerWidth, which works in FF5 (and possibly earlier versions) and Chrome, but not in IE9. From googling it seems that this bit of info is not easy to get by in IE.
Also see this other question dealing with IE.
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="' + src + '" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var w = 700;
var h = 600;
var leftCenter = window.innerWidth / 2;
var leftWindowMargin = leftCenter - (w / 2);
var topCenter = window.innerHeight / 2;
var topWindowMargin = topCenter - (h / 2);
var win = window.open("", "", "width=" + w + ",height=" + h + ",resizable=no,top=" + topWindowMargin + ",left=" + leftWindowMargin + ";");
win.document.write(iframe);
I'm struggling for a while positioning a div at 100px from the imaginary center of the window.
My code is doing: middle window / 2 + 100px and is not what I want:
var middle = screen.availWidth/2;
var position = middle+300;
document.getElementById('bookmarks').style.left = position + 'px';
Using this code my DIV is going left and right based on the window size and I wanted it to be at 100 px from the center not moving at all.
Also I know this is depending on browser.
Any help with this?
Thanks!
Vic
You say middle but you do not say on which axis, so assuming that you want the middle of both x and y you could use the following code. Note: it is factoring the 200px width and height for the div.
<body>
<div style="background-color: #000000; height: 200px; width: 200px; position: fixed;" id="bookmarks"></div>
<script>
var middleX = window.innerWidth/2;
var middleY = window.innerHeight/2;
var positionX = middleX-100;
var positionY = middleY-100;
document.getElementById('bookmarks').style.left = positionX + 'px';
document.getElementById('bookmarks').style.top = positionY + 'px';
</script>
</body>
Also note that there are cleaner ways of doing this. I left it like this so that you can understand the logic and then clean it yourself later and you also said that you did not want it moving at all so I assumed that you wanted position:fixed.