Home/ Questions/Q 6238071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T11:08:46+00:00

I’d like to set up an alert message that appears at the top of

  • 0

I’d like to set up an alert message that appears at the top of my application on the first time a user accesses it, and persists until the user dismisses it.

I’m kinda new to jQuery, but I’d like to use it for this. Does jQuery have some built in methods for this kind of thing? Ideally I’d like it to be an instant action, rather than a form variable.

My app is a PHP based WordPress plugin.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can create a twitter-like alert by following the steps on these tutorials.

    CSS:

    #alert
{
    overflow: hidden;
    z-index: 999;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    height: 0;
    color: #000;
    font: 20px/40px arial, sans-serif;
    opacity: .9;
}

    jQuery

    Check if
    Use setTimeout to collapse the alert after 3 seconds
    Expand the alert to CSS line-height or 50px if line-height is not set
    If the user clicks alert before 3 seconds, collapse the alert early

    $(function () {
    var $alert = $('#alert');
    if($alert.length)
    {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({height: $alert.css('line-height') || '50px'}, 200)
        .click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({height: '0'}, 200);
        });
    }
});

    Put CSS and jQuery in an HTML page

    Some things to note:

    Line 1: Turn on session with PHP
    Line 13: There’s our alert CSS
    Line 30: If $_SESSION[‘alert’] exists (set in submit.php in step 2)
    Line 40: Use jQuery hosted by Google
    Line 42: There’s our alert jQuery

    <?php session_start(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Twitter-like alert message</title>
        <style type="text/css">
        body
        {
            background-color: #ccc;
            color: #000;
            padding: 30px;
        }
        #alert
        {
            overflow: hidden;
            width: 100%;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            height: 0;
            color: #000;
            font: 20px/40px arial, sans-serif;
            opacity: .9;
        }
        </style>
    </head>
    <body>
        <?php
        if(!empty($_SESSION['display']))
        {
            echo '<div id="alert">' . $_SESSION['display'] . '</div>';
            unset($_SESSION['display']);
        }
        ?>
        <form method="post" action="submit.php">
            <label for="message">Message</label> <input type="text" name="message"> <input type="submit" value="Alert me!">
        </form>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(function () {
            var $alert = $('#alert');
            if($alert.length)
            {
                var alerttimer = window.setTimeout(function () {
                    $alert.trigger('click');
                }, 3000);
                $alert.animate({height: $alert.css('line-height') || '50px'}, 200)
                .click(function () {
                    window.clearTimeout(alerttimer);
                    $alert.animate({height: '0'}, 200);
                });
            }
        });
        </script>
    </body>
</html>

    Use PHP to add the alert to the $_SESSION

    Save this file as submit.php

    <?php
session_start();

$themessage = get_magic_quotes_gpc() ?
    stripslashes(trim($_POST['message'])) :
    trim($_POST['message']);

$_SESSION['display'] = $themessage;

header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>

    It will create something similar to this
    http://www.youtube.com/watch?v=BbJeYdPRKXw&feature=player_embedded

    Comment below if you have any questions on the code, I guess this is all you need.

    Credits to:
    http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/
    http://www.achari.in/create-twitter-alert-style-using-jquery-js-and-css

    • 0