King Tutz Web - Learn PHP, Javascript, Ruby & More!

Quick Tip: Pure CSS Triangles

Justin Podzimek — Fri, 26 Aug 2011 14:31:13 +0000

Understanding the Concept

Everyone knows how to add a border to an element, nothing really shocking there. But something that many people might not know, is that browsers draw borders at an angle from the center. Using this technique to our advantage, we can set 3 border colors of an element to transparent, leaving our remaining side to render out a triangle.

Creating the Base Class

To make our triangles easy to modify, we’ll start with the base class of .triangle that will contain the modifiable parameters to make our triangle look the way we want. This is where you can change the values to coordinate with your own application.

.triangle {
    border-width: 50px;
    border-style: solid;
    border-color: #FFF;
    width: 0;
    height: 0;
    *zoom: 1;
}

Nothing too exciting yet, we’ve create a basic block with a 50px solid white border. Notice that we set the width and height to 0, this is to allow the border to create our triangle without any extra spacing in the middle of our element. And finally, we add the zoom parameter to target IE7 and below and let those browsers know that this element has a layout.

Building the Triangles

Now that we have a basic 4 sided white square, we can add some subclasses to override 3 of the sides and set their border color to transparent, leaving just the remaining side and our triangle.

.triangle.up {
    border-top: 0 solid transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}
.triangle.right {
    border-right: 0 solid transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.triangle.down {
    border-bottom: 0 solid transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}
.triangle.left {
    border-left: 0 solid transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

Notice that on the side our triangle is pointing, in addition to setting the border color to transparent, we also set the width to 0. This is to ensure that we don’t have any extra spacing in the empty space of our element. We want the element to only be the size of what we can see, nothing more.

Adding the Markup

Now that we have the styles for our triangles, the last thing we need to do is include the markup to display them.

Conclusion

Hopefully this quick tip gave you everything you need to start creating your own CSS triangles. If you’re having any troubles getting your markup and styles to play nicely, drop me a line in the comments and we’ll work on getting everything sorted out. Thanks for reading!

Create an Ajax Driven Comment Form

Justin Podzimek — Thu, 18 Aug 2011 14:22:23 +0000

What We’ll Be Creating

Step One: Building the Base

Before we dive into the code, let’s take a minute and set up our folder structure. In the root of your main project folder, let’s add a few folders: css, images, javascript, and php.

Looking ahead, we know that our form will be running jQuery. At the time of writing this, the current release is at v1.6.2, so make sure you’re running at least that version. Download the minified version and stick it in your javascript folder (rename it to jquery.min.js if it’s not already named that).

Our form will also be using a few small icons. Go ahead the download these images into your images folder.

Special thanks to ajaxload.info for the animated loader and Crystal Clear for our awesome error and success images. Now that we’ve got the foundation for our application, let’s start building the good stuff: the code!

Step Two: Creating the Markup

We’ll get started in our code by creating the markup. In your root project folder, create a new file and name it index.html. Add in the following markup as a base, and we’ll build on it from there.



    
    	Ajax Comment Submission Form

Now that we have our basic HTML template, let’s add the form markup. To prevent page bloat, we want to use as little tags as possible while still allowing ourselves enough room to style it up the way we want. Copy the following into your index.html page.



    
    	Ajax Comment Submission Form
    
    
        
            
                
                    * Email:
                
                
            
            
                
                    * Comment:
                
                
            
            
                
            
            
                
            
            
                 Your comment has been submitted successfully!
            
            
                 Sorry, your comment can't be added. Please try again later!

Much of what we just added to the HTML might not have a clear purpose just yet, but stick around, everything will soon fall into place. Now that we have our basic markup, we’ll need to add references to our stylesheet and JavaScript that we’ll be creating shortly. So in the header section, let’s add our includes.



    
    	Ajax Comment Submission Form
    	
    	
    	
    
    
        
            
                
                    * Email:
                
                
            
            
                
                    * Comment:
                
                
            
            
                
            
            
                
            
            
                 Your comment has been submitted successfully!
            
            
                 Sorry, your comment can't be added. Please try again later!

Once we create the JavaScript for our form, we’re going to need an instantiation for it. So the last thing we’ll want to do in our index.html file is add the instantiation for the plugin that we’ll be creating in a little bit. Just before the closing tag, add the final code for the plugin.



    
    	Ajax Comment Submission Form
    	
    	
    	
    
    
        
            
                
                    * Email:
                
                
            
            
                
                    * Comment:
                
                
            
            
                
            
            
                
            
            
                 Your comment has been submitted successfully!
            
            
                 Sorry, your comment can't be added. Please try again later!

Step Three: Adding the Styles

Now that we have our markup in place, it’s time to style this form up. In your css folder, create a new file called comment.css. We’ll start with a reset to make the styles as uniform as possible across all browsers.

/* -- reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
br.clear {
    clear: both;
}

Now that we have the reset in place, let’s start styling out the form itself. You’ll notice there are a couple CSS hacks (the asterisk targets IE7 and below), but they are necessary to make sure the form looks the same across all browsers (IE6+). Go ahead and add the following into your comment.css right below your reset code.

/* -- comment form */
body {
    background: #597d92;
    color: #333333;
    font: normal 16px/16px arial, sans-serif;
}
#comment-form {
    background: #f2f2f1;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    padding: 10px 38px;
    *display: block;
    *float: left;
}
#comment-form p {
    padding: 10px 0;
}
#comment-form p.comment-right {
    text-align: right;
}
#comment-form p.comment-center {
    text-align: center;
}
#comment-form #loader,
#comment-form #success,
#comment-form #error {
    display: none;
}
#comment-form label {
    display: block;
    padding-bottom: 5px;
}
#comment-form label span {
    color: #b90202;
}
#comment-form input[type=text],
#comment-form textarea {
    width: 320px;
    background-color: #FFF;
    border: 1px solid #d7d7d5;
    padding: 5px 3px;
    outline: 0;
}
#comment-form input[type=text].error,
#comment-form textarea.error {
    border: 1px solid #b90202;
}
#comment-form textarea {
    height: 50px;
    width: 500px;
    min-height: 50px;
    resize: vertical;
    font-family: arial, sans-serif;
    overflow: auto;
}
#comment-form input[type=submit] {
    font: normal 16px/16px arial, sans-serif;
    border-width: 0;
    background-color: #b90202;
    color: #f2f2f1;
    font-size: 16px;
    padding: 5px 8px;
    cursor: pointer;
}

