locked
How to make an App Bar over an iFrame? RRS feed

  • Question

  • I am playing around some windows 8 stuff and wonder how I can do the following in a windows 8 app.
    1. Display a web page.
    2. Implement a metro style app bar over the web page. 
    Here is my default.html:
        
    <body role="application">
        <div style="z-index:2;">
            <div id="standardAppBar" data-win-control="WinJS.UI.AppBar" disabled="false" aria-label="Command Bar"
                data-win-options="{position:'bottom',transient:true,autoHide:0,lightDismiss:true}" >
                <div class="win-right">
                    <button onclick="sdkSample.displayStatus('Add button pressed')" class="win-command">
                        <span class="win-commandicon win-large iconAdd"></span>
                        <span class="win-label">Add to Menu_1</span>
                    </button>
                </div>
            </div>
        </div>
        <div style="z-index:0;">
            <div data-win-control="WinJS.UI.ViewBox">
                <div>
                    <!-- taking Apple.com as an example -->
                    <iframe class="fullscreen" src="http://apple.com" />
                </div>
            </div>
        </div>
        </body>


    And here is my css for "fullscreen"
       
    .fullscreen {
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:80%; /* leave 20% white space to right click to toggle App Bar */
        }
    Usually, the App bar can be toggled by right-click. 
    But in the above code, right click doesn't work on the iFrame.
    So I had to leave a 20% white space for me to click on to toggle the white space.
    But I really want to make it to be fullscreen.
    Anyone? Thank you very much.
    Note: If you are on a touch device, the App Bar can actually be toggled by swiping your finger from the outside of the screen to inside of the screen. So that works just fine. But not for right-click. So this post is asking right click option. Thank you very much in advance.



    • Edited by Louis_PiG Saturday, December 31, 2011 12:03 AM
    Friday, December 30, 2011 11:58 PM

Answers

  • Louis,
    You can add an overlay div that covers the iframe.  Then you will get the appbar responding to the click.  Overlay div and style:
     
    <body role="application">
        <div class="overlay">
    
        </div>
    .overlay {
    
      position:absolute;
      top:0px;
      background-repeat:no-repeat;
      width:100%;
      height:100%;
    
     }
     

    Jeff Sanders (MSFT)
    Wednesday, January 4, 2012 9:23 PM
    Moderator
  • <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar"
    
                data-win-options="{position:'bottom', transient:false, autoHide:0, lightDismiss:false}">
    
                <div class="win-left" style="padding-left: 5px">
    
                    <button id="backButton" class="win-command">
    
                        <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Back</span>
    
                    </button>
    
                </div>
    
            </div>
    
            <div data-win-control="WinJS.UI.ViewBox" style="width: 100%; height: 100%">
    
                <div style="float: right; width:50%; height: 50%; background: transparent; color: red; z-index: 20;"></div>
    
                <div >
    
                    <iframe id="pageFrame"/>
    
                </div> 
    
            </div>
    


    • Edited by Louis_PiG Monday, January 30, 2012 8:00 PM
    • Marked as answer by Louis_PiG Monday, January 30, 2012 9:48 PM
    Monday, January 30, 2012 7:59 PM

All replies

  • Louis,
    You can add an overlay div that covers the iframe.  Then you will get the appbar responding to the click.  Overlay div and style:
     
    <body role="application">
        <div class="overlay">
    
        </div>
    .overlay {
    
      position:absolute;
      top:0px;
      background-repeat:no-repeat;
      width:100%;
      height:100%;
    
     }
     

    Jeff Sanders (MSFT)
    Wednesday, January 4, 2012 9:23 PM
    Moderator
  • hi.

    is there anything else that needs to be done?

    if I edit the code above and set height the fullscreen to 100% with the wrapping overlay siv, the right click doesn't turn on the app bar

     

    I can get the app bar to stay on top but only if I use 80% height and click on the blank area...

    is it really possible to do a 100% iframe and call app bar on right click?

    thanks

     

    update: tried with code provided and also with own code below

     

    <div class="overlay">
        <iframe id="" class="fullscreen" src="http://mysite"></iframe>
        <!-- app bar code -->
        <div id="AppBar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{position:'bottom',transient:true,autoHide:0,lightDismiss:true}">
            <div class="win-right">
                <button onclick="showShareUI()" class="win-command">
                    <span class="win-commandicon win-large">&#xF031;</span>
                    <span class="win-label">Customize App</span>
                </button>
                <hr />
                <button onclick="" class="win-command">
                    <span class="win-commandicon win-large">&#xF051;</span>
                    <span class="win-label">Submit</span>
                </button>
                <hr />
                <button onclick="window.close()" class="win-command">
                    <span class="win-commandicon win-large">&#xE106;</span>
                    <span class="win-label">Close</span>
                </button>
            </div>
        </div>
    </div>

     


    "The more difficult something became, the more rewardant it was in the end"
    http://ftduarte.blogspot.com

    • Edited by ftduarte Monday, January 30, 2012 2:57 PM
    Monday, January 30, 2012 2:33 PM
  • I think you should use a div right next to the ifrmae. Instead of putting an iframeinside of a div.

     

    This is what I had:

     

    <div id="overlay" style="width: 100%; height: 100%; float: right; display: block; position: absolute; visibility: hidden;

            z-index: 20;background: transparent"></div>

    <iframe src="blah"></iframe>

     

    You can use DOM Explore to see whether your iframe is actually in the screen. I used "position:fixed" before, which caused the iframe to locate outside of the screen.

     

    Hope this helps.


    Louis
    Monday, January 30, 2012 6:39 PM
  • still no luck :(

    can you provide the source code for a working example of a simple demo app?

     


    "The more difficult something became, the more rewardant it was in the end"
    http://ftduarte.blogspot.com
    Monday, January 30, 2012 6:47 PM
  • <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar"
    
                data-win-options="{position:'bottom', transient:false, autoHide:0, lightDismiss:false}">
    
                <div class="win-left" style="padding-left: 5px">
    
                    <button id="backButton" class="win-command">
    
                        <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Back</span>
    
                    </button>
    
                </div>
    
            </div>
    
            <div data-win-control="WinJS.UI.ViewBox" style="width: 100%; height: 100%">
    
                <div style="float: right; width:50%; height: 50%; background: transparent; color: red; z-index: 20;"></div>
    
                <div >
    
                    <iframe id="pageFrame"/>
    
                </div> 
    
            </div>
    


    • Edited by Louis_PiG Monday, January 30, 2012 8:00 PM
    • Marked as answer by Louis_PiG Monday, January 30, 2012 9:48 PM
    Monday, January 30, 2012 7:59 PM