Based on what my PHP file returns i want to show a message on top of the Web page.

$msg = "Success"; // or fail
$redirecturl = "index.php?msg=".$msg;
header("Location: $redirecturl");

HTML code

<?php   $msg=isset($_GET['msg']) ? $_GET['msg'] : "";?>
<div id="display-success"><?php echo $msg; ?></div>

Now if i get the Success message i need to print a small box that appears (for 3 seconds, then fades out) that shows the message success in a green background. And if its failure then i want to display a message in a Red background for 3 seconds and then fades out.

Based on what my PHP file returns i want to show a message on top of the Web page.

$msg = "Success"; // or fail
$redirecturl = "index.php?msg=".$msg;
header("Location: $redirecturl");

HTML code

<?php   $msg=isset($_GET['msg']) ? $_GET['msg'] : "";?>
<div id="display-success"><?php echo $msg; ?></div>

Now if i get the Success message i need to print a small box that appears (for 3 seconds, then fades out) that shows the message success in a green background. And if its failure then i want to display a message in a Red background for 3 seconds and then fades out.

• javascript
• php
• jquery
• html
• css

• try it on page load $("#display-success").fadeIn(3000); – user3510665 Commented Dec 16, 2014 at 6:45
• better add a type="fail" or "success" to know what color to show. – Suchit kumar Commented Dec 16, 2014 at 6:47
• and set the css class based on the type then use fadeIn and fadeOut. – Suchit kumar Commented Dec 16, 2014 at 6:53

1 Answer 1

//by using setTime0ut

setTimeout(function() {
   $('#display-success').fadeOut().text('')
}, 10000 );

//by using delay()

$('#display-success').fadeIn().delay(10000).fadeOut();

jquery

$(".showMsg").click(function () {
    $('#display-success').fadeIn().delay(3000).fadeOut();
});

html

<button class="showMsg">Click Me</button>
<div id="display-success">The error Message</div>