Div to be full screen

JavaScript
1

Dear All,
In my body I got two div like below. Then I got a button in the map div which call the fullscreen function to make it full screen. The problem I notice the div becomes 100% but the left div still is visible and stays in the position. How to overcome this? Thank you.

<body>
<div id="left" style="position:absolute;top:0px;left:0px; width:220px;">
<div id="map" style="position:absolute;top:0px;left:250px; width:780px; height:100%">Map goes here.
 </div>
</body>

Javascript function

function fullScreen()
{            		
    var mydiv = document.getElementById("map");
    mydiv.style.width = '100%';
 }
2

You have a few options:

  1. In your CSS, give #map a higher z-index than #left.
  2. In fullScreen() give #map a higher zIndex.
  3. In fullScreen(), set #left’s display = “none”

Any of these methods should solve your problem, but I would personally choose either the pure CSS (z-index) or use javascript to display:none on the left.

Keep in mind, if you use the JS solution to set left to display:none, if you have a function to leave full screen you will need to modify it to set #left’s display back to block.

3

Dear Zarin,
I have tried your suggestion below is my new codes I purposely put display:none in the left div but the space still exist for it.

<div id=“left” style=“display:none;top:0px;left:0px; width:220px;”>

</div>
<div id=“map” style=“top:0px;left:250px; width:780px; height:100%”>Map goes here.
</div>

function fullScreen()
{
document.getElementById(‘left’).style.display=‘none’;
var mydiv = document.getElementById(“map”);
mydiv.style.width = ‘100%’;
}

Just for testing purpose I tried document.getElementById(map).style.display=‘none’; and it work well the map div is not visible. Why the left is not able to be made invisible?

4

My mistake, you will also need to change the left property of the map which currently positions it 250 pixels from the edge of the browser.


function fullScreen()
{
document.getElementById('left').style.display='none';
var mydiv = document.getElementById("map");
mydiv.style.width = '100%';
mydiv.style.left = 0;
}

Try that.

5

Dear Zarin,
Thank you that works perfectly. Do I need to change the position property?

6

You shouldn’t have to, just make sure that if you have a function to exit fullscreen you revert all the changes you made in fullScreen().

If you have any more issues related to HTML, CSS, Javascript, PHP or MySQL, feel free to PM me. I’m here to help!