jQuery: div doesn't appear until second click? I want it on the first. =\
<p>First click: empty floatymessage div. second click and after: works.</p>

<p>jQuery: </p>

<pre><code>function floatymessage(message){
    var box = $j(".floatymessage")
    if (box.length == 0) {
        $j('body').append("&lt;div class='floatymessage'&gt;&lt;/div&gt;");
    }
    box.html(message);
    // center it
    box.css("left", ( $j(window).width() - box.width() ) / 2+$j(window).scrollLeft() + "px");
    box.fadeIn('slow');

    setTimeout(function(){$j('.floatymessage').fadeOut('slow');},3500);
}
</code></pre>

<p>link: </p>

<pre><code>&lt;a href="#" onclick="floatymessage('Asking questions is not allowed.');"&gt;&lt;/a&gt;
</code></pre>

<p>css for floatymessoge:</p>

<pre><code>div.floatymessage {
    position: absolute;
    top: 20%;
    width: 300px;
    height: 50px;
    background: black;
    color: white;
    text-align: center;
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    box-shadow: 10px 10px 5px #000;
    border: 1px solid black;
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    line-height: 50px;
    z-index: 10000;
    display: none;
}
</code></pre>
