Adobe AIR HTML Application with Window Shadow

Question

I have been building a HTML based AIR application that uses a transparent window (doesn't use the system chrome). I want the window to have a drop-shadow effect which using a combination of JavaScript and CSS3 I make the shadow change depending on window focus. And when the window is maximised the shadow will be removed completely.

The application looks like the following (wireframe diagram):

enter image description here

The red area is the <html> container itself. The blue box is the application content area (a simple <div>) and the black border with green shadow is a container <div> that is positioned absolute on the page. This black container is the application itself in my design.

As you can see the black border (around the blue box) has a subtle green shadow in the outer edges of the page.

The problem is that because the <html> is the application in AIR it means that the application can never touch the edge of the screen due to the fact that AIR is treating the <html> as the application edge rather than the container <div> for the black border.

Any ideas on how to get around this? The only thing I could think of was some crazy JavaScript that could offset the application somehow.... Anyone else had this problem?

Maybe I don't understand the question, but why would the javascript be "crazy"? If the application is absolutely positionned, can't you git it a position that is a few pixel off (possibly negative), and take that into account whenever the window is moved / re-drawned? — Djizeus

Djizeus Djizeus · Accepted Answer · 2014-06-07T17:29:17

I probably don't understand the question correctly, or maybe I am missing a limitation of AIR, but I don't see why the solution you think of would be hard.

When the application window is moved with a drag-and-drop, simply leaving the window where it is dropped without checking "screen" bounds will work. If you do want to check the bounds, simply allow the user to be off-bounds by the width of the border.

When the application window is maximized, you can offset the application container with negative values equal to the border width, and give to the application (rather than its container) the width and height of the screen.

As I can't test what I say as an AIR application at the moment, I illustrate it below with some code that you can test in jsfiddle. I used jquery to simplify the code. Is this what you mean?

HTML:

<div id="appContainer">
    <div id="app">
        <a id="maximize" href="#">Maximize</a>
    </div>
</div>

CSS:

#appContainer {
    background-color: black;
    width: 106px;
    height: 106px;
    position: absolute;
}

#app {
    background-color: blue;
    width: 100px;
    height: 100px;
    margin: 3px;
}

Javascript:

$("#maximize").click(function(){
    var $app = $("#app");
    var $appContainer = $app.parent();
    var borderWidth = parseInt($app.css('margin'));
    $appContainer.offset({top: -borderWidth, left: -borderWidth});
    $app.width($(document).width());
    $app.height($(document).height());
});

Adobe AIR HTML Application with Window Shadow

1 Answers