I open a window with w=window.open('','', 'width=1000,height=700'); than i want this window to be resized with proportion 10/7.
for example: 500/350; 100/70 ...
i've maximum and minimum sizes already:
var w;
function openwindow()
{
w=window.open('','', 'width=1000,height=700');
w.focus();
resize(w);
}
function resize(w_obj) {
w_obj.onresize = function(event) {
width = w_obj.innerWidth;
height = w_obj.innerHeight;
// if popup width is greather then 1000px
if (width > 1000) {
w_obj.resizeTo(1000,700);
}
// if popup height is greather then 700px
if(height >700) {
w_obj.resizeTo(1000,700);
}
if (width < 500) {
w_obj.resizeTo(500,350);
}
if(height < 350) {
w_obj.resizeTo(500,350);
}
}
}
You should use outerHeight as that's what resizeTo's arguments mean. A problem however is that you cannot know whether the user resizes the width or the height of the window. Thus, you do not know what dimension to use as the reference and which to calculate.
Anyway, what you want is the following:
Clamp width and height between its minimum and maximum size. You can use Math.min/Math.max for this.
Set height to width multiplied by the 7 / 10 ratio.
See http://jsfiddle.net/bSE9C/1/.
var width = w_obj.outerWidth;
var height = w_obj.outerHeight;
width = Math.min(width, 1000); // may not exceed 1000 maximum
height = Math.min(height, 700);
width = Math.max(width, 500); // may not exceed 500 minimum
height = Math.max(height, 350);
height = width * 7 / 10;
w_obj.resizeTo(width, height);
Related
I want to resize an image when window is resized. I want to center this image to the container div element. I also want to have padding on 4 sides. (top/left/bottom/right: 15% for example)
Live Demo: https://react-ts-f4jemk.stackblitz.io
Live Editor: https://stackblitz.com/edit/react-ts-f4jemk
This is how it should look like:
When window resized, image should get bigger or smaller based on window size. In this case i want to keep aspect ratio and blank on top, left, bottom and right so that image is visible and centered on div.
What I tried so far:
updateDimensions() {
let imgHeight = this.state.imgHeight
let imgWidth = this.state.imgWidthMax
let w = window,
d = document,
documentElement = d.documentElement,
body = d.getElementsByTagName('body')[0],
width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
height = w.innerHeight || documentElement.clientHeight || body.clientHeight
if (imgWidth && imgWidth > 0) {
imgWidth = imgWidth + width - this.state.width
imgHeight = imgHeight + height - this.state.height
const ratioW = width / imgWidth
const ratioH = height / imgHeight
this.setState({ width: width, height: height, imgHeight, imgWidth })
return
}
this.setState({ width: width, height: height, imgHeight, imgWidth })
}
componentWillMount() {
this.updateDimensions()
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions)
setTimeout(() => {
const imgHeight: number = this.imgEl.clientHeight
const imgWidth: number = this.imgEl.clientWidth
this.setState({ imgHeight, imgWidth, imgHeightMax: imgHeight, imgWidthMax: imgWidth })
}, 1000)
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions)
}
I also tried to do it via CSS-only. However, either width or height is getting larger then browser height/width.
.img {
width: auto; // or 100%
height: 100%; // or auto
}
My updateDimensions() works however, my calculations are wrong. How can i properly handle this situation? How can i calculate properly?
I updated your function to resize the image based on its aspect ratio
updateDimensions() {
let w = window,
d = document,
documentElement = d.documentElement,
body = d.getElementsByTagName("body")[0],
inner = d.querySelector(".inner");
//this calculates the padding %
const height = inner.clientHeight - inner.clientHeight * 0.15;
const width = inner.clientWidth - inner.clientWidth * 0.15;
let imgWidth = width;
//calculates hight base os aspect ratio
let imgHeight = (imgWidth * height) / width;
//if height is greater than the inner container, set the maximun size and recalculate width base on max-height
if (imgHeight > height) {
imgHeight = height;
imgWidth = (imgHeight * width) / height;
}
this.setState({ width, height, imgWidth, imgHeight });
}
Here is the updated code on the online editor: https://stackblitz.com/edit/react-ts-jbzynn?file=index.tsx
Current code:
cover_height: function() {
if (!$('.typology-cover-empty').length) {
var cover_height = $(window).height() - this.settings.admin_bar_height + Math.abs(parseInt($('.typology-section:first').css('top'), 10));
var cover_content_height = $('.cover-item-container').height();
var header_height = $('#typology-header').height();
var cover_auto = true;
if (cover_height < 450) {
cover_height = 450;
}
if (cover_content_height > cover_height - header_height) {
cover_height = cover_content_height + header_height + 100;
cover_auto = false;
}
if ($(window).width() <= 1366) {
this.settings.cover_height = cover_height;
$('.typology-cover-item').css('height', cover_height);
$('.typology-cover').css('height', cover_height);
} else {
$('.typology-cover-item').css('height', $('.typology-cover').height());
$('.typology-cover').css('height', $('.typology-cover').height());
this.settings.cover_height = $('.typology-cover').height();
}
if (cover_auto) {
if (!$('.typology-cover-slider').length) {
$('.typology-cover-item').css('position', 'fixed');
} else {
$('.typology-slider-wrapper-fixed').css('position', 'fixed');
}
}
}
},
What do I have to change in order to decrease the height of the slider?
If you go to the website you will see its really big.
The website is Censored and basically this resizes resizes based on the code above. But I'd like to make it smaller.
The sliders height is computed by this script. The calculation depend on the windows height and the height of the sliders content. I dont think its a good idea to set a fix heigth of the slider. If you do so you will lose the sliders responsive abilities.
Here is were the sliders height is set:
if ($(window).width() <= 1366) {
this.settings.cover_height = cover_height;// this variable contains the calculated height if the windows width is lower than 1366
$('.typology-cover-item').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
$('.typology-cover').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
} else {
$('.typology-cover-item').css('height', $('.typology-cover').height());// if windows width is greater than 1366 sliders Elements are set to its "natural height"
$('.typology-cover').css('height', $('.typology-cover').height());
this.settings.cover_height = $('.typology-cover').height();// if windows width is greater than 1366 sliders Elements are set to its "natural height"
}
You can do something like this to reduce the height:
var reduceHeightValue = 50;
if ($(window).width() <= 1366) {
this.settings.cover_height = cover_height - reduceHeightValue;// reduce the height by 50 if windows width is lower than 1366
$('.typology-cover-item').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
$('.typology-cover').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
} else {
$('.typology-cover-item').css('height', $('.typology-cover').height() - reduceHeightValue);// reduce the height by 50 if windows width is greater than 1366
$('.typology-cover').css('height', $('.typology-cover').height() - reduceHeightValue);// reduce the height by 50 if windows width is greater than 1366
this.settings.cover_height = $('.typology-cover').height() - reduceHeightValue;// reduce the height by 50 if windows width is greater than 1366
}
This kind of hacks can work for you, but most the time its not a good idea to change existing code this way because it will break something.
Obviously there are settings for this slider where a height can be set. I recommend to use this settings. Read the documentation of the slider and set the height in a appropriate way.
Try this:
cover_height: function() {
if (!$('.typology-cover-empty').length) {
var cover_height = $(window).height() - this.settings.admin_bar_height + Math.abs(parseInt($('.typology-section:first').css('top'), 10));
var cover_content_height = $('.cover-item-container').height();
$('#typology-header').height(150);// Set the height in pixel
var header_height = $('#typology-header').height();
var cover_auto = true;
if (cover_height < 450) {
cover_height = 450;
}
if (cover_content_height > cover_height - header_height) {
cover_height = cover_content_height + header_height + 100;
cover_auto = false;
}
if ($(window).width() <= 1366) {
this.settings.cover_height = cover_height;
$('.typology-cover-item').css('height', cover_height);
$('.typology-cover').css('height', cover_height);
} else {
$('.typology-cover-item').css('height', $('.typology-cover').height());
$('.typology-cover').css('height', $('.typology-cover').height());
this.settings.cover_height = $('.typology-cover').height();
}
if (cover_auto) {
if (!$('.typology-cover-slider').length) {
$('.typology-cover-item').css('position', 'fixed');
} else {
$('.typology-slider-wrapper-fixed').css('position', 'fixed');
}
}
}
},
I have an issue which is a little hard to explain. I have a div which has a 2:1 aspect ratio. And I want it to have a 100% width or height based on the browsers window size.
If the window height is greater than the divs height the the size should be based on 100% width.
And if window height is less than the divs height the size should be based on 100% height.
With my curren approach it is flashing when I size larger.
Look at this link http://acozmo.com/me/ for a demo.
HTML
<section id="container">
</section>
JQuery
function update() {
var $documentHeight = $(document).height();
var $windowHeight = $(window).height();
var $documentWidth = $(document).width();
var $windowWidth = $(window).width();
var $container = $('#container');
if ( $windowHeight >= $documentHeight ) {
$container.width($windowWidth);
$container.height($windowWidth / 2);
}
if ( $windowHeight < $documentHeight ) {
$container.width($windowHeight * 2);
$container.height($windowHeight);
}
}
$(document).ready(function() {
update()
});
$(window).resize(function() {
update();
})
To resize to fit inside the window while maintaining aspect ratio, set up your container with an initial size and then divide the area width by the container's width to get the scale. You then need a check to make sure that scale doesn't make the height too great. See code below and fiddle - I've added the case where the height is greater than the width too for completeness.
To stop the flashing, throttle your resize function using setTimeout. This will ensure that update is only called once every n milliseconds. You can play with the number until you find the right balance.
var container = $('#container'),
updateTimeout,
threshold = 100;
function update() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
width = container.width(),
height = container.height(),
scale;
if ( windowWidth > windowHeight ) {
scale = windowWidth / width;
if ( height * scale > windowHeight ) {
scale = windowHeight / height;
}
}
else {
scale = windowHeight / height;
if ( width * scale > windowWidth ) {
scale = windowWidth / width;
}
}
container.width(Math.round(width * scale));
container.height(Math.round(height * scale));
}
$(document).ready(function() {
update();
});
$(window).resize(function() {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(update, threshold);
});
It's probably happening because the fact that you are using a second if, instead of an else . . . it hits the first if, shrinks the height, and then hits the second if and increases it.
Try changing this (the second if):
if ( $windowHeight < $documentHeight ) {
. . . to this:
else {
i want to fix my popup windows size to minimum height of 400 and width of 650, after that even dragging to below that size should not be possible, i used resizeTo() function, but still dragging is possible, i want to lock my popup window after that mini. size, and more than that height and width , window should be resize. any one have answer using javascript???
Here is what i done::>>
var newHeight = $(window).height();
var newWidth = $(window).width();
/*newWidth < 650 ? window.innerWidth = 650 : $(window).height();
newHeight < 400 ? window.innerHeight = 400 : $(window).width()*/;
if (newWidth < 633)
{
window.resizeTo(650,newHeight+72);
}
else if (newHeight < 327) {
window.resizeTo(newWidth,400);
}
you need to use from JQUERY UI resizeable function. Once check with that it will very easy method for this task. all the best
I have aplied jquery lighbox on my image gallery, but due to the variable size of images, the lightbox size is not fixed hence opens up with image's original size, this in turn causes the biga images to go out of screen and display horizontal scroll bar in browser.
Hence I am looking for the way to apply the fix width and height to lightbox so that every image must be displayed with this size in lightbox.
Please help..
Update
i Just tried with the solution Scott (http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx) has given to me, I did this,
function _resize_container_image_box(intImageWidth,intImageHeight) {
// Get current width and height
//rescale if necessary
if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
var scale = isWider ? settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;
}
$('#lightbox-image').height(intImageHeight);
$('#lightbox-image').width(intImageWidth);
var intCurrentWidth = $('#lightbox-container-image-box').width();
var intCurrentHeight = $('#lightbox-container-image-box').height();
// Get the width and height of the selected image plus the padding
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value
// Diferences
var intDiffW = intCurrentWidth - intWidth;
var intDiffH = intCurrentHeight - intHeight;
// Perfomance the effect
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
if ( $.browser.msie ) {
___pause(250);
} else {
___pause(100);
}
}
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
};
AND
$('#gallery a').lightBox( maxHeight: null,
maxWidth: null);
});
But whenever I do this and click on the image just gets open in browsers annother tab, all the lightbox functinalty fails
Please help me to correct it
Thanks
I modified the jquery.lightbox-0.5.js file by Leandro Vieira Pinho. What this modified javascript file does is, it will check each image and if the width or height exceeds the screen (viewport area), then the image is resized while preserving the aspect ratio.
To use this file, you just have to copy and paste entire contents of this javascript file in your already existing jquery.lightbox-0.5.js file or you just have to replace the old file with this.
I have given 2 links: First one will let you down load the entire javascript file and the second will display the source code which you can copy and paste into your existing jquery.lightbox-0.5.js.
Download javascript file: http://turboupload.com/081zwttawcb6
Source code : http://www.sourcepod.com/twhbtf88-5047
You need to specify the maxHeight and maxWidth against all calls of the lightbox().
Example:
$('#gallery a').lightBox({
maxHeight: 700,
maxWidth: 700
});
You lightbox call is missing a {.
Change your lightbox call to as follows:
$('#gallery a').lightBox( {maxHeight: null,
maxWidth: null
});
Sunimal Kaluarachchi's code works well but doesn't handle a landscape aspect ratio properly.
To work properly you need to change
if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
to
if ( newImageWidth > newViewPortWidth ) //
in his function ___calculateImageDimension function
here is the complete function
function ___calculateImageDimension(viewPortWidth, viewPortHeight, imageWidth, imageHeight)
{
// obtain 82% of ViewPort Height
var viewPortHeightPercent = viewPortHeight * (82/100);
var newImageHeight = imageHeight;
var newImageWidth = imageWidth;
var newViewPortWidth = viewPortWidth;
var scaleHeight =0;
var scaleWidth = 0;
// if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
if ( newImageWidth > newViewPortWidth ) // if viewport width > viewport height
{
// Get 80% of current viewport width so the image width will be displayed within this 80% of viewport width size
newViewPortWidth = viewPortWidth * (80/100);
}
// image width check
if ( newImageWidth > newViewPortWidth )
{
newImageWidth = newViewPortWidth;
scaleWidth = imageHeight/imageWidth;
newImageHeight = scaleWidth * newImageWidth;
}
// image height check
if ( newImageHeight > viewPortHeightPercent )
{
newImageHeight = viewPortHeightPercent;
//calculate scale to set width
scaleHeight = imageWidth/imageHeight;
newImageWidth = scaleHeight * newImageHeight;
}
arrayNewImageSize = new Array(newImageWidth,newImageHeight);
return arrayNewImageSize;
}
Your function should replace the one in the jquery.lightbox.js plugin file (look for the function that starts with function _resize_container_image_box somewhere around line 196).
What you need to do next is call lightBox()in your external JS file or inside html like #cocacola09 and #Chandu suggested:
$('#gallery a').lightBox( {maxHeight: null,
maxWidth: null
});
What i did in addition is to get the width and height of a window dynamically, so it fits the current window size:
$(function() {
//get height and width of window
var windowWidth = $(window).width();
var windowHeight = $(window).height();
//windowsize - 50px
var windowHeightFixed = windowHeight - 50;
var windowWidthFixed = windowWidth - 50;
$('a.lightbox').lightBox({
maxHeight: windowHeightFixed,
maxWidth: windowWidthFixed
});
});
But this method gives some buggy results. The problem occurs when you reload the page in a different window size. Some images preserve the width/height of previous window size, but some don't. Tested in Firefox 18, Chrome 24.