Display div on fullscreen

[hassanalbudairiqts]

Hi I am trying to display a div ( $("#elrfvrtecont") on top of panorama fullscreen. I read your response for a similar question (https://github.com/mpetroff/pannellum/issues/726#issuecomment-483444156) and from what I uderstood, i did the following in my code

$("#elrfvrtecont").appendTo($("#panorama")); //this is to make the div a child for the panorama container.
viewer = pannellum.viewer('panorama', {
    "type": "multires",
    "autoLoad": true,
    "compass": true,
    "northOffset":current_img_dir,
    "autoLoad": true,
    "pitch":p,
    "yaw":y,
    //"minPitch":0,
    //"maxPitch":0,//to stop rotation in vertical direction when turn around
    "multiRes": {
        "basePath":current_img,
        "path": "/%l/%s%y_%x",
        "fallbackPath": "/fallback/%s",
        "extension": "jpg",
        "tileResolution": 512,
        "maxLevel": 4,
        "cubeResolution": 3496
    },
    //"hotSpotDebug": true,
        "hotSpots":hotspots
});

this shows the div (#elrfvrtecont) on the panorama in both standrad and fullscreen. But once I move to the next image (using direction hotspots), the appended div (#elrfvrtecont) disappread (again on both standard and fullscreen)!. Any idea please?

[mpetroff]

Pannellum doesn't remove any elements you append to the container. The issue is elsewhere in your code.

[hassanalbudairiqts]

Thanks for your reply I doubled checked my code and noticed that when I move to the next image I destroy the pannellum viewer and then build the new viewer as follows: var dir = "up"; viewer.destroy(); imageview(imgup,dir,$elr2,$elr_add,$img_dir); //this will build a viewer with the new image.

if I used viewer.destroy() then the div (#elrfvrtecont) will disappear as I explained before. If I remove viewer.destroy() then the div (#elrfvrtecont) will stay as I wanted. I tried to call the append function after destroy the viewer and before build the new one as follows: var dir = "up"; viewer.destroy(); $("#elrfvrtecont").appendTo($("#panorama")); imageview(imgup,dir,$elr2,$elr_add,$img_dir);

But the div (#elrfvrtecont) will disappear once I start moving between images. Any idea how to solve this? would it be a problem if I do not destroy the viewer before I move to the next image? I noticed this will slow down the uploading of new images significantly. I need to use hotspots with this so might not be able to use addSence and removeSence as in this issue (https://github.com/mpetroff/pannellum/issues/763)

Thanks

[mpetroff]

I would strongly advise against destroying and then creating new viewers. You can use hot spots with the addScene method, which is what I would recommend using. It takes a full scene configuration, so I'm not sure what made you think you couldn't use it with hot spots.

[hassanalbudairi]

Hi again, would it be possible to use fullscreenchange to display a div (only on Fullscreen mode)? could you please give me an example on how can I use fullscreenchange for this purpose? I am trying to display a VR button that will only be shown on Fullscreen. I am trying to use a-frame so I can use a VR headset to view panorama (in Fullscreen) and to navigate between panoramas

Kind regards;

[mpetroff]

viewer.on('fullscreenchange', function(isFullscreen) {
    if (isFullscreen) {
        // Code to show the button goes here
    } else {
        // Code to hide the button goes here
    }
});

@hassanalbudairi: If you're the same person as @hassanalbudairiqts, please only use one account.