I've been trying to figure it out using javascript to modify viewport scale and its properties. after checking visualViewport API they are all read-only data. is there any way to dynamically control viewport? like scaling up or setting position of viewport. I want to scale up the viewport as if I were a pinch zoom using javascript.
I already check similar way to handle above by using meta-tag. but I need the functionality after initialization. also viewport should be moved.
This Snippet might help you.
// Store the meta element
var viewport_meta = document.getElementById('viewport-meta');
// Define our viewport meta values
var viewports = {
default: viewport_meta.getAttribute('content'),
landscape: 'width=990'
};
// Change the viewport value based on screen.width
var viewport_set = function() {
if ( screen.width > 768 )
viewport_meta.setAttribute( 'content', viewports.landscape );
else
viewport_meta.setAttribute( 'content', viewports.default );
}
// Set the correct viewport value on page load
viewport_set();
// Set the correct viewport after device orientation change or resize
window.onresize = function() {
viewport_set();
}
Related
I want to set window height is the full size of my parent component but not possible to set the full size of height.Thank in advance.
The following code is a sample snippet of our requirement.
var win = new qx.ui.window.Window("First Window");
win.setAllowMaximize(true)
win.setWidth(300);
//We want to set full height window
win.setBackgroundColor("green");
this.getRoot().add(win, {left:20, top:20});
win.open();
Setting the height depends upon the layout. Using the playground, as it appears you did for this example, the default layout is Canvas, where distances from individual edges can be specified. To accomplish what you're looking for with the Canvas layout, your example would be modified like this:
var win = new qx.ui.window.Window("First Window");
win.setAllowMaximize(true)
win.setWidth(300);
win.setBackgroundColor("green");
this.getRoot().add(win, {left:20, top:0, bottom:0});
win.open();
Alternatively, and likely what you need for your real application, you have a Vertical Box Layout in which to place the window. In that case, you would use the flex layout capability to have this widget take up a proportional amount of space in the container (in this case, it'll use the full height of the container):
// Use a vertical box layout instead of the default canvas layout
this.getRoot().setLayout(new qx.ui.layout.VBox());
// Create a window
var win = new qx.ui.window.Window("First Window");
win.setMaxWidth(200);
win.setShowMinimize(false);
// Add the window to the root with flex so that it takes up available space
this.getRoot().add(win, {flex : 1});
win.open();
Derrell
I have the background of a section with the ID named home set as an image. The image has an aspect ratio of 1.5. I've written some very basic javascript to ensure that when the window size is changed, the section scales per the aspect ratio of the image. Inside of that section I have content in a div with the class container. This content is of a certain vertical height. The basic javascript I have written doesn't allow the height of the section to be less then that of the content. Hence, at that point the section stops scaling with the window size. The problem I am having is that when you scale the window past that point and then back, the section doesn't scale back up.
I've created a fiddler to help explain. http://jsfiddle.net/Chadimoglou/Bpryg/ I recommend testing it in mobile mode. To recreate what I'm doing, have the window go full screen. Grab a bottom corner and resize a little to see the background resize with the aspect ratio. Then resize so it's smaller then the height and width of the red content box. After that, pull back out again and you should see the issue I'm having. Below is a snippet of my javascript.
$(document).ready(function() {
var theWindow = $(window),
aspectRatio = 1920 / 1280;
function resizeBg() {
$("#home").width(theWindow.width);
if( ( $("#home").width()/aspectRatio ) < $("#home > .container").height() ) {
$("#home").width( $("#home > .container").height()*aspectRatio );
}
$("#home").height($("#home").width()/aspectRatio);
}
theWindow.resize(resizeBg);
window.onload=resizeBg();
});
Thanks kindly in advance for any help.
http://jsfiddle.net/Bpryg/3/
$(function() {
var $w = $(window),
$h = $('#home'), // CACHE YOUR SELECTORS
aspectRatio = 1920 / 1280;
function resizeBg() {
$h.width($w.width()); // YOUR ERROR ( should be width() )
if( ( $h.width()/aspectRatio ) <= $("> .container", $h).height() ) {
$h.width( $(" > .container", $h).height()*aspectRatio );
}
$h.height( $h.width()/aspectRatio);
}
$w.resize(resizeBg);
$w.onload=resizeBg();
});
I'm not a good JS coder, but going with the logic :
To keep the aspect ratio you could modify the CSS with JS : How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?
To know whether you should set the height or the width on auto, you'll need to know if the screen size is larger than your image or taller than you image on the aspect ratio. Just compare the two aspect ratio, then you'll know which one will be on auto. Like that, you image will never leave an unfilled part on your background and will expand to it's full width or it's full height, depending on the client aspect ratio and your image aspect ratio.
You can use :
document.documentElement.clientWidth
and
document.documentElement.clientHeight
to get the client window size and calculate the aspect ratio.
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.
window.innerHeight
Yes, it will return the value of the browser's height on a mobile device. However, the problem comes (on some browsers) when a user tries to pinch to zoom in or zoom out. The value will not adjust properly and instead still return the full length of the page.
Let's say it was 500px when loaded. The user then zooms in and the height is now 200px. However, the value is still returning 500px.
Does anyone know a method to fix this? Been searching forever.
The way I fixed this was to remove any resize callback in my code. Sounds weird, but it worked for me.
Check out the accepted answer in this link:
Detect page zoom change with jQuery in Safari
If your want innerHeight, may be get original width and then zoomed width, get zoom ratio and then calculate the new Height (after zoom).
This worked for me. The first thing I do is grab window.innerHeight and window.innerWidth from the dom when the page loads so I get the original values and store them in javascript variables. Then in my window.onresize event handler I do this.
var height = null;
var width = null;
if (window.orientation && window.orientation == -90) {
height = myOriginalHeight;
width = myOriginalWidth;
}
else {
height = myOriginalWidth;
width = myOriginalHeight;
}
doCallbacks(width, height);
My app resizes a lot because I attempt to write one ui for all screen types. According to my testing with the app this works on ipad and andriod and all the resizing works when zoomed in or orientation changes which can sometimes cause zoom to occur.
The interesting aspect of this is mobile browsers never actually change screen sizes as they are fixed, they just zoom. But if you resize to original width/height and handle orientation this way it seems to work.
I am really confused by the different properties that exist in JavaScript for getting the dimensions of a document and how to get those numbers. Can someone recommend a good place to start to understand how I would get the size of the document and position stuff correctly?
I'll try to answer as simply as I can.
The Document and Viewport
In terms of geometry, there are two sets of dimensions to be aware of; the document dimensions, which reflect the entire size of the loaded page, including the content beyond the bottom of the window and the viewport dimensions, which reflect the size of the visible part of the document that is immediately displayed in the window.
When you scroll down, the viewport moves down over the document by a certain number of pixels. In other words, the viewport is the actual browser window "border" (the toolbars, menus, tabs, and so on).
The confusion comes from the fact that depending on the browser and mode, different properties are used to get the dimensions of a document and viewport, and they return different results depending on scrollbars. But we'll come back to this.
Dimensions Overview
There are a number of properties available to you from the get-go in javascript which give you different dimensions.
Screen resolution:
window.screen.width -Height
Available screen space (same as monitor resolution) minus docks, toolbars and other UI elements:
window.screen.availWidth -Height.
Document dimensions:
document.documentElement.offsetWidth -Height
Note: These numbers do not include the scrollbars.
Viewport dimensions:
window.innerWidth -Height
These numbers include the scrollbars.
This is not available in IE 8- and IE9, so if IE, test for the document.compatMode === "CSS1Compat" and if true, use document.documentElement.clientWidth -Height, and for quirks mode use document.body.clientWidth -Height.
A note about document dimensions
As per above, document.documentElement.offsetWidth/Height provides you with the actual size of the document. One caveat to this is that scrollbars work differently between browsers. For example, IE9 will always display a vertical scrollbar even if the document height is less than the viewport height. Safari/Chrome doesn't have scrollbars on OS X Lion. Chrome on PC will not display vertical scrollbars unless it needs to.
So you may bump into inconsistencies and the Scrollbar shifts content problem. Imagine you have an absolutely positioned and centred element. Because CSS calculates the "centre" relative to the document dimensions and not the viewport dimensions, when say, Google adds the scrollbars, your content may "jump" a bit to the left as the "document centre" changes. So you may need to write JS to compensate for this effect if it bothers you, or maybe someone here can write a quick JS function to calculate document dimensions with scrollbars included.
Scrollbar Position and Dimensions
While some methods in JavaScript work with document coordinates, others work with viewport coordinates, and often this is not what you want. For example, if you have an element's top edge at 20px in document coordinates, and you scroll the page down by 20px, the top edge of that element will be at 0px relative to the top viewport coordinate. So to convert between the two systems, you first need to know by how many pixels a user has scrolled the document, and then add that number to the viewport to compensate (look at example below).
I also found these helpful:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
http://www.quirksmode.org/mobile/viewports.html
And here's a quick cross-browser module I mucked up to help you:
var dimensions = (function(){
var dims = {};
// get screen width/height:
dims.screenWidth = function() { window.screen.width };
dims.screenHeight = function() { return window.screen.height };
// get screen width/height minus chrome:
dims.availWidth = function() { return window.screen.availWidth };
dims.availHeight = function() { return window.screen.availHeight };
// get document width/height (with-out scrollbars):
if (window.document.compatMode == "CSS1Compat"){ // if IE Standards Mode
dims.documentWidth = function() { return document.body.offsetWidth };
dims.documentHeight = function() { return document.body.offsetHeight };
}
else {
dims.documentWidth = function() { return document.documentElement.offsetWidth };
dims.documentHeight = function() { return document.documentElement.offsetHeight };
}
// get viewport width/height (with scrollbars):
if (window.innerWidth != null) {
dims.viewportWidth = function () { return window.innerWidth };
dims.viewportHeight = function () { return window.innerHeight };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.viewportWidth = function () {
return window.document.documentElement.clientWidth
};
dims.viewportHeight = function () {
return window.document.documentElement.clientHeight
};
}
// get scrollbar offsets:
if (window.pageXOffset != null) {
dims.scrollXOffset = function() { return window.pageXOffset };
dims.scrollYOffset = function() { return window.pageYOffset };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.scrollXOffset = function() { return document.documentElement.scrollLeft };
dims.scrollYOffset = function() { return document.documentElement.scrollTop };
}
return dims;
}());
You can for example do console.log(dimensions.viewportWidth()) to get the viewport width.
Hope this helps you :)