Question

First click: empty floatymessage div. second click and after: works.

jQuery:

function floatymessage(message){
    var box = $j(".floatymessage")
    if (box.length == 0) {
        $j('body').append("<div class='floatymessage'></div>");
    }
    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);
}

link:

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

css for floatymessoge:

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;
}

Answer 1

Your logic with box was missing a step, if it is not already in the dom you need to set your variable ‘box’ to the new div:

if (box.length == 0) {
  box = $j("<div class='floatymessage'></div>");
  $j('body').append(box);
}

further,

You can use the method you have setup but when using an anchor tag to fire a javascript event you need to add a return false to stop it from processing it like a normal link.

<a id="mine" href="#" onclick="floatymessage('msg');return false;">run</a>

It is a better practice to bind events in this case:

$j("#mine").click(function() { floatymessage('msg'); });

You could achieve the same effect using a span tag instead of an anchor tag that wants to navigate to a url.

<span id="mine" onclick="floatymessage('msg');">run</span>