jQuery: div doesn't appear until second click? I want it on the first. =\

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

what is this 'j' doing between your '$' and '('? Also, what does the CSS look like for `floatymessage`? — Hristo, Jul 28 '10 at 17:44
@Hristo - DerNalia is running in `.noConflict()` mode. http://api.jquery.com/jQuery.noConflict/ — user113716, Jul 28 '10 at 17:50
Your code works fine for me. http://jsfiddle.net/YH99G/ Are you sure jQuery is fully loaded *before* you click? — user113716, Jul 28 '10 at 17:56
@patrick... hmmm... I haven't heard of `noConflict()` mode. I'll have to check that out. — Hristo, Jul 28 '10 at 18:19
@Hristo - It is handy when you need to use more than one javascript library that tries to use the same global variable `$` as a reference. In an earlier question, the OP noted that prototypejs was also being used. jQuery has an article on using different libraries together. http://docs.jquery.com/Using_jQuery_with_Other_Libraries — user113716, Jul 28 '10 at 18:25
@patrick... thank you for the explanation. that makes a lot of sense. — Hristo, Jul 28 '10 at 20:12

hunter · Answer 1 · 2010-07-28T19:37:34.850

1

bind the click event with jQuery

$(function() { // after the document is loaded
    $j("a#someId").click(function(e){ // when the anchor is clicked (give it an ID)
        e.preventDefault();
        floatymessage("Asking questions is not allowed."); 
    });
});

edited Jul 28 '10 at 19:37

answered Jul 28 '10 at 17:48

hunter

62,308
19
113
113

after the first click of any button, they all work. (i have three buttons with different messages) – NullVoxPopuli Jul 28 '10 at 18:01
my guess is your document isn't finished loading – hunter Jul 28 '10 at 19:36

Bobby Borszich · Accepted Answer · 2010-07-28T18:04:11.420

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>

jQuery: div doesn't appear until second click? I want it on the first. =\

2 Answers2

Linked