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.
Related
We used to have a silverlight page that used canvas to scale the page, this resulted in a page that would always be the size of the window it was on, making the whole page smaller if the window was smaller (it does preserve aspect ratio), as if the page was a single png but it isn't, it has dynamic elements. Also when one tries to zoom in or out, it does nothing, it just makes a scroll appear to the right and bottom without affecting the page.
We are migrating the page to HTML 5 with CSS, and we haven't been able to replicate this behavior. It is a page that has 10 small tables and each has 10 "messages" that can appear. When zooming in stuff starts to overlap in addition to change size, when resizing the window,stuff overlaps too but without changing size. Most of the positions are absolute but have % in their position onscreen. However we don't want it to be responsive, we want the behavior of the silverlight version. At least that's what the bosses want.
We have been researching how to do this but so far haven't really found a good solution, especially with messing the zoom functionality of browsers. most pages/forums say this shouldn't be done.
Edit:
For now I have added a bunch of max-width and max-height in the html style and body style, as well as added a media query for switching % left to px left for an absolutely positioned group of objects. However this is by no means whay I seek to accomplish. We need the whole page to behave like an bgimage, scaling every element with the size of the window.
I am using CSS3 to control my transitions and I've made my #wrapper's width 100%. However, when I animate divs across the entire width, it doesn't work right.
1. The animated birds duplicates if the browser's width is max out.
2. The animated birds will not move across the screen if the browser's width is resized to a much smaller size.
3. The clouds and the birds also resets or flicker every so often.
The demo page is here. I was wondering by setting these values to dynamic it might resolve the issue mentioned above. However, I'm not sure how to set these values dynamically based on the size of the browser's window. If I set the #wraper's to a fixed width and all the transitions and animations to a fix width it works fine.
Any help is much appreciated.
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 gallery that is page with just a bunch of images. Nothing else.
And I want to resize and reduce/increase the number of images on a row depending on the with of the browser window.
Right now I have a fixed number if images per row.
imgSize = documentWidth/18;
With my browser window (1770px), this produces 18 images on one row รก 98.3px wide.
But if the users window is a lot smaller than mine, let's say 962px, the images will be 53.4px wide which is to small.
I want them around 100px.
So I need to calculate how many images will fit on one row if the window size is X and the image cannot be larger than 120px and smaller than 80px.
Divide the window size by 80 and round up.
Responsive design addresses what you are trying to do. You'd use media queries to specify a different number of columns depending on the width of the window - this is done by giving the images a percentage width. Then you could give the images a min-width as well as max-width to constrain their actual sizes.
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.