I have a simple page with images, and when the user clicks the image, it opens up a new browser window with the image filling the area. I have the css set on the new window so that the image height and width are both 100% (and overflow is set to hidden) so that the window can be resized.
But what I need is for the window to maintain aspect ratio if the user resizes it. Right now, I'm stuck because I'm not getting how the event works, but I think I'm making this harder than it needs to be. Right now I have:
$(function(){
$(window).resize(function() {
var height = $(this).attr("innerHeight");
var width = $(this).attr("innerWidth");
if(height/width != .75){
window.resizeTo(width,width*.75);
}
});
});
Before I added the conditional, the window would immediately start shrinking (apparently opening a new window fires the resize event). Adding the conditional preventing this from happening when the window opens, but any resizing starts the shrinking again.
Is it just because the height and width are never exactly the right ratio (should I manually set the width to a round number ever time) or is there something else I'm doing wrong? Or is there some other way to get what I'm after that's more straightforward?
I believe you're on the right track, but resizeTo() resizes the entire browser window, including window frames, toolbars, menus, etc.
So, when you call resizeTo(), it fires, detects the inner height/width isn't the desired aspect ratio, and resizes the entire window, frames and toolbars and all.
This then fires resizeTo() again, which finds, again, the inner aspect ratio isn't right, and so keeps firing and resizing ad infinitum.
To fix this, you'd need to:
Detect the outer size by resizing and then testing the innerWidth/innerHeight. Remember, this can change as the user works with their browser.
Call resizeTo with a size that accounts for the outer chrome and achieves the desired aspect ratio for the innerWidth/inner Height.
Related
I have a dynamic HTML element which has a height set in percent and a width equal to the height. – The height changes, depending on the viewport size and I always have to obtain a 1:1 aspect ratio, which is why I use a scrip, on page load, to look at the height and make that the width too.
So when I open the site, everything looks like it should, but as soon, as I resize it, the height value of course changes and the width stays the same.
Is there a way so that I can make it, that my scrip reloads, when the viewport changes size?
<body onresize="myFunction()">
…solves the Problem. – I just made my script into a function an added onresize to the body.
Credit to: w3schools – onresize Event and #SlawomirDziuba for pointing this out to me.
Edit:
As #SlawomirDziuba pointed out, you can also use:
window.addEventListener ('resize', myFunction);
Doing it like that allows you to have all your JS at one place.
Sorry the FPS is a little rough, but basically I have created a side panel for some of my web app's settings
I open and close it by setting the width of a container element
document.getElementById("theSidePanel").style.width = "50vw";
and
document.getElementById("theSidePanel").style.width = "0";
If you look closely, when the panel closes, some of the controls on the panel stay visible for a second, and then disappear, after the side panel has already closed
I'm hoping that this has something to do with closing the panel by setting the width, is there a better way to do this?
Otherwise it'll be a bug somewhere else in code, which would be significantly more difficult to troubleshoot (If anybody has ideas, I'm all ears)
As the browser is reducing the width to 1 (which I presume has a CSS transition on it), it will be repeatedly re-drawing and re-rendering the interior of the div as it shrinks and shrinks, which is probably causing the bug.
If the div is absolute or fixed-positioned, why not instead try keeping the width constant, and modifying the left property to negative the width of the div, and adding a transition to left to animate it? That will replicate the desired effect, but will not force the browser to continually re-render the div's contents.
I have a problem with the Simple Modal (Eric Martin) modal window.
I have a window that needs a scrollbar. I have found the having autoResize set to true correctly sets the scrollbars when the browser window is shrunk down.
However if I then resize the browser window large again, the modal window stays at the shrunk size.
If I have autoResize turned off and include the following code
$(window).resize(function() {
$("#simplemodal-container").css("height","auto");
$(window).trigger('resize.simplemodal');
});
then the resize works correctly. However I need autoResize to be turned on in order to get the scrollbars to appear when the browser window is shrunk down.
Any help would be very much appreciated.
Thanks,
Ok, I have managed to answer my own question. If I define the modal window with the minHeight property set then the modal window will naturally expand back to the correct size when the browser window is re-expanded.
Doing this I don't even need the resize function mentioned above.
I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.
That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.
I have a div that acts as a progress bar, constantly growing an amount proportional to the browser width. timerLength += $(window).width()/numSlides * .01; When the bar reaches the edge of the browser its width is set to 0 and it begins to fill again.
I want this to scale fluidly, but I do not know how to make the bar resize proportionally when the browser is resized. It works correctly in different browser sizes, but as of now, if you resize the browser, the width of the bar stays the same, until it reaches the edge of the browser and sets itself to 0 again.
Think about using a percentage width. Calculate the percentage it should be filled, size the div appropriately to the window (either by manually recaluatling it's size in JS and updating it or pure CSS) and let the browser handle all the scaling. Just a thought.
Without seeing all the code its a bit hard to judge but it sounds like you just need to use % widths rather than a fixed width.
Make you loader con 100% width and display:block; this will make it fluidly resize to the screen. Then when you are filling the bar in use % again.