Jquery Multiple Notice Messages

Question

I am trying to create a stackoverflow type notice message. I found most of the code I needed from other posts but was having problems closing messages if multiple notices were used. Ideally if the second box out of 3 was closed, then it would fade away and the 3rd box would take the second's place

HTML

    <div class="message" style="display: none;">
        <span>Hey, This is my Message.</span>
        <a href="#" class="close-notify">X</a>
    </div>

     <div class="message" style="display: none;">
        <span>Hey, This is my Message.</span>
        <a href="#" class="close-notify">X</a>
    </div>

     <div class="message" style="display: none;">
        <span>Hey, This is my Message.</span>
        <a href="#" class="close-notify">X</a>
    </div>

CSS

div.message {
    font-family:Arial,Helvetica,sans-serif;
    float: left;
    left:0px;
    width:100%;
    height:15px;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

.message span {
    text-align: center;
    font-size:1.1em;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    top: 0px;
    font-size:1.1em;
    float:right;
    margin-right:10px;
    margin-top: -15px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left: 6px;
    padding-right: 6px;

}

JQuery

<script type="text/javascript">
    $(document).ready(function() {
        $(".message").fadeIn("slow");
        $(".message a.close-notify").live('click', function() {
            $(this).parent().fadeOut('fast', function() { $(this).parent().remove(); });
            return false;
        });
    });
 </script>

Thanks!

Answer 1

Try not returning false and using preventDefault to stop the link from being followed, also try modifying the selector to use parent/child, and using closest instead of parent in fadeOut's anonymous function:

<script type="text/javascript">
    $(document).ready(function() {
        $(".message").fadeIn("slow");
        $(".message > a.close-notify").live('click', function(e) {
            e.preventDefault();
            $(this).parent().fadeOut('fast', function() { $(this).closest('.message').remove(); });
        });
    });
 </script>

Answer 2

If the problem is the ordering of the messages, then you can use z-index. Have a variable which you increment for every new message and assign to the message's z-index.

Answer 3

I cleared my browser cache. But anyways.. My problem is that when I close one notice, a second later, the rest of the notices are also closed. I would like only the notice that I close to close.

Answer 4

Karim79 - That worked perfectly. Learned some new JQuery syntax! Thanks a lot