CODEWITHSUNDEEP
javascriptjqueryhtmlcss
shaun
shaun

Reputation: 1273

Message DIV Issues

I have the following javascript it pops up a message on the screen, but always over the top of the previous messageDiv if it hasn't been removed yet.

I am trying to figure out how to get the messageDiv to either push the previous div down until it disappears and then takes the previous MessageDiv's place, or show up just below the current one on the page moving down just below the previous one as new ones appear.

function pushDev(){
    $.post( "#cgi.SCRIPT_NAME#", {fileId: "#fileIdIn#", action: "migrateFileDev"}, function(data){
        $("body").prepend("<div class='pageMessage' id='messageDiv'>" + data + "</div>");
        setTimeout(function(){$('#messageDiv').remove()}, 6000);
    });
}

function savePage(){
    var code = editor.getValue();
    $.post( "#cgi.SCRIPT_NAME#", {fileIdIn: "#fileIdIn#", filePath: "#path#", action: "savePage", editText: code }, function(data){
        $("body").prepend("<div class='pageMessage' id='messageDiv'>Saved</div>");
        setTimeout(function(){$('#messageDiv').remove()}, 6000);
    });
}


.pageMessage{
    /*position:fixed;*/
    /*top: 15%;*/
    /*right: 8%;*/
    background-color: #f5f5f5;
    opacity: 0.9;
    color: #FFF;
    font-size: 18px;
    text-align:center;
    padding: 8px;
    width: auto;
    height:auto;
    border:solid;
    border-color: #00A3DD;
    border-width: 3px;
    z-index: 1000;
    border-radius: 8px;
}

Upvotes: 0

Views: 77

Answers (1)

kamilk
kamilk

Reputation: 4049

I think you are running into a problem because you have multiple elements with the same ID and when your setTimeout callback executes, it removes the newest message rather than the oldest one. Only one element with a given ID is allowed in HTML. You need to figure out a different way of finding the div that should be deleted for the particular timeout, for example (I got rid of the irrelevant AJAX code):

function pushDev(){
    var messageDiv = $("<div class='pageMessage'>Data</div>")
    $("body").prepend(messageDiv);
    setTimeout(function(){messageDiv.remove()}, 6000);
}

function savePage(){
    var messageDiv = $("<div class='pageMessage'>Saved</div>")
    $("body").prepend(messageDiv);
    setTimeout(function(){messageDiv.remove()}, 6000);
}

JSFiddle here.

Upvotes: 2

Related Questions