Home / Pemprograman / Membuat pesan sukses, error dengan jquery

Membuat pesan sukses, error dengan jquery

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 
 
 
 

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Multi php.ini pada webserver

PHP ya,  mungkin saat ini pemrograman web yang paling banyak digunakan, mungkin karena mudah cara …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *