SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div to be full screen

    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.
    Code:
    <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

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

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

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

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Zarin,
    Thank you that works perfectly. Do I need to change the position property?

  6. #6
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •