Notification Box in CSS - #1 HTML & PHP

Submitted by Yorkiebar on Friday, October 10, 2014 - 03:54.

Introduction:

This tutorial is on how to make a notification box for your website. This is the first of two parts, in which we will be creating the HTML and setting the messages.

Notification Box?

When I say a notification box, I mean one of those smooth and sliding information boxes which sometimes appear under certain circumstances on a website at the top of the page. Normally stating that the web page uses 'cookies'.

HTML:

First we want to create the HTML for our page. For the notification box HTML we are going to have a few elements... .outerBox - The entire width of the page to give a nice background colour .innerBox - Sets the location of the inner content .innerBox #information - The notification message. .innerBox #close - The box the user may click to close the notification box.

<html>
        <head></head>
        <body>
                <div class='outerBox'>
                        <div class='innerBox'>
                                <p id='information'>Info.</p>
                                <p id='close'>X</p>
                        </div>
                </div>
        </body>
</html>

The above HTML is now ready to appear as a notification box, however the message would always simply be 'Info.'. Normally this message would be something to do with server side queries such as the user trying to log in typed their information incorrectly, so we are going to output a PHP message there.

PHP:

First we set our PHP area...

<?php
?>

Next we would execute our queries, and under the certain conditions we want to set a new information/notification message. We will create/set the value of a variable named 'message' for this...

//Execute queries here, etc...
$message = 'That username is not available!';

Now where we have our notification box HTML we want to first check if the $message variable is set in PHP, if it is, it means we have a message we want to output via a new notification box...

if (isSet($message)) {
        //Notification box code in here...
}

Finally we want to change the 'Info.' from the notification box to the PHP message. Here is our final code...

<?php
        //Execute queries here, etc...
        $message = 'That username is not available!';
?>
<html>
        <head></head>
        <body>
                <?php
                if (isSet($message)) {
                //Notification box code in here...
                echo "
                <div class='outerBox'>
                        <div class='innerBox'>
                                <p id='information'>".$message."</p>
                                <p id='close'>X</p>
                        </div>
                </div>";
                }
                ?>
        </body>
</html>

Finished Part 1!

Add new comment

334 views