If you test your form now, you’ll notice that it looks just about correct, but not exactly the same as the demo. To fix the alignment issue, we’ll add in a little extra code which should only be used for the purpose of this demo. When you add the form into your own blog, you’ll want to remove the “demo only” section.

/* -- demo only */
body {
    text-align: center;
}
#comment-form {
    text-align: left;
    margin: 50px auto 0 auto;
}

So your final code in your comment.css should now look like the following. Keep in mind that when you integrate this code into your own blog or website, you may need to tweak some styles to make it play nicely with your other markup.

/* -- reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
br.clear {
    clear: both;
}
/* -- comment form */
body {
    background: #597d92;
    color: #333333;
    font: normal 16px/16px arial, sans-serif;
}
#comment-form {
    background: #f2f2f1;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    padding: 10px 38px;
    *display: block;
    *float: left;
}
#comment-form p {
    padding: 10px 0;
}
#comment-form p.comment-right {
    text-align: right;
}
#comment-form p.comment-center {
    text-align: center;
}
#comment-form #loader,
#comment-form #success,
#comment-form #error {
    display: none;
}
#comment-form label {
    display: block;
    padding-bottom: 5px;
}
#comment-form label span {
    color: #b90202;
}
#comment-form input[type=text],
#comment-form textarea {
    width: 320px;
    background-color: #FFF;
    border: 1px solid #d7d7d5;
    padding: 5px 3px;
    outline: 0;
}
#comment-form input[type=text].error,
#comment-form textarea.error {
    border: 1px solid #b90202;
}
#comment-form textarea {
    height: 50px;
    width: 500px;
    min-height: 50px;
    resize: vertical;
    font-family: arial, sans-serif;
    overflow: auto;
}
#comment-form input[type=submit] {
    font: normal 16px/16px arial, sans-serif;
    border-width: 0;
    background-color: #b90202;
    color: #f2f2f1;
    font-size: 16px;
    padding: 5px 8px;
    cursor: pointer;
}
/* -- demo only */
body {
    text-align: center;
}
#comment-form {
    text-align: left;
    margin: 50px auto 0 auto;
}

