Is their a way to keep Unity active in a jquery tab so that when the user clicks on a lets say info tab about the game, he can read some html but the player tab still has the game running or suspended so it doesn’t have to reload the unity player?
Application.runInBackground = true;
If you want the game to keep running when you switch tasks or whatever. I don’t know exactly how this affects the web-player though. I don’t know what you mean by jQuery tab but I am assuming the game will just keep running as it’s not getting unloaded, it’s just getting put somewhere else. I would suspect that moving the Unity web-player with CSS and Javascript wouldn’t work very well though…
Thanks for the info, for tabs im using Tabs | jQuery UI pretty nice system setup…I just want to make sure if I have the unity player in one tab that when i click back to it it doesn’t auto load again etc…
If the player is just getting hidden with CSS (which is what appears to be happening with those tabs) then I assume it wont be a problem. I am not sure though as I’ve never tried it. Only one way to find out!
Have you figured out a way?
I did a quick test with just an image and the unity player trying to swap those two out (two div elementes which you toggle between). In that case I had to set the display style of the element that I didnt want to show to “none” (that way they dont take up any space). But doing so makes the unity player reload every time.
This was not a jquery test but just a quick html test
<script type="text/javascript">
var hidden = true;
//toggle between div element with the ID "unityPlayer" and the div element with the ID "placeholdercontent"
function Toggle()
{
//alert("Toggle called");
if (hidden)
{
document.getElementById('unityPlayer').style.visibility='visible';
document.getElementById('unityPlayer').style.display='inline';
document.getElementById('placeholdercontent').style.visibility='hidden';
document.getElementById('placeholdercontent').style.display='none';
hidden = false;
}
else
{
document.getElementById('unityPlayer').style.visibility='hidden';
document.getElementById('unityPlayer').style.display='none';
document.getElementById('placeholdercontent').style.visibility='visible';
document.getElementById('placeholdercontent').style.display='inline';
hidden = true;
}
}
function Init()
{
Toggle();
}
</script>
Anybody else have any sugestions?
Nice try, hmm, I need to test the code looks good, but im still a bit new to jquery so slowly figuring it out… its not that hard just havent had a lot of time to dig into it.
I’m sure people have run into this issue before, I’m not 100% sure why the my tab for player when clicked on reloads Unity again… I tried to enable jquery cache for tabs but that didnt seem to work.
Some people have done things like re-size the player to 1 pixel and display html stuff over that area, which works but not when the user clicks though your tabs… and by tabs im not talking browser tabs but html page tabs.
So I did a bit more testing. It seems that if you want the player to be continue being open you have to set the position of the unity player to be absolute and then set the left to some large negative value (this will move it out of the screen).
This code works.
<script type="text/javascript">
var hidden = true;
function Toggle()
{
if (hidden)
{
document.getElementById('unityPlayer').style.visibility='visible';
document.getElementById('unityPlayer').style.position='static';
document.getElementById('unityPlayer').style.left='0px';
document.getElementById('placeholdercontent').style.visibility='hidden';
document.getElementById('placeholdercontent').style.display='none';
hidden = false;
}
else
{
document.getElementById('unityPlayer').style.visibility='hidden';
document.getElementById('unityPlayer').style.position='absolute';
document.getElementById('unityPlayer').style.left='-10000px';
document.getElementById('placeholdercontent').style.visibility='visible';
document.getElementById('placeholdercontent').style.display='inline';
hidden = true;
}
}
function Init()
{
Toggle();
}
</script>
The left style should be ignored by the browser when position is set to static, but just in case I set it anyways.
It is also posible to do the same trick using jquery tabs by changing the hide style for the tabs:
(From jquery docs. the first section under Why does…)
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
EDIT: This ofc only works in all major browsers except FF4 (havnt tested earlier versions)
EDIT2: It should be said that I am looking for a way to have “tabs” but have the player running continuesly in the background while viewing another tab
So the only reliable way I have found that works in all browsers is to set the hight of the unity player to 0px. But I dont know how this would work with JQuery tabs (Im gussing it would not work out of the box).
so to recap:
height = 0px => works in all browsers and will keep the player running continuesly. Might give problems if used with JQuery tabs out of the box if you want player to run continuesly.
visibility = hidden/visible => works in all browsers and the player will run contiuesly, but the elements cannot occupy the same space.
visibility + display = hidden/visible + inline/none => works in all browsers, but it will cause the unity plyer to reload when being shown again. You can use this if you do not need the player to run contiuesly.
visibility + position = hidden/visible + absolute/static => works in all browsers and will keep the player running continuesly except in FireFox where it will reload when shown again.
hmm yea i was unable yet to get it work with jquery tabs, im looking trying to reach the unity div in the tab to see if i can size it to 0 but it seems to reload… uggg… any thoughts?
Hmm no not really.
maybe if you change the way tabs are hidden it will work. e.g. change the style to include height=‘0px’. It is a long shot but if it works it would be the easiest workaround.
.ui-tabs .ui-tabs-hide {
height='0px';
visibility='hidden';
}
Other than that the only solution is if it is posible to somehow have the unityplayer outside the tabs and the make it position itself so it seems it is inside the tab (and of course use the height = 0px trick).
can u upload and show what u made ??? i tried to bring js above unity but i am not successful , i tried n number of ways but it works differently for different browsers
I don’t know how to do that with jquery, but I did something similar with mootool. hope that the concept will be useful to you too.
http://www.youtube.com/watch?v=isVk66POSIo
tips: for hidding the CSS frame, you may scale the
that contain the web-player to 1 x 1 pixel and move it within somewhere in the browser (basically no one knew that :p). so that, the unity player with kept active and don’t need to set into “run on background” mode.
i think for now , only this is the way…well u have any package ? like this u showed me >
Well, that is no “package” out there, since that is done in purely javascript in html. No, code involved within the unity. When you check with the view source of the web-player that I have mentioned in the youtube page, you should see the following, and that’s all 
<!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" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript" src="unityobject-0.5.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function slide_open(page, hash)
{
var s = $('u3d').getSize();
$('u3d').tween('width', [s.x, 580]);
$('content').load(page);
window.location.hash="#"+hash;
}
function slide_close()
{
var s = $('u3d').getSize();
$('u3d').tween('width', [s.x, 1090]);
$('content').load('null.html');
}
function slide_out()
{
var p = $('u3d').getPosition()
if (p.x < 0)
return;
var s = $('u3d').getSize();
$('u3d').tween('left', [0, -s.x]);
}
function slide_in()
{
var p = $('u3d').getPosition()
var s = $('u3d').getSize();
if (p.x > -s.x)
return;
$('u3d').tween('left', [-s.x, 0]);
}
</script>
</head>
<body>
<div style="position:absolute; left:8px; top:4px;">
<button type="button" onclick="slide_open('what-is.html', '')">open1</button>
<button type="button" onclick="slide_open('image.html', '')">open2</button>
<button type="button" onclick="slide_open('flash.html','gallery.xml')">open3</button>
<button type="button" onclick="slide_close()">close</button>
<button type="button" onclick="slide_out()">out</button>
<button type="button" onclick="slide_in()">in</button>
</div>
<div id="u3d" style="position:absolute; left:0px; top:32px; width:1090px; height:500px; z-index:2;">
<script>
uniObj = new UnityObject("pano_cam_v001.unity3d", "Unity", "100%", "100%");
uniObj.write();
</script>
</div>
<div id="content" style="position:absolute; left:590px; top:32px; width:500px; height:500px; z-index:1;"/>...</div>
</body>
</html>
Remark: Since the test has been done long time ago, so that, you may better go to the MoolTools site to download the latest framework (PS, I’m so sure, jQuery could do that too, but I never try yet :p). Also, they are using the old “UnityObject” from the Unity Community Wiki, it maybe some difference when you replace it with the updated Unity’s “unityObject” for 3.x.
Good Luck
I played around a bit today, first time this week I can look into jquery a bit.
I tested this code on the page using jquery scale.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "scale",
{percent: 200, direction: 'horizontal'}, 2000 );
});
$("#show").click(function(){
$(".content").show( "scale",
{percent: 200, direction: 'vertical' }, 2000 );
});
});
</script>
html part
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>
</div>
of course you have to load jquery up at the top…
this scales the player or hides it, but when showing it again it reloads the unity player… so somewhere in jquery or how js handles some callbacks makes unity think it needs to reload …
more to come and ill focus on what unity avail visibility tags are…