Creating a Stylish Coming Soon Page with jQuery
When starting work on a new website idea, the first thing you
probably do is to acquire the domain name and set up some sort of a
coming soon page (remember those construction site gif animations? Don’t use them!).
It is actually a good idea to invest some time in the development of
this page. This is the first encounter visitors have with you and your
product. You can even use it as a marketing channel and let people
subscribe to your launch newsletter.
This is why, today we are creating a stylish coming soon page, using
PHP, MySQL and jQuery. It will allow you to collect visitors’ emails and
store them in a simple database table. On the presentation side, it
features a slick slideshow with the help of the Nivo Slider plugin.
The HTML
First lets take a look at the HTML markup of the coming soon page.
The page was designed to be lightweight and has only a minimal amount of
code.
coming-soon.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX-ed Coming Soon Page with jQuery and PHP | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css" />
</head>
<body>
<div id="page">
<h1>Coming Soon</h1>
<div id="slideshowContainer">
<div id="slideshow">
<img src="img/slides/slide1.jpg" width="454" height="169" alt="Coming Soon: Our Awesome Web App">
<img src="img/slides/slide2.jpg" width="454" height="169" alt="Extensive Functionality">
<img src="img/slides/slide3.jpg" width="454" height="169" alt="Complete with an iPhone App">
</div>
</div>
<h2>Subscribe</h2>
<form method="post" action="">
<input type="text" id="email" name="email" value="<?php echo $msg?>" />
<input type="submit" value="Submit" id="submitButton" />
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/script.js"></script>
</body>
</html>
In the head section, we include the stylesheets – our own styles.css and nivo-slider.css,
used by the Nivo Slider plugin. You can potentially merge these two
files into one to requests, but it would be an overkill in this case.
In the body section, we define the main markup – basically two
headings, a form, and a div container with three images, used by the
slider.
At the bottom we include three JavaScript files. The first one imports jQuery 1.4.3
from Google’s CDN, which is the newest version of the library at the
moment of this writing. After it comes the nivo slider js include file,
and lastly our own script.js, which is discussed in detail in the last section of this tutorial.
AJAX-ed Coming Soon Page with jQuery, PHP and MySQL
The CSS
The CSS styles, which affect the page, are defined in styles.css. To
make it easier to modify and include into an existing design, some of
the rules are prefixed with the #page selector, which limits the effect of the rules only to the specified elements – CSS namespacing.
css/styles.css
#page{
width:330px;
margin:70px auto 100px;
}
#slideshow{
height:169px;
overflow:hidden;
width:454px;
}
#slideshowContainer{
padding:10px;
background-color:#181819;
margin:30px 0 50px -72px;
width:454px;
border:1px solid #1f1f20;
}
#page h1,
#page h2{
text-indent:-9999px;
overflow:hidden;
height:105px;
background:url('../img/coming_soon.png') no-repeat;
}
#page h2{
height:76px;
background:url('../img/get_notified.png') no-repeat;
margin-bottom:20px;
}
#page form{
background-color:#181819;
display:block;
height:31px;
padding:10px;
position:relative;
width:323px;
margin-left:-7px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
#email{
background:url('../img/submit_form.png') no-repeat;
border:none;
color:#888888;
height:31px;
left:10px;
line-height:31px;
padding-left:8px;
position:absolute;
text-shadow:1px 1px 0 #FFFFFF;
top:10px;
width:215px;
outline:none;
}
#submitButton{
background:url('../img/submit_form.png') no-repeat right top;
border:none;
cursor:pointer;
height:31px;
left:236px;
line-height:31px;
position:absolute;
text-indent:-99999px;
text-transform:uppercase;
top:10px;
width:96px;
}
#submitButton:hover{
background-position:right bottom;
}
Things are pretty much clear here. Something that is worth noting, is probably the negative text-indent
technique, which is used extensively to display a background image and
hide the contents of the element. A gotcha of this method, when applied
to submit buttons, is that you need to force the text into uppercase
with text-transform, otherwise it would not work in older versions of
IE.
Email Subscribe Form
The PHP
To make this page as simple as possible, the PHP code that handles
the form submission, is located at the top of the document. This also
makes it easier to handle situations in which JavaScript is not
available, and the form is submitted in the normal way (notice that in
the HTML step the action attribute of the form is empty – it will be
submitted to the same page).
coming-soon.php
require "includes/connect.php";
$msg = '';
if($_POST['email']){
// Requested with AJAX:
$ajax = ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest');
try{
if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
throw new Exception('Invalid Email!');
}
$mysqli->query("INSERT INTO coming_soon_emails
SET email='".$mysqli->real_escape_string($_POST['email'])."'");
if($mysqli->affected_rows != 1){
throw new Exception('This email already exists in the database.');
}
if($ajax){
die('{"status":1}');
}
$msg = "Thank you!";
}
catch (Exception $e){
if($ajax){
die(json_encode(array('error'=>$e->getMessage())));
}
$msg = $e->getMessage();
}
}
If the form was submitted via AJAX (we can tell if this is so by checking for the X_REQUESTED_WITH header) we output the responses as JSON, otherwise we assign them to the $msg variable that is later printed to the page.
As we are using the MySQLi extension, after we insert the email in the coming_soon_emails
table (it contains only an email column and a timestamp) we need to
check the affected rows property. The email column is defined as a
primary key, and the insert will fail on a duplicate email address.
Installation Notes: if you want to set up the Coming Soon Page on your host, you will need to create the coming_soon_emails table by running table.sql (available in the zip download) in phpMyAdmin. After this, remember to add your MySQL connection details to includes/connect.php.
The jQuery
As we are using the Nivo Slider plugin, a lot of the work has been done for us, and we can move our attention to handling the form submission and AJAX responses.
js/script.js
$(window).load(function() {
// Creating the Nivo Slider on window load
$('#slideshow').nivoSlider({
pauseTime:5000,
directionNav:false,
controlNav:false
});
});
$(document).ready(function(){
// Binding event listeners for the form on document ready
$('#email').defaultText('Your Email');
// 'working' prevents multiple submissions
var working = false;
$('#page form').submit(function(){
if(working){
return false;
}
working = true;
$.post("./coming-soon.php",{email:$('#email').val()},function(r){
if(r.error){
$('#email').val(r.error);
}
else $('#email').val('Thank you!');
working = false;
},'json');
return false;
});
});
// A custom jQuery method for placeholder text:
$.fn.defaultText = function(value){
var element = this.eq(0);
element.data('defaultText',value);
element.focus(function(){
if(element.val() == value){
element.val('').removeClass('defaultText');
}
}).blur(function(){
if(element.val() == '' || element.val() == value){
element.addClass('defaultText').val(value);
}
});
return element.blur();
}
Notice that the Nivo Slider slideshow is created on the window.load
event. This is done, so that we can be sure that all the images are
loaded and can be displayed. Although this is the first code block on
the page, it is actually executed last.
In the document. ready block, we bind an event listener for the
form’s submit event. As the handler returns a boolean false value, the
form will not get submitted, instead we are sending an AJAX post request
back to the same page and get either a successful response, or an
error, which gets outputted as the value of the email input box.
إرسال تعليق