Step Four: Creating the Plugin

Now that we have our form all styled out, it’s time to add some functionality to it. You should have downloaded jQuery (at least version 1.6.2) and have it named jquery.min.js in your javascript folder, so if not, go ahead and do it now.

Next, create a new file named comment.js and place it in your javascript folder. This will contain our jQuery plugin for our form. We’ll start off by creating the base for our plugin. If you’re confused about jQuery plugins or want to learn more about them, take a look at our tutorial “The Basics: Building a jQuery Plugin“.

(function ($) {
    $.fn.commentForm = function (opts) {
        var options = $.extend({
            speed: 200
        }, opts);
        return this.each(function () {

            var base = this,
                $base = $(this);

            this.init = function () {

            };
            this.init();
        });
    };
}(jQuery));

Notice we named out plugin “commentForm”, which, if you recall, is what we called at the bottom of our index.html file. We added in a default variable speed which will contain the speed of our animations during the data-sending period. We created 2 private variables: base, which holds a reference to the element passed in during our instantiation, and $base, which holds in a jQuery object of the same element.

The following code will complete the plugin. I’ve commented out each function, so it shouldn’t be too difficult to see the process of the plugin on form submission. In a nutshell, we’ll be doing the following:

Catch the form submission to prevent default behavior
Process the data to make sure no values are empty
Display any errors and stop the submission, or build the query to send to the server
Send the data to the server
Show a success or error message depending on the message from the server

(function ($) {
    $.fn.commentForm = function (opts) {
        var options = $.extend({
            speed: 200
        }, opts);
        return this.each(function () {

            var base = this,
                $base = $(this);

            /**
             * Initialize the plugin
             **/
            this.init = function () {
                $base.bind('submit.commentForm', base.catchSubmit);
            };

            /**
             * Catch the form submission to prevent the default form action
             **/
            this.catchSubmit = function () {
                base.hideAll();
                if (!base.checkErrors()) {
                    base.showLoader();
                    base.submitData();
                }
                return false;
            };

            /**
             * Submit the data to the server
             **/
            this.submitData = function () {
                var query = base.buildQuery();
                $.ajax({
                    type: $base.attr('method'),
                    url: $base.attr('action'),
                    data: query,
                    success: function (d) {
                        base.hideLoader();
                        if (d === 'true') {
                            base.successPost();
                        } else {
                            base.failPost();
                        }
                    },
                    error: function () {
                        base.hideLoader();
                        base.failPost();
                    }
                });
            };

            /**
             * Show the loader icon
             **/
            this.showLoader = function () {
                $base.find('#loader').slideDown(options.speed);
            };

            /**
             * Hide the loader icon
             **/
            this.hideLoader = function () {
                $base.find('#loader').slideUp(options.speed);
            };

            /**
             * Hide the error and success messages
             **/
            this.hideAll = function () {
                $base.find('#success, #error').slideUp(options.speed);
            };

            /**
             * Show the success message after the data has posted
             **/
            this.successPost = function () {
                setTimeout(function () {
                    $base.find('#success').slideDown(options.speed);
                    base.clearForm();
                }, options.speed * 2);
            };

            /**
             * Show the error message if something went wrong when submitting the data
             **/
            this.failPost = function () {
                setTimeout(function () {
                    $base.find('#error').slideDown(options.speed);
                }, options.speed * 2);
            };

            /**
             * Clear all data in the form
             **/
            this.clearForm = function () {
                $base.find('input[type=text], textarea').val('');
            };

            /**
             * Create the query of data to send to the server
             * @return (String) the query
             **/
            this.buildQuery = function () {
                var q = '';
                $base.find('input, textarea').each(function () {
                    q += escape($(this).attr('name')) + '=' + escape($(this).val()) + '&';
                });
                return q;
            };

            /**
             * Check for any empty values in the form.
             * Any other validation should be done in this function.
             * @return (Boolean) true if errors, false if none
             **/
            this.checkErrors = function () {
                var errors = false,
                    $elem;
                $base.find('input[type!=submit], textarea').each(function () {
                    $elem = $(this);
                    if ($.trim($elem.val()) === '') {
                        $elem.addClass('error');
                        errors = true;
                    } else {
                        $elem.removeClass('error');
                    }
                });
                return errors;
            };
            this.init();
        });
    };
}(jQuery));

