I was wondering if there is any javascript code that zooms a webpage out to max (till no horizontal scrolling is possible) so that it looks good on mobile.
I've used:
document.body.style.zoom="x%"
But it will only allow me to zoom in. Zooming out, or putting a percentage higher than 100%, does not have any effect.
It sounds like you need to use the browser object model to get height and width then use JavaScript to set the view container to the dimensions returned, another option is to set the body container to height: 100% width: 100% but depending how the page is designed it has to be tested. Using zoom which is not guaranteed to be implemented sounds like a bad option. A better option would be conditional JavaScript to render the view container according to BOM
Related
When using the picture tag with srcset, I can define different image sources for different viewport widths.
What I want however, is to define different images sources for the actual space (width-based) the image occupies after the browser has rendered the page.
For example:
Viewport width is 1920px Website uses container size of 1200px
Container is split into two columns of 600px each
Column 2 contains an image with 100% width - which will result in a width of 600px
The srcset for the image supplies 400x300px, 800x600px and 1200x900px
The browser should now automatically know to pick 800x600px
As long as it's clear that the image will always be in that spot, I could use srcset based on the viewport width.
Unfortunately, my site design is so, that content editors can freely add columns/rows and even nest them. Also at some point columns collapse and become always full-width. So when rendering the HTML, I cannot predict how much of the viewport width an image will get.
Therfor I would love to have the browser check how much pixels the image actually has when it's rendered to the user - and choose the appropiate image.
I have searched quite a bit, but couldn't find anything about that.
Is that even possible?
Or is the only solution a Javascript one?
No, sadly this is not possible yet. There has been much talk about element queries, basically media queries that apply to the element's size, instead of the windows size. But they are apparently really complicated to integrate. There is also no syntax for it yet. The classic problem that is often brought up (in pseudo-syntax), is something like this:
.child {
width: 500px;
}
.container:min-width(450px) > .child {
width: 400px;
}
so we set .child to 500px width, BUT then we say if the child's parent is more than 450px, the .child should have a width of 400px, thus .container would be less than 450px again, and .child is set again to 500px and so on and on. This causes what is called a "circularity problem".
There are also other problems, such as with dynamic layouts and the browser not really knowing how much space an element will take up beforehand. This could lead to huge performance issues, as the browser would simply have to calculate too much.
There are however JS libraries that try to implement this (e.g. EQCSS, CSS-Element-Queries or EQJS), but for your case a selfmade JS would probably be better. I'd recommend checking out how those libraries handle it though.
More info:
https://www.xanthir.com/b4PR0
https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690
JS Libraries:
https://elementqueries.com/
http://marcj.github.io/css-element-queries/
https://github.com/snugug/eq.js
I have a web app that needs to be within a container of a fixed size. I want that container to always be completely visible on the screen of mobile devices. (Particularly I care about iPads.) In my case, the container is 1000px wide by 650px tall. Essentially, I need something that would be the functional equivalent of <meta name="viewport" content="min-width=1000, min-height=650">. But min-width and min-height aren't valid in a viewport meta tag.
I already have the page laid out such that if the window or viewport has extra room the content is displayed centered on the page. I've tried using the orientationchange event to change the content attribute of my meta tag, but no luck. With some configurations that I've tried it loads correctly initially (sometimes, refreshing or reopening the page often yields different results) but upon changing orientation it becomes incorrect.
This is the closest I've come to getting it to work (in the window.onOrientationChange event):
var mvp = document.getElementById('myViewport');
if(window.innerWidth / window.innerHeight > 1000 / 650) {
mvp.setAttribute('content',"user-scalable=yes, height=650");
} else {
mvp.setAttribute('content',"user-scalable=yes, width=1000");
}
Where of course #myViewport is my viewport meta tag. This works correctly in portrait (although when switching back and forth I have to manually zoom back out,) but doesn't add the extra width needed to zoom out to see the full app height in landscape. Also, I'd prefer not to allow users to zoom in and out because of the nature of the app, and certainly don't want to require them to zoom out every time they change orientation.
If there is a way to force the zoom to always fit to screen, something akin to minimum-scale=auto, maximum-scale=auto, it seems like that would work (if I could get the width correct in landscape,) but I don't know of such a mechanism. I also tried using javascript to determine the scale, based on window.outerHeight or window.outerWidth depending on which one is the determining factor, but that wasn't successful either.
And please don't tell me that this is bad design, because the specs come from the client for their internal-use app and there's nothing I can do about them.
My understanding is that CTRL-mousewheel zooms are an accessibility feature, built into the browser in question (I am currently testing in Chrome and Opera, both if which use the CTRL- zoom).
This won't ever really be needed for accessibility, however, as the app will not be for the general public. And CTRL-wheel zoom has a nice benefit out-of-box as compared with standard mousewheel zoom over elements: It seems that Angular ui-sortables work perfectly at any zoom/scale.
Unfortunately, from other answers I've found on SO, there is no way, when using CTRL-wheel, to zoom selectively : the browser can only zoom everything. For me, this includes position:fixed overlays scaling at the same time as the main viewport, which is no good.
So I set up some code for scrolling as per whichever element the mouse cursor is over, eg. scale the main viewport using the mousewheel, only if the mouse if over that viewport element.
The problem is that ui-sortable does not behave correctly, when using it for only a single element. I've used scale with transform-origin set at 50% 50% but still, when I drag the ui-sortables at any scale other than 1:1, they appear way off to the left. Any ideas on how to begin to tackle this?
This isn't a problem in Angular's sortable adaptation, rather it's an issue in the underlying jQuery-ui 1.9.2 positioning functions around line 4000 (_generatePosition or maybe one of the others). I believe that as the browser does not modify the actual dimension values during scale or zoom, and the formulae provided in that library do not account for scaling (that I can see), there is no easy fix, since jQuery ui.sortable needs scale-accurate values to calculate correct displacements. (I tried modifying the formula to account for this, but without success.)
The simplest workaround for the present is to manually change the width() / height() of your individual list elements, as seen here. This may require being selective about just what you scale using width() / height(), and what you change using scale (which is generally easier).
can anybody tell me how to resize image as we resize browser like it is done in https://login.microsoftonline.com/
I have tried it with css approach using media query. But I want to resize image on the fly like Microsoft have done. This is what I did http://codoc.testdrive.ch/Intranet
Check out this great resource so you can understand how it works.
You have several alternatives without using Javascript, such as setting the image to 100%.
img{
width: 100%;
}
Here is a demo you will see how the image gets larger or smaller depending on how you resize the window
You can also check this demo
Use the resize event as describe in (plain Javascript) JavaScript window resize event or (jQuery) How can I detect window size with jQuery?. Then set the image size you want.
The effect where the picture decreases in size can be done very simply in CSS without using any JavaScript:
#image_id{
width: 100%
}
What Microsoft has done is implement a "responsive design." This means that the design is both "fluid" and "adaptive."
"Fluid" refers to the fact that the image changes in size as the screen becomes smaller.
"Adaptive" refers to the fact that the image disappears when the screen becomes too small. (The layout of the page changes.)
The Fluid part can be achieved using the code I have above. However, the Adaptive part will require media queries, like you did. Combine the two, and you get the effect Microsoft has.
Here's some more quick information on Responsive designs for you:
Youtube video: http://www.youtube.com/watch?v=T6MCkGWSXa0 (1:29 long)
Live examples: http://liquidapsive.com/
More live examples: http://bradfrost.github.com/this-is-responsive/
I feel like GMail is an excellent example of best practices in action, but I'm looking for a more theoretical code-based approach. CSS? JavaScript? jQuery? Let's hear it.
Most web application use proper document layout and CSS to make the flow work itself out naturally when the user resizes the browser window, without executing any script at all. This is exactly what the CSS properties display, position, float, clear, etc. are for.
Depends on what you have to do on window resize...
Usually most applications and websites use browser resize event for changing layout or increasing/decreasing font size when user changes browser window size.
Check this article out...
you could do something like this.
The idea is you make a large wrapper (#main,the lightest one) and you place 2 divs inside:#left and #right.
left is a fixed width div width:200px and floats left float:left.
right is liquid so no width, but to prevent #left from overlapping you give #right a margin of the width of #left -> margin:0 0 0 200px.
To prevent #right from being to small you give it a minimum width min-width:400px. Now when you resize the window #right will resize along until #right gets at 400px then the scrollbars will be visible