Today I faced some really stranger bug. For example: my site opens in the iframe(this iframe automatically fit all document space, width and height) inside this frame I need to get value of $(window).height(); and I get... Very big value(5000-10000px).
Demo link - http://bug-wheight.divshot.io/
Open this in your browser, then resize window one-two-times and look at counter. This value is not correct.
Info: bug detected in chrome, version 41.0.2272.118(mac). Safari on iOS 8.0.1 also returns very big values. Mozilla(ver. 35.0.1) returns small integers(is about 35px, what?). My screen size: 2560 x 1440.
And question: how I can get real window height value?
try add Document type definition in your html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
It will work fine.
Related
Is there a way to fit height of iframe to it's content? Would you show me how to do it?
I tried searching and trying out the codes on the net but no luck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="Description" content="Communigate Technologies" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />
<title></title>
</head>
<body>
<div align="center" style="z-index:1;">
<?php include 'header.html' ?>
<iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe>
</div>
</body>
</html>
Since we are in the age of CSS3, you can do this by using viewport units. These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. This is the user's viewport, also known as screen. However, in all major browsers I've tried it, if you put an iframe inside a div, which is inside another div and positioned relative, the viewport units are relative to this div. And since 100 viewport height units mean 100% height, you can do like this:
<div id="parent">
<div id="wrapper" style="position:relative">
<iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
</div>
</div>
I find this to be the best solution possible, since it is cross-domain, and displays exactly like you want it without any javascript or other complex stuff.
And most importantly, it works on all browsers, even mobile ones (tested on android and iphone)!
I do it this way:
document.getElementById("iframename").height = (document.getElementById("iframename").contentWindow.document.body.scrollHeight) + "px";
Sometimes this didn't work but I noticed it was because the page of the iframe wasn't completelly rendered.
In this case, and I never noticed any further problem, put the instruction inside:
setTimeout(function (){ - here - }, 100)
Hope I helped.
If you have the same origin for document and iframe content (and in your example, you have) you can run from your main document:
var iframe = document.getElementById('my-iframe')
var content = iframe.contentWindow.document.getElementById('content')
var height = content.offsetHeight + 15 //add something to support paddings etc.
iframe.style.height = height + 'px'
var width = content.offsetWidth + 15
iframe.style.width = width + 'px'
But inspect the size of your 'content' element you adapt to, because often the element is much greater than the visible content.
I wrote the following code in JavaScript to open a popup window when a button is pressed, and then use setInterval to move the window every 2 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title> Javascriptin' Some Codes </title>
<script>
function hi() {
var printOut = window.open("http://www.google.com","_blank", 'height=200, width=200');
setInterval(function() { printOut.moveBy(10,10);}, 2000)
window.alert("hi");}
</script>
</head>
<body>
<button onclick="hi()"> Try me </button>
</body>
</html>
The window opens, but the setInterval doesn't appear to work- the window does not move after being launched. I was wondering why my code doesn't work, and what I could do to make it function the way I'd like it to.
The opened url has to be on the same domain as stated in this answer (DEMO).
For example on jsfiddle, this works:
var printOut = window.open("http://fiddle.jshell.net","_blank", 'height=200, width=200');
And that one doesn't:
var printOut = window.open("http://www.google.com","_blank", 'height=200, width=200');
You should also remove the alert, although it works in chrome it seams to break it in for example opera.
I create an empty popup window to which I write html code, including a title tag. This has worked before on all browsers, but Safari 5 or 6 do not work.
The code (minimized example code):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Main Window Title</title>
</head>
<body>
<p>The main page opens a second window:</p>
<SCRIPT language="JavaScript" type="text/javascript">
myWindow = window.open();
myWindow.focus();
myWindow.document.write("<html><head><title>The Other Window Title<\/title><\/head><body><p>Some text<\/p><\/body><\/html>");
myWindow.document.close();
</SCRIPT>
</body>
</html>
In Firefox this results in a main page titled "Main Window Title" and a second window titled "The Other Window Title".
But in Safari, the second window's title remains the generic "Untitled".
To me, the Safari behavior appears to be a bug, but I wonder if there is a way to make it work anyway?
(If I supply an url parameter to the window.open, where the url is a web page with a title tag, then it displays correctly, but I do of course not want that since I want it to be dynamically created.
I also tried inserting myWindow.document.title = "A new title"; but it did not have any effect in Safari, (but it has in Firefox).)
Make the url about:blank
Example:
var myWindow = window.open("about:blank")
I'm fairly new to programing, especially javascript. I have created what I am regarding as an net-art project that refreshes a browser and cycles through a series of images. I want the browser window to automatically resize to the dimensions of the images, 612x612 px. I've tried everything I can think of, everything I've come across on the web, and nothing seems to work with the code I have set up for the refresh and image load. I need assistance.
Let me say that I am normally against such unser unspecified browser resizes or any intrusive script that doesn't allow the user to make that decision on his/her own. But this is an art project and will only exist as part of a gallery on my own website and the user will be warned ahead of time, before clicking the link, that their browser will resize.
What I want is for the browser to resize to the specified dimensions when the page loads, then cycle through the images, via the automatic refresh.
So please, anyone who would be willing to offer their assistance with this I would be very very grateful. I've gotten pretty far I think and this resize is the last little bit of the puzzle. Thank you in advance.
You can see the rough project with no resize here: http://jasonirla.com/bgchange%202/
and the code I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="title" content="Background Change" />
<meta name="description" content="Background Change" />
<title>Everyday Sky</title>
<script type="text/javascript">
// auto refresh window PT 1
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// no. of images in folder is 43
var totalCount = 43;
// change image on refresh
function ChangeIt() {
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpeg';
}
</script>
</head>
<!-- Refresh PT 2 with timer in seconds 5000=5seconds-->
<body onload="JavaScript:timedRefresh(100);">
<script type="text/javascript">
ChangeIt();
</script>
<style type="text/css">
body {
background-repeat: no-repeat;
}
</body>
</html>
It's true, you can only set the size of a browser window by creating a new window with JavaScript but many security settings will block pop-up windows. I think it's bad UI design to do what you're attempting anyway. If you really want something modern and highly functional, Lightbox (as mentioned above) is a great tool as well as the dialog box in the jQuery UI.
Since this for an exhibition, you will choose what browser to use but most new browsers dont let JavaScript resize them anymore. Worth a try, though.
<body onload="JavaScript:timedRefresh(100);resizeTo(500,500);self.moveTo(640,10);>
....
</body>
Cheers.
i have a swf file of width 1000 and height 700. i want to show the swf file in full screen of the browser it self (not like videos plying full screen).
i tried like the following
1) get user screen width and height using java script using the functions available (screen.availHeight and screen.availWidth) the screen size is available by using the functions but not applying to the flash object
2) tried giving 100% for both height and width in object code that also not working
can any one help me on this please.
Thanks in advance.
Use swfobject to embed your flash and configure so that it fills 100%.
Check first question on the faq here SWFobject faq
Changing the dimensions on the embed/object HTML should do the trick.
Otherwise, here's some resources:
http://www.kirupa.com/developer/mx2004/fullscreen.htm
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
http://www.bezzmedia.com/swfspot/tutorials/flash8/True_Fullscreen_Flash_Mode
Use this for your html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("MySwf.swf", "swf_container", "100%", "100%", "10.0.0");
</script>
</head>
<body>
<div id="swf_container">
</div>
</body>
</html>
And add that swfobject.js file to bin or bin-debug or wherever it needs to go.
All that's really required is that swfobject.embed javascript call, specifying percent sizes and the flash player version.
Hope that helps,
Lance