Corner Banner

image-less corner banner

by mlhDevelopment

HTML

<div id='envbanner' class="stage"></div>
<b>Change the class to</b><br />
<b>dev, stage, deploy, or prod</b><br />
blah blah<br />
blah blah<br />
<button id='dostuff'>Do Stuff</button><br />
blah blah<br />
blah blah<br />
blah blah<br />
<b>Click the banner to hide it;<br/>
    Click it again to bring it back</b><br/>
blah blah<br />
blah blah<br />

CSS

#envbanner
{
    position: fixed;
    display: none;
    top: 20px;
    right: -20px;
    width: 100px;
    height: 20px;
    background-color: darkorange;
    color: white;
    text-align: center;
    transform: rotate(45deg);
}
#envbanner.semihid
{
    opacity: 0;
}
#envbanner.semihid:hover
{
    opacity: 0.25;
}
#envbanner.dev
{
    background-color: green;
    color: white;
}
#envbanner.dev:after
{
    content: "Dev";
}
#envbanner.stage
{
    background-color: mediumblue;
    color: white;
}
#envbanner.stage:after
{
    content: "Stage";
}
#envbanner.deploy
{
    background-color: chocolate;
    color: white;
}
#envbanner.deploy:after
{
    content: "Deploy";
}
#envbanner.prod
{
    background-color: red;
    color: white;
}
#envbanner.prod:after
{
    content: "Prod";
}

.proxyBanner
{
    position: fixed;
    right: 0;
    /*top: 37px;
    width: 100px;
    height: 20px;*/
    font-size: 13px;
    font-family: Arial, sans-serif;
    background-color: purple;
    color: white;
    text-align: center;
    transform: rotate(45deg);
    padding: .5em 2em;
}

JavaScript

/*$("#envbanner").click(function(evt) {
    evt.preventDefault();
    $(this).toggleClass("semihid");
});*/

//$("#dostuff").click(function() {
    var opts = {
        cssClass: "proxyBanner",
        content: "You are proxied in",
        onClick: function() { alert('clicked'); }
    };
    
    var el = $("<div>").addClass(opts.cssClass).html(opts.content).click(opts.onClick).appendTo("body");
    var ow = el.outerWidth();
    var oh = el.outerHeight();
    var iw = el.width();
    var ih = el.height();
el.css( { top: "-" + (oh / 2) + "px", right: "-" + (ow / 2) + "px" } );
//});