Step Five: Setting Up the Database

Before we jump into our server-side code, we need to set up the database and table that will hold our data. Hop into your database admin control, create a new database, and give it a name. Then, create a new table in that database and give it a name with 3 fields:

‘id’ INT NOT NULL AUTO_INCREMENT PRIMARY KEY
‘email’ VARCHAR( 255 ) NOT NULL
‘comment’ TEXT NOT NULL

Step Six: Catching the Data

Now that we have our plugin created and our form is styled up, it’s time to jump to the server code to catch the data and insert it into the database. In our php folder, let’s create 3 files: conf.php, comment.php, and comment.class.php. Open up conf.php and add the following:



This file will contain the values to connect to our database. Add in your personal information for the host, username, password, database, and table. Use the same names of the database and table that you used when creating your database back in step five.


Create another file in your php directory named comment.class.php and add in the following code:



This file will contain all the methods for our application server-side. Let’s add in a function to connect to our server and select the database. Notice we’re using the constants we declared in conf.php.



Now that we’ve connected, we can add the method to add the data into the table that we’ve created. Add the following into your file:

connect();
        $email = mysql_real_escape_string($_POST['email']);
        $comment = mysql_real_escape_string($_POST['comment']);
        $insert = mysql_query("INSERT INTO " . TABLE . " (email, comment) VALUES ('" . $email . "', '" . $comment . "')");
        if (!$this->isAjax()) {
            if ($insert) {
                return $this->displaySuccess();
            }
            return $this->displayError();
        }
        if ($insert) {
            return "true";
        }
        return "false";
    }
}


We’re using the TABLE constant in this method, which is, again, defined in your conf.php page. You’ll also notice the isAjax() method that we’re calling. We’ll define that next. It will be used to determine if the code is being called via ajax or if the user has JavaScript disabled, and will display the appropriate success or error message. Let’s add that in now.

connect();
        $email = mysql_real_escape_string($_POST['email']);
        $comment = mysql_real_escape_string($_POST['comment']);
        $insert = mysql_query("INSERT INTO " . TABLE . " (email, comment) VALUES ('" . $email . "', '" . $comment . "')");
        if (!$this->isAjax()) {
            if ($insert) {
                return $this->displaySuccess();
            }
            return $this->displayError();
        }
        if ($insert) {
            return "true";
        }
        return "false";
    }
    private static function isAjax() {
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
          return true;
        }
        return false;
    }
}


The last few methods we need to add into this file are the error and success messages if the user accessed the page without ajax. Your final comment.class.php page should look like the following:

connect();
        $email = mysql_real_escape_string($_POST['email']);
        $comment = mysql_real_escape_string($_POST['comment']);
        $insert = mysql_query("INSERT INTO " . TABLE . " (email, comment) VALUES ('" . $email . "', '" . $comment . "')");
        if (!$this->isAjax()) {
            if ($insert) {
                return $this->displaySuccess();
            }
            return $this->displayError();
        }
        if ($insert) {
            return "true";
        }
        return "false";
    }
    private static function isAjax() {
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
          return true;
        }
        return false;
    }
    private static function displayError() {
        return "Sorry, unable to post your comment. Please try again later.";
    }
    private static function displaySuccess() {
        return "Thank you! Your comment has been submitted.";
    }
}


Finally, we need to create one more file in your php folder named comment.php. This is the file that your JavaScript plugin will connect with. Add in the following code:

postData();
echo $posts;


The 2 include files are for the configuration file, and the class that we created to add the data into the database. This file uses echo to return a response back to the JavaScript plugin (or display on the screen, if the user has JavaScript disabled). The plugin then displays the error or success message based on the echo.

Conclusion

So there you have it. Hopefully, you should have a fully functional comment form driven by ajax. If not, retrace your steps from the tutorial or leave a comment and we’ll get you on the right track. Keep in mind that this is for demonstration purposes only, and you may need to tweak some styles or functionality to make this work with your own personal website. Thanks for reading!

The Basics: Building a jQuery Plugin

Justin Podzimek — Sat, 23 Jul 2011 13:56:32 +0000

Step One: Adding the Groundwork

The beginning of your plugin should always be the closure. The closure prevents variables from extending into the global scope. We’ll define the variable $ as jQuery to prevent any conflicts that may arise if you ever use the jQuery library with other JavaScript libraries that also utilize the $ symbol. If working on a project with a group of other people, it might also be a good idea to pre-define window, document, and undefined, so that you’re sure what you’re calling is what you’re getting. But for now, we’ll just stick with jQuery.

(function($) {

}(jQuery));

Step Two: Naming the Plugin

Next, we’ll extend the jQuery.fn object to include our own custom method. Replace nameOfPlugin with the name of your plugin, whatever it may be. In our plugin, we’ll be passing in some custom options that we’ll be able to utilize in our plugin. This helps keep the plugin as flexible as you want, so you can reuse it for different projects without re-writing the plugin code.

(function($) {
    $.fn.nameOfPlugin = function(opts) {

    };
}(jQuery));

Step Three: Defining the Default Variables

Now that we have the ability to pass in some optional parameters to our plugins instantiation, we’re going to want some default values. So we’ll create an object named defaults that will hold all of the default options that can optionally be overwritten. Finally, we’ll create one more variable that we’ll name options that will hold the final options used for the plugin (the defaults merged with the ones overwriting the defaults passed in during the instantiation).

(function($) {
    $.fn.nameOfPlugin = function(opts) {
        var defaults = {},
            options = $.extend(defaults, opts);

    };
}(jQuery));

Step Four: Looping Through the Objects

This next step will loop through all the matching jQuery objects used during the instantiation and run the function you give it. For instance, consider $('div.foo').nameoOfPlugin(). The loop will run over all

‘s with the class name of foo.

(function($) {
    $.fn.nameOfPlugin = function(opts) {
        var defaults = {},
            options = $.extend(defaults, opts);
        return this.each(function() {

        });
    };
}(jQuery));

Step Five: Make the Magic Happen

From here on out, it’s up to you to add the functionality to make your plugin work. Remember, anything that you include inside the each loop will be iterated over as many jQuery objects are matched during the instantiation. You can use this inside the loop to target the current object, but be mindful of your scope. I like to pre-define a couple variables at the beginning of my loop so I know exactly what I’m targeting.

(function($) {
    $.fn.nameOfPlugin = function(opts) {
        var defaults = {},
            options = $.extend(defaults, opts);
        return this.each(function() {
            var base = this,
                $base = $(this);
        });
    };
}(jQuery));

Step Six: Instantiating the Plugin

The final step (besides actually writing the plugin functionality) is to instantiate it. At the bottom of your markup file (right before the closing tag, we’ll add the following code. Notice the continued use of the closure. Again, this is to make sure $ always equals jQuery. Replace the selector with what you’re looking to target, the plugin name with whatever you named your plugin, and you’re all set.

Conclusion

So if you followed the directions above, you should now have the template for your own plugin and you can start creating some professional looking applications. Remember to keep your code as clean and readable as possible (with commented documentation), run it through JSLint to make it sparkle, and minify a copy of it to send to production.

If you have any questions, comments, or had any troubles in getting your plugin to work, post them in the comments and we’ll get things sorted out for you. Thanks for reading, and happy jQuerying!