.msg {
position: absolute;
padding: 10px;
background: rgba(0,0,0,.8);
bottom: 10%;
right: 5%;
line-height: 40px;
margin-top: -30px;
margin-left: -25%;
z-index: 1000;
width: 50%;
color: white;
}
or you could change it however you want it in order to fit your needs.
Could you please post the code.
( N.B: message should vanish once the auto save is completed )I have implemented a timer to simulate this - if you look at the above URL and wait 2sec after the message appears you will see it does disappear - just change that code with your code for doing the save.
<style>
<!--
.ajax-auto-save-msg {
position: absolute;
padding: 10px;
background: rgba(0,0,0,.8);
bottom: 5%;
right: 5%;
line-height: 40px;
z-index: 1000;
width: 200px;
color: white;
}
-->
</style>
var msg = $('<div/>').addClass('ajax-auto-save-msg').html('Saving the data...');
alert("msg="+msg); // this prints object
$('body').append(msg); // I dont find the message on the screen !!!!!
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.ajax-auto-save-msg {
position: absolute;
padding: 10px;
background: rgba(0,0,0,.8);
bottom: 5%;
right: 5%;
line-height: 40px;
z-index: 1000;
width: 200px;
color: white;
}
-->
</style>
</head>
<body>
Somethign to make the page work
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
var msg = $('<div/>').addClass('ajax-auto-save-msg').html('Saving the data...');
$('body').append(msg); // I dont find the message on the screen !!!!!
});
</script>
</body>
</html>
Online version here http://www.marcorpsa.com/ee/t886.html
Open in new window
Working sample here