I have a panorama video that was created with a commercial product. I would like to scale the video to fit the browser width. The code in the web inspector is:
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" onload="pageInit();">
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent" width="1921" height="540>
To view virtual tour properly, Flash Player 9.0.28 or later version is needed.
Please download the latest version of <a href=" http:="" www.adobe.com="" go="" getflashplayer"="" target="_blank">
<embed type="application/x-shockwave-flash" src="twviewer.swf" style="undefined" id="sotester" name="sotester" bgcolor="#FFFFFF" quality="high" allownetworking="all" allowscriptaccess="always" allowfullscreen="true" scale="noscale" wmode="direct" flashvars="lwImg=&lwBgColor=0,255,255,255&lwBarBgColor=255,255,255,255&lwBarColor=255,0,255,0&lwBarBounds=1072,270,0,0&lwlocation=0&lwShowLoadingPercent=true&lwTextColor=255,0,0,0&buildSN=7.98.151110&iniFile=config_A303_Pano.bin&progressType=1&swfFile=&percentType=0&sizeFile=&href=http://caboleisure.com/panoramas/A303_Pano_Auto/_auto/flash/Tourweaver_A303_Pano.html&lwbounds=<!-%% videobounds %%->" height="540" width="1921">
</div>
<script type="text/javascript">
var jsReady = false;
function isJsReady() {
return jsReady;
}
function pageInit() {
jsReady = true;
}
function thisMovie(movieName) {
return document.getElementById(movieName);
}
function changeSceneOnLoad() {
var search = window.location.search;
var s = search.substring(1);
var arr = s.split("&");
var json = {};
for(var i = 0; i < arr.length; i++) {
var str = arr[i];
var key = str.split("=")[0];
var value = str.split("=")[1];
json[key.toLowerCase()] = value;
}
var firstValue = json['firstscene'];
var panoid = decodeURI(firstValue);
if(panoid != "undefined") {
if(thisMovie("sotester").twAPI) {
setTimeout(function() {
thisMovie("sotester").twAPI("switchToScene", panoid);
}, 500);
} else {
setTimeout(changeSceneOnLoad, 1000);
}
}
}
// <![CDATA[
var so = new SWFObject("twviewer.swf", "sotester", "1921", "540", "9.0.0", "#FFFFFF");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
so.addParam("wmode", "direct");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "");
so.addVariable("lwBgColor", "0,255,255,255");
so.addVariable("lwBarBgColor", "255,255,255,255");
so.addVariable("lwBarColor", "255,0,255,0");
so.addVariable("lwBarBounds", "1072,270,0,0");
so.addVariable("lwlocation", "0");
so.addVariable("lwShowLoadingPercent", "true");
so.addVariable("lwTextColor", "255,0,0,0");
so.addVariable("buildSN", "7.98.151110");
so.addVariable("iniFile", "config_A303_Pano.bin");
so.addVariable("progressType", "1");
so.addVariable("swfFile", "");
so.addVariable("percentType", "0");
so.addVariable("sizeFile", "");
so.addVariable("href", location.href);
so.addVariable("lwbounds", "<!-%% videobounds %%->");
so.write("flashcontent");
changeSceneOnLoad();
// ]]>
</script>
</body>
A url for the page is here: Panorama
I've tried a few suggestions, like the one described here:
Preserving aspect ratio for embedded iframes
but that doesn't work. I am actually using this page as an embedded iframe from another page, but if I can get his page to scale correctly that isn't a problem. Any suggestions would be appreciated.
Check if you've dimension properties like width, height. Set them to enlarge your screen
Related
I have embedded a page in a <iframe> as follows :
<iframe id = 'iframeid'
src="/qgis/index.html"
scrolling="no"
frameborder="0"
style="height: 100vh;
width: 100%"
onload="on_load(this)">
</iframe>
And here is the on_load function called once the iframe is loaded.
<script type="text/javascript">
function on_load(iframe) {
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
}
</script>
My problem is that the <iframe> enters a loop and the page is loaded once again, inside the <iframe>, and it goes like this indefinitely.
If you have the possibility to use jQuery you might try to change your function "onload" with :
$('document').ready(function(){
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
});
Because I'm wondering if your script is triggering the onload while it's still not ready.
I have tried your code and added a line befor your javascript
try it :
<iframe id = 'iframeid'
src="home.html"
scrolling="no"
frameborder="0"
style="height: 100vh;
width: 100%"
onload="on_load(this)">
</iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function on_load(iframe) {
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
}
</script>
can anyone help me to do this code works on Google Chrome?
It work's perfectly on IE.
Thanks.
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
function calcIframeSize() {
var altura = $("body", $("#frameExtraFields").contents()).height();
$("#frameExtraFields").height(altura);
}
$(document).ready(function() {
$("#frameExtraFields").ready( function() {
calcIframeSize();
});
});
</script>
</head>
<body>
<iframe src="frame.html" width="80%" height="600" id="frameExtraFields"></iframe>
</body>
</html>
Considering that your iframe loads a src on the same domain, the following should do it :
<script>
$(document).ready(function() {
$('#frameExtraFields').load(function() {
$(this).height($(this).contents().height());
});
});
</script>
<iframe src="/user/login/" width="80%" height="auto" id="frameExtraFields"></iframe>
Notice I removed the fixed height you set on the iframe element and setted it to auto instead.
See this fiddle
Solution:
I do use the below code for all browser which specifically look for chrome:
The .offsetHeight returns same value in chrome compared with .scrollHeight in rest of the browsers.
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (document.getElementById) {
newheight = isChrome
? document.getElementById(id).contentWindow.document.body.offsetHeight
: document.getElementById(id).contentWindow.document.body.scrollHeight;
}
Complete function to resize the iframe height:
function autoResize(id) //id = iframe-id
{
var newheight = 500;
var newwidth;
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (document.getElementById) {
newheight = isChrome ? document.getElementById(id).contentWindow.document.body.offsetHeight : document.getElementById(id).contentWindow.document.body.scrollHeight;
newheightVisible = newheight + 30; //Don't ask me why this, i am also wondering but it works
}
if (newheight != lastheight) {
jQuery("#" + id).css('height', newheightVisible);
lastheight = newheightVisible;
}
}
I've got a question in regards to javascript and dynamically displaying images to
form an animation.
The pictures I have are around 1360x768 in size and quite big despite being .png pics.
I've come up with a code for switching out the pics dynamically, but even run on a local
webserver it is too slow (thus sometimes I see the pic being built).
So my question is: is there a better way to do this than dynamically switching out
the "src" part of the image tag, or is there something else that could be done in combination with that, to make sure that the user doesn't have any strange phenomenons
on the client?
<script>
var title_index = 0;
function display_title()
{
document.getElementById('picture').src=
"pics/title_" + title_index + '.png';
if (title_index < 100) {
title_index = title_index + 5;
setTimeout(display_title,3000);
}
}
</script>
<body onload="setTimeout(display_image,3000)">
<image id="picture" src="pic/title_0.png"/>
</body>
Thanks.
I've had this problem too, even when preloading the images into the cache,
Google's The Hobbit experiment does something interesting. They do low resolution while animating and switch it for a hiresolution if you "pause" (stop scolling in the case of The Hobbit experiment). They also use the HTML5 canvas tag to smooth out the animation.
Here's their blog post about their method:
http://www.html5rocks.com/en/tutorials/casestudies/hobbit-front-end/
Their end product:
http://middle-earth.thehobbit.com
Edit:
Pre loading example:
<!Doctype html>
<head>
<title>test</title>
</head>
<body>
<canvas id="myCanvas" width="1360" height="768"></canvas>
<script type="text/javascript">
var images = {};
var loadedImages = 0;
var numImages = 0;
var context = '';
function loadImages(sources, callback)
{
// get num of sources
for(var src in sources)
{
numImages++;
}
for(var src in sources)
{
images[src] = new Image();
images[src].onload = function()
{
if(++loadedImages >= numImages)
{
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
var sources =
{
frame0: 'http://piggyandmoo.com/0001.png',
frame1: 'http://piggyandmoo.com/0002.png',
frame2: 'http://piggyandmoo.com/0003.png',
frame3: 'http://piggyandmoo.com/0004.png',
frame4: 'http://piggyandmoo.com/0005.png',
frame5: 'http://piggyandmoo.com/0006.png',
frame5: 'http://piggyandmoo.com/0007.png',
frame5: 'http://piggyandmoo.com/0008.png',
frame5: 'http://piggyandmoo.com/0009.png'
};
var width = 1360;
var height = 768;
var inter = '';
var i = 0;
function next_frame()
{
if(numImages > i)
{
context.drawImage(images['frame' + (i++)], 0, 0);
}
else
{
clearInterval(inter);
}
}
loadImages(sources, function(images)
{
//animate using set_timeout or some such...
inter = setInterval(function()
{
next_frame();
}, 1000);
});
</script>
</body>
Code modified from: www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/
You could overcome this issue by preloading the images on page load. This means that the images would then be stored in memory and immediately available to you. Take a look at the following:
JavaScript Preloading Images
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
I use the following code to achieve dynamic iframe height:
In the <head>:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
In the <body>:
<iframe name="myiframe" src="somepage.html" width="100%" frameborder="0"
scrolling="no" onload='javascript:resizeIframe(this);' />
</iframe>
This codes works fine with height increasing only. So, when the content inside the iframe increases in height, the iframe updates its height and increases with it.
The problem is with height decreasing or shrinking. When the content inside the iframe decreases, it doesn't decrease and causing big unwanted white space. This only occurs in Chrome, IE & FF works fine.
Here is my Page
I want to know how to make this code works to auto shrink iframe height when it decreases?
Screenshot one:
Screenshot two:
Update 1
I placed the following code in the <head>
<script src="jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
The iframe code in the <body>
<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0"
scrolling="no" /></iframe>
The iframe not showing in the page. It appears for one second and then disappears.
Update 2
I think The problem was the $ character before (function(){, I removed it. I'm sorry I don't have much experience with jquery. I updated the page and removed the onload="resizeFrame()" but the iframe doesn't act dynamically now.
Problem Solved
I was digging in the internet and I found a code solved the whole problem for me. I would like to share it so anyone can use it in order to get dynamic iframe height.
First, put the following code between the <head> tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(myiframeid) {
var ifrm = document.getElementById(myiframeid);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>
<script>(function(run){
for (i=0;i<frames.length; i++) {
var f1 = document.getElementsByTagName('myiframename')[i];
if(!f1 && window.addEventListener && !run){
document.addEventListener('DOMContentLoaded', arguments.callee, false);
return;
}
if(!f1){setTimeout(arguments.callee, 300); return;}
f2 = f1.cloneNode(false);
f1.src = 'about: blank';
f2.frameBorder = '0';
f2.allowTransparency = 'yes';
f2.scrolling = 'no';
f1.parentNode.replaceChild(f2, f1);
}
})();
</script>
Second, the Iframe code in the <body> :
<iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%"
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' />
</iframe>
Third and Last, the CSS:
#myiframeid{
width: 100%;
}
Note: You should have Name and ID for the Iframe.
Compatible with all browsers (Chrome, Firefox, IE).
Have a good day!
I wrote a little library that deals with all these issues and keeps the iframed sized when the content changes or the browser window is resized.
https://github.com/davidjbradshaw/iframe-resizer
I thought about it quite a bit, and think I came up with another solution that may resolve your problem from the parent document. Rather than editing the documents in your iframe. However I can't test it due to cross origin policy. Try this out and let me know how it works.
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
Hope this does it for you.
Edit: This fix would require you to remove the onload="" function.
Edit-2: You seem to have combined the two scripts. You have this:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
}
Replace that entire script with this:
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
And remove the onload="resizeFrame()" from the iframes tag.
Well I am coding a little game with js using a HTML5 canvas. I got the canvas and the tag in a html file and the javascript in a seperate file called java.js.
I got some alerts at some moment in the script to find out if it runs when I load the html into my browser. Problem is it does not show any of these and the javascript doesnt load.
The weirdest is what firebug does: Under "HTML" it shows me the full script when I click the tag, but under "Script" it tells me there is no javascript on the page.
Help?
my html:
<body><canvas id="canvas" width="1000px" height="500px" style="border:1px solid #c3c3c3;">text</canvas>
<script type="text/javascript" src="java.js">
</script></body>
When I put the script tag in the head:
<head><script type="text/javascript" src="java.js">
</script></head>
<body><canvas id="canvas" width="1000px" height="500px" style="border:1px solid #c3c3c3;">text</canvas>
</body>
my js:
alert('define');
var scrollx=0,
scrolly=0,
keyID=0,
global = {};
global.players=[];
global.playermap=[];
var c=document.getElementById("canvas"),
ctx=c.getContext('2d');
alert('init');
function pony (x,y, hspd, vspd) {
alert("pony created!");
this.x = x;
this.y = y;
this.vsp = vspd;
this.hspd = hspd;
this.image = new Image();
this.image.src = "alien.png";
this.framenumber = 11;
this.frameactual = 1;
this.framespeed=0.8;
this.frametime =50;
this.framewidth = this.image.width / this.framenumber;
this.frameheight = this.image.height;
this.colorbody="#000000";
//
this.nextframe = function() {
this.frameactual=this.frameactual+this.framespeed;
if (Math.round(this.frameactual)>this.framenumber){this.frameactual=1;}
this.draw();
};
//
this.draw = function() {
this.frame=Math.round(this.frameactual);
ctx.drawImage(this.image,(this.frame-1)*this.framewidth,0,this.framewidth,this.image.height,this.x-scrollx-(this.framewidth/2),this.y-scrolly-(this.image.height/2),this.framewidth,this.image.height);
};
//
//var _this=this;
//this.frametimer=setInterval(function(){_this.nextframe();},this.frametime);
alert("time set");
}
//
function setpos_player(id,x,y,hspd,vspd){
alert("this");
if (typeof(global.playermap[id])=="undefined"){
global.players.push(new pony (x,y, hspd, vspd));
global.playermap[id]=global.players.length;}
else{
global.players[global.playermap[id]].x=x;
global.players[global.playermap[id]].y=y;
global.players[global.playermap[id]].hspd=hspd;
global.players[global.playermap[id]].vspd=vspd;}
}
//
function clear(){
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.rect(0,0,1000,1000);
ctx.closePath();
ctx.fill();}
document.onkeypress = KeyCheck;
document.onkeydown = KeyCheck;
document.onkeyup = KeyRelease;
function KeyCheck(e)
{
keyID = (window.event) ? event.keyCode : e.keyCode;
}
function KeyRelease(e)
{keyID=0;}
//
function step(){
clear();
for (var i = 0; i < global.players.length; i++) {
_this=global.players[i];
_this.y+=_this.vspd;
_this.nextframe();
//Do something
}
//global.players[1].nextframe();
timer=setTimeout(function(){step();},80);
}
setpos_player(1,200,200,0,1);
var timer=setTimeout(function(){step();},80);
Seems you have an error here:
if (typeof(global.playermap[id])="undefined"){
should be
if (typeof(global.playermap[id])=="undefined"){
also, try replacing all alert calls to console.log and then check out the console for errs
declare script before you use it in the html
you can put that script in head of the page like this
<head>
<script type='text/javascript' src='java.js'></script>
</head>
try it once and replay here
if (typeof(global.playermap[id])="undefined"){
to
if (typeof global.playermap[id] == "undefined"){
Try to put the right directory path for the .js file. For example it may be /java.js or "/scripts/java.js".
The indication if javascript is loaded will be if your alert pops up.
Also, you should know that script tags, with external .js should be added in HEAD section.