I need to create block with fixed width and fixed height dinamically (with javascript). Width needs to be a 100% of document body width, and height needs to be a 100% of document body height. In other browsers all is fine, but Firefox Mobile have a top bar (wich I belive have affect on height of document), so all height calculations on document loading are wrong. When I scrolling page down this top bar hides, and I can see height of my block is shorten then I need...
Is there any solution? Thanx in advance!
Try to use this:
$(window).width();
$(window).height();
Should work.
Related
THe thing is we need iframe, so the partner can just add url and we can control what is displayed in it without needing to have their website code.
If not iframe, it looks ok.
But with iframe it is a problem - window height is always bigger than width. And various methods just thinks that its portrait. As I understood the heihgth is how much content there is and iframe does not have scrolls. So iframe for my code is like browser window, not parent real browser window.
There have been various questions, but I still not able to find working solution.
Update:
I found how to make it not go over in height - on window load, take window height and set that height to the div and overflow: scroll. So whole window does not get more high and so iframe does not get so high. On load window height is the initial iframe height. Still not managed yet to detect orientation correctly, because now for some reason when portrait - width is still higher than height, with is 960, at least that what javascript see, but in reality it is not going over boundaries, which are 768px.
Now tried to find out who make it have 960px. And went to this:
function test2() {
?>
<iframe src="" width="100%" height="100%"></iframe>
<?php
}
this is empty content with 100% width, and why it is 960px? Not only for ipad, but using chrome emulation, I see its for other popular mobile devices also.
So if height is lets say 500, and widht is 960, it thinks that its landscappe. But in real ipad does not have 960px width, it has 768. And does not go wider even when javascript detects 960. How can this be?
Update:
To detect widht I use:
$(window).load(function(){
var width = $(this).width();
});
and it gets wider screen width. Maybe iframe is wider and has horizontal scroll, but iPad does not draw a scroll but it is possible to move it horizontally while parent page stays same position.
But just checked with test page iframe - iPad does not let scroll horizontally and page fits in the iframe but still it detects window width 964px, while it should be 768
ALso in the testing page, iframe is in the div, div has style width: 768px !important;
and iframe also has style width: 768px !important;
and still iPad shows width 964 :)
Update:
Currently solved on partner page in hacky way: intially one of the inside divs I make css width: 300px, and then so I get good window widht. Then since I want wide 85%, I multiply widow width * 0.85 and set it to that div which I want to be wider. Earlier I tried to achieve the same with css widht: 85% which caused to become wider than screen. Still this does not make sense, but works.
Use this css on parent container:
height: 500px !important;
width: 900px !important;
overflow: auto !important;
-webkit-overflow-scrolling:touch !important;
I need Javascript to fix the iframe height dynamically according to available height in the browser ?
Is this what you are looking for?
$(function(){
//sets the height of the iframe to the height of the browser viewport
$("#idOfIframe").height($(window).height());
}
Hi There: Are any of you aware of a method for taking the vimeo embed code and making it scale to 100% of a page? Here is an example of what I'm looking to do.
http://player.vimeo.com/video/4643702
Please let me know!
Thanks
Setting width="100%" will set your height to something smaller that you want in most cases. And setting height="100%" will not preserve your aspect ratio.
What I suggest you do:
set position of to fixed or absolute (see what suites you the most)
set width and height of to the same as video file is
use JS or jQuery on document.ready to set aspect ratio for using
his attributes width and height
set it's width to 100% of the screen
set it's height to width that multiplies aspect ratio from above
handel window.resize event, because maybe in some cases width will be smallet than height so you must set height to 100% and recalculate the width
How do I find out the coordinates of the web page / document that is currently visible on my browser? For example, $(window).height() returns 700 and $(document).height() returns 3,000 i.e. my document is longer than the browser's height. I'd like to find out, after interacting with the page (e.g. scrolling), which area of my document is currently visible.
Thanks!
If you use jQuery you could do:
$(document).scrollTop();
http://api.jquery.com/scrollTop/
You could use
window.innerHeight
Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
window.innerWidth
Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
im using 960 and i want to adjust the nr of columns depending on the user's screen size.
how do javascript/jquery get the resolution of the screen?
screen.width will tell you the screens width. Or maybe screen.availWidth would be better. Note also that with jQuery you can get the $.width() and $.height() of items: $(window).width() for instance will tell you how wide your window is.
I would argue that screen size doesn't matter. What matters is how wide their viewport for your page is. They could have a 3000px across screen, but be viewing your page with only 1000px wide browser window.
In jQuery you can get the viewport width like this:
$(window).width()