Hi there,
I want to make my canvas responsive in computer and tablet and mobile. So I have started with my canvas and I succeeded. But now I would like to make my VrIconButton (icon of VRExperienceHelper) and I have succeeded to make the VR button in different size in function of the size of the screen. My problem: When I rotate , I can’t move the VR button, he is still in the same place, even if I set the css style top at 0, when I console it, it shows “0px” for top value, but on the inspector, it is still the same value that before. But When I update the page, the css is good… Because I did some different case of the size’s screen. It’s only when I am rotating the mobile (in the both way landscape->portrait and portrait-> landscape). I have tried " @media screen and (orientation: landscape)" but no success. Here is my code:
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.2);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.2);
if(deviceType=="desktop")
{
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.11);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.08);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.9 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
$(window).on("resize", function(){
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.11);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.08);
})
}
else if (deviceType == "mobile")
{
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.1);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.18);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.8 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
if($(window).height() < 450)
{
console.log("<450")
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.2);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.1);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.9 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.8 , position:'absolute'});
}
else if($(window).height() >= 450 && $(window).height() < 600)
{
console.log("<600 & >450")
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
}
else if ( $(window).height() < 700 && $(window).height() >600)
{
console.log("<700 >600")
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
}
$(window).on("resize", function(){
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.1);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.18);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.8 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
if($(window).height() < 450)
{
console.log("<450 moove")
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.2);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.1);
vr.style.top = "0px" // vr is the vr Button pick up before with BabylonJS code
//$("#babylonVRiconbtn").css({left:0 , top:0 , position:'absolute'});
//document.getElementById("babylonVRiconbtn").style.top = '-1000px';
console.log("top: ", document.getElementById("babylonVRiconbtn").style.top)
}
else if($(window).height() >= 450 && $(window).height() < 600)
{
console.log("<600 & >450")
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
}
else if ( $(window).height() < 700 && $(window).height() >600)
{
console.log("<700 >600")
$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left +
$("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top +
$("#renderCanvas").height()*0.85 , position:'absolute'});
}
})
}
My problem is only on mobile.
I have also tried :
$( window ).on( "orientationchange", function( event ) {
if($(window).width() > $(window).height())
{
console.log("portrait")
}
else
{
console.log("landscape");
$("#babylonVRiconbtn").css({left:0 ,top:0, position:'absolute'});
console.log("top: ", document.getElementById("babylonVRiconbtn").style.top)
}
});
Thank you for your help.
Mathieu