Top Bar Notofication Ifarme jQuery

by javajack

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<h1>Hello World !</h1>

CSS

.top-bar{
    top : 0;
    left: 0;
}

.bottom-bar{
    top:auto;
    bottom:0;
}

JavaScript

var notibar = $("<iframe/>", {
    class: 'bottom-bar',
    css: {
        "background": "#CA0002",
        "border": "0",
        "padding": "0",
        "color": "white",
        "position": "fixed",
        "width": "100%" ,
        "height": "36px",
        "z-index":"99999"
    }
});

notibar.hide().prependTo("body").delay(1000)
    .slideToggle('slow').delay(10000).slideToggle('slow');

// http://stackoverflow.com/questions/4208780/attach-event-to-iframe-element-in-parent-code
// $('#iframe').contents().find('p').click()

// top,right=0 for top right corner
// top,left=0 for top left corner
// bottom,left=0 for bottom left corner
// bottom,right=0 for bottom right corner