mozilla
Your Search Results

    Coding guide: Banners Redirect 3

    Download resources

    Here you can find examples of how to create banners on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

    Implementing banners

    To implement a banner using the style shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

    @import url(resources/status.css);

    Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

    Example

    HTML to create the banner

    The HTML below creates a simple banner.

    <section role="status" id="alarm-banner" hidden>
      <p>The Alarm is set for <strong>7 hours</strong> and <strong>14 minutes</strong> from now.</p>
    </section>
    

    JavaScript content

    The code below displays the banner every time the screen is tapped; the banner disappears after four seconds.

    // Set up the banner to disappear after 4 seconds
    
    function scheduleBanner() {
      window.setTimeout(function() {
        document.getElementById("alarm-banner").hidden = true;
      }, 4000);
    }
    
    // Display the banner
    
    function showBanner() {
      document.getElementById("alarm-banner").hidden = false;
      scheduleBanner();
    }
    
    // Create the banner on any document click; normally you
    // would create the banner on some sort of activity occurring.
    
    document.addEventListener("click", showBanner);
    
    // For demo purposes, let's go ahead and create the banner when
    // the page loads.
    
    showBanner();
    

    Working demo

    You can try out the banner in this live demonstration. Just click the simulated Firefox OS screen to make the banner appear again.


    Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

    Notice that the <strong> element creates the blue text that's recommended for emphasis of content.

    Document Tags and Contributors

    Contributors to this page: chrisdavidmills
    Last updated by: chrisdavidmills,