How to make an alert with animated echo?

Question

How to make an alert with animated echo?

Asked 10 years, 9 months ago

Viewed 5,304 times

3

How to make a more animated echo, I am using the following PHP code, which contains a alert() javascript:

session_start();
$credito = $_GET['credito'];
$soma = @$_SESSION['valor_total'] += $_GET['valor'];

if($soma > $credito){
    echo "<script type='text/javascript' language='javascript'>
    alert ('Desculpe, ultrapassou seu limite de crédito!');
    window.location.href='../../painel.php';
    </script>";
}else{
    header('Location: ../../painel.php');
}

How to get this alert more excited? Put an effect, or even that (Sexy Alert Box)?

4 answers

Browser other questions tagged php javascript html css

You are not signed in. Login or sign up in order to post.

by rodrigovr • **141** points · Answer 1 · 2014-02-04T18:51:55+00:00

Sending an Alert() in javascript from an echo() in PHP is not good practice and does not allow any additional configuration, such as adding the effects you want.

The only advantage of the method you used is that the redirect will only occur after Alert() is closed, since it has a modal behavior and therefore leaves the browser idle until it is answered.

A solution that would allow a little more customization would be to use, for example, jquery UI. As in the example:

<?php
session_start();
$credito = $_GET['credito'];
$soma = @$_SESSION['valor_total'] += $_GET['valor'];

if($soma <= $credito){
    header('Location: ../../painel.php');
} else {
?>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Aviso</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#dialog" ).dialog({
      dialogClass: "no-close",
      autoOpen: false,
      show: 'fade',
      hide: 'fade',
      modal: true,

      buttons: [
        {
          text: "Retornar",
          click: function() {
           location.href='../../painel.php';
          }
        }
      ]
    });
  });
  </script>
</head>
<body>

<div id="dialog" title="Ocorreu um problema!">
  <p>Desculpe, ultrapassou seu limite de crédito!</p>
</div>


</body>
</html>

<?php } ?>

by Luiz Tanure • **161** points · Answer 2 · 2014-02-04T22:38:05+00:00

Take a different approach, accumulating error messages, in an array for example and inserting in the desired location, whether it is an element in HTML or passing to javascript.

example in phpFiddle of HTML message

phpFiddle example using a jQuery plugin for display

<?php
// ...
$soma = 10;
$credito = 5;
if($soma > $credito){
    $erros[] = "mensagem de erro 1 ";
    $erros[] = "mensagem de erro 2";
}else{
    //...header('Location: ../../painel.php');
}
?>
<html>
...
<?php if( !empty($erros) ):?>
    <div id="erros">
        <h5>Corrija os erros abaixo</h5>
        <ul>
            <?php foreach ($erros as &$item): ?>
            <li><?php echo $item ?></li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif;?>

...

by mlemos • **1,535** points · Answer 3 · 2014-02-06T03:56:01+00:00

The ideal would be to display the message in a div and use animation libraries to display the text with a highlight that draws more attention to the user.

I use a animation library which I have developed to create animation sequences that have unusual visual effects that help a lot to attract the attention of the user precisely because they are unusual and so give a natural and professional touch.

Look at this demo page. Click on the links on the side to see each effect. Note in particular the effects: Emphasize Circle, Emphasize underline and Emphasize double-underline. These are the most useful to draw the user’s attention.

I also wrote this article to show how to use for draw users' attention with canvas-based animations and other HTML5 elements.

See also this video about a part of the site that uses these effects. See more or less from 1m50s. Or else go straight to a page of the site that shows the effects applied in practice.

by Ronny Amarante • **2,544** points · Answer 4 · 2014-02-04T18:42:48+00:00

Are you using Bootstrap in your application? If you are, take a look at Modal: http://getbootstrap.com/javascript/#modals

This will look better than simple Alert, except that Bootstrap brings a layout pattern to your application.

As it is a function of jQuery, you can call by the same tag. But this is more for Javascript than for PHP.