Sudah lama g update web ini kangen juga :D, kali ini kita buat Artikel – artikel yang ringan tapi tetep mempercantik tampilan website kita. Apa yang kita bahas kali ini hanya untuk menampilkan pesan error dan sukses setelah kita melakukan penginputan data atau terjadinya error Scriptiing.
Buat css seperti dibawah ini :
#message {
display: none;
position: fixed;
font-size: 13px;
right: 5px;
}
#message .sukses, .error {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width: 400px;
line-height: 40px;
}
#message .sukses{
background: url(images/success.png) 3px 3px no-repeat #d6fdce;
padding: 0 10px 0 35px;
border: solid 1px #99de8e;
}
#message .error{
background: url(images/error.png) 3px 3px no-repeat #ffcecf;
padding: 0 10px 0 35px;
border: solid 1px #df8f90;
}
lalu buat javascript seperti dibawah :
function down(){
setTimeout(function(){
$(‘#message’)
.animate({"bottom": "-=55px"}, "slow")
.fadeOut(‘slow’
/* hilangkan saat anda apply di script */
,function(){
location.reload();
}
/* end */
);
}, 3000); // setting berapa lama tampil
}
$(document).ready(function(){
var message="";
$("#error").click(function(){
message = "
Terdapat kesalahan input, silahkan ulangi lagi.
";
$("#message").html(message);
});
$("#sukses").click(function(){
message = "
Terima kasih data telah diinputkan.
";
$("#message").html(message);
});
$(‘#message’).show().animate({"bottom": "+=55px"}, "slow", down);
});
Penjelasan singkat :
$("#error").click(function(){ // fungsi saat id error terdapat even klik
$("#sukses").click(function(){ // fungsi saat id sukses terdapat even klik
$(‘#message’).show().animate({"bottom": "+=55px"}, "slow", down); // fungsi untuk Menampilkan Pesan
setTimeout(function(){ // Lama waktu yang diperlukan untuk manampilkan pesan
// hilangkan fungsi dibawah, berfungsi untuk merefresh pages
,function(){
location.reload();
}
// end