How do I Position window to the bottom right of the window? I was thinking getting the max width and max height of the user's screen then subtracting a few pixels but I don't know how to do that.
You can use the screen size (window.screen.width and window.screen.height) and the window size to calculate the wanted position of the top left corner of the window, and then place it there:
var app_window=Ti.UI.getCurrentWindow();
app_window.setX(window.screen.width-app_window.getWidth());
app_window.setY(window.screen.height-app_window.getHeight());
Related
The image in the bottom of the parallax theme appears to be too small. If you expand your browser to full height you will see that it is showing spacing on the bottom.
My first guess is that the image is too small. However the height is actually larger than the one I'm using on the top widget area. Should I get a larger picture or is there something I can do with css?
URL: jeff-cunningham.com
It is using the width to scale the height. So to get the height you desire, you need to make sure the proportions of the image are enough to go down far enough.
As an easy example lets say your page is 1000pxs wide. You need the image to go down 2000pxs. You would then need your height to be 2 times bigger than your width. A picture with a width of 1500pxs and a height of 2000pxs would not work because the image would scale to a width of 1000pxs and a height of 1333pxs.
I'm trying to place three divs side by side.
The first div has a fixed width and needs to be against the left side of the screen (ie: float:left;).
The next div also has a fixed width and needs to be against the right side of the screen (ie: float:right;).
And the last div needs to fill the space in between them and adjust based on the width of the browser window.
When a certain minimum width is reached for this last div in the middle I need it to stop getting smaller and have scroll bars appear in the browser.
Is this possible to achieve? If so, how?
try this link. basically, there are 3 divs, 2 of them which placed on the side are fixed width absolute position div while the center is a normal div with margin.
I have a webpage which is scaled down from 1 to 0.5 depending on the browser window size. Now on my page I have a little square inside a div, which I want to be centered on the whole page. So what I need to achieve is giving the div a width which fills 100% of the browser width. Using something like width:100% will not give the result I am looking for as it will set the width to the width of the browser window (i.e. 1600px). But as my page is scaled down, 1600px will be too small. So then I tried to do something like:
$square.css('width', (viewportWidth*negscale) + 'px');
where negscale is 3-(2*scale), so for example if I scale the page to 0,5 (which means it is half the size), negscale would be 2, so the square would have a width of 2 times the width of the viewport.
Now the weird part is that for 0,5 and for 1 it works perfectly fine, but for every scale in between the width of the div is somehow too big. I really can't think of any reason why this could be.
Does anyone have an idea what I am doing wrong or has another way of finding out how wide the div has to be to fill 100% of the viewport?
i'm try to determine the amount to scale down an image, which is in a container with other fixed height text fields, based on the resizing of a window to layout the container contents.
in this problem i'm only concerned about height, so when i mention scale, i'm refering to the height scale or scaleY.
in the diagram below:
Blue = Resizable main window.
Green = Resizable Container within main window.
Red = Fixed-height text fields (non-scalable).
Black = Scalable image.
the contents (text fields and image) fill the container, so the green container can represent the height of the text fields and image, or at least the difference between the first text field's y coordinate and the last text field's y coordinate and height.
resizing the window larger than the green container will have no affect on the green container and it will remain its current size. however, resizing the window smaller must change the container size to fit. i only have access to the image height. so resizing the window smaller will also scale the image height. the new scaled image height will determine the height of the container that includes the fixed height text fields.
Problem: after resizing the window to a lower height, how can i find out how much to scale the image (between 0.0 and 1.0) so that the fixed height text fields remain as distant from each other and the container is resized so its bounds remain equally distant (10px apart in this diagram) from the window.
image.scaleY = ...
Reducing window size by dh pixel must also reduce the image height by dh pixel in order to maintain all other absolute values.
Thus, the scaling factor is (given image_height is the current image height and dh is the number of pixels to reduce)
scale_y = (image_height - dh) / image_height
Just take the height of the resizable window (green), and subtract the sum of the fixed height components and the spacing between the components. The remaining space is what's available for the salable image.
Of course most UI toolkits include some tools to make this easy for you, like a table or grid layout that supports fixed and scalable cells, or a dock layout. If you can you should take advantage of this kind of features since it trends to be more performant/responsive.
I'm trying to make a fixed width, fixed height box that "mimics" overflow:scroll, but the scroll bar is actually the widow scrollbar (or a pseudo-window scrollbar). What I mean by that is, the box is sitting there and you have the scroll bar on the side of the browser scroll the box contents up and down. Possible with just css? If not, is there a solution with javascript?
Your box height is exceeding your window height. In following manner this could happen if you are in resolution 1024 by 768px
div style="width:400px; height:1000px; overflow:scroll;"
Solutions-
css- reduce height of the box
or
js- control height of the box [screen.Height] for different
resolutions