I have a webpage that has N DIV elements which end up in a (free flowing) grid. The resulting webpage is too large for the screen and I want to scale so that the N elements are as large as possible, reflowed as required, but fit the screen. The DIV elements are not in encompassed by a table or similar element.
I have been using style.zoom=... to scale and this sort-of works but not on Firefox so I'm trying to use style.transform = scale(..,..) to scale the DIV elements. The DIV elements do scale, but they remain in the same place seeming to take up as much overall screen space as they did before I shrunk them (they seem to 'gain' a lot of surrounding whitespace), the screen doesn't reflow and things still don't fit the screen.
I've been reading up on transform and am thoroughly confused as to what it is supposed to do if the space taken up on screen remains the same even if the item is shrunk!
I want to see all my elements, shrunk to fit the screen and reflowed with no 'big white space' around them. Is this possible?
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.
In Firefox, the exact character width is adjusted (to nearest pixel) for on-screen viewing, but such adjustment does not occur in the print view. This means the number of lines in a paragraph (after wrapping) would differ.
I have some JavaScript that is used to add vertical margins to make two columns line up correctly, within a fixed width div. The alignment is correct on the screen, but not in the printed document.
I could make the font size and images very large and then use CSS transform: scale(0.1) to make the results small again.
I could have JavaScript separate each line in its own div (after wrapping), which would let me use white-space: nowrap.
Can you suggest something easier with less side-effects? Perhaps a CSS rule I'm not aware of?
I did notice if the user uses Ctrl+ zoom feature, then the problem goes away to some extent.
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 was reviewing some of my old code and I have a method that statically resizes the height of a textbox control at runtime based on the clients screen width. So there were hardocded values if screen resolution is say "1280x800" then the texbox's height is going to be 475px. OK I get it... BAD It was semi-OK a few years ago with the fewer number of screen resolutions and CRT monitors, but not now for a number of reasons.
I have gotten much better with JavaScript and a bit better with jQuery and am looking for a solution that can resize the height of the textbox containing some text from the database based on the overall width of the containing DIV which is sized to 100% of the client's screen width. That means wider screens need a smaller height, and less wide screens need a larger height.
I want to do this dynamically if possible. My last resort is to fix the containing control's width which should dicate a fixed height, but I would rather the text control span the full 100% of the page.
Any suggestions are appreciated. Thanks!
That sounds like the equivalent of retrieving the text metrics before you render it to the display. I can think of ways that is done in Win Forms but in the browser... I could only think of presenting the text in an equivalently sized div (taking into account the padding in the textbox) and grabbing the rendered size, removing the div (you could do this somewhat invisibly as the page loaded) and applying the results to your textbox.
I am using the jqDock from wizzud.com/jqdock and I was hoping that someone here had some experience with it.
Here is what my dock looks like:
(source: jamespwright.com)
My first issue is that my client is INSISTING that the dock should fill the entire width of the page, but nothing that I change makes that happen. The dock stays the same width no matter what I do.
The second issue is that 3rd from last image. Notice how it is smashed vertically? Each of these images has a second image associated on rollover to display text to the user. That looks like this:
(source: jamespwright.com)
Now each of those images is 64x75 (width x height) pixels. The small images are that same width, but are constrained by the dock to be 48 pixels tall. The only image that is different is the "Companion Animals" hover image, which is 64x83 pixels (so that it can fit the 2 lines of text).
I can't do this without having 2 lines of text on that image. But I can't figure out why the first image (which is the exact same dimensions as the other images) would be "smushed" because the 2nd image is a different height.
Any help would be appreciated.
2nd issue first :
You are constraining the height (height being the minor axis in a horizontal menu) to 48px. Images are constrained proportionately, so a full image size of 64x75 results in an 'at rest' (ie. constrained) size of 41x48. But an image size of 64x83 results in an 'at rest' size of 37x48, ie. narrower than the others by 4px.
One thing to bear in mind here is that the ability to provide separate small images for the at rest state is purely and simply for clarity of images - ie. not having to rely on the browser's size reduction rendition of the reduced 'larger' image. It is always the 'large' image that is the important one and the one that is constrained; the 'smaller' image merely replaces the reduced 'large' image when that image is completely 'at rest' in the dock.
Back to the 1st issue :
I'm not entirely clear on exactly what is required to 'fill the entire width of the page', nor am I certain of what that page is, but I assume it's a fixed width website design, eg. 900px (for sake of argument), and that the 'at rest' dock needs to fill the entire 900px (presumably you're allowed half the inter-image gap at either end!).
You have a problem! Because as soon as any image in the dock is hovered over, the ends of the dock are going to exceed your 'page' width! That is the nature of the dock; that is what it does.
If that really is what you need to do, you have 2 ways of getting the 'at rest' dock to match the required width:
set your image sizes and constraint size such that they fit, and/or
apply css left/right padding to each menu item (better if all images are contained in anchors, then just evenly pad the anchors).