40+ CSS Buttons from codepen
Finding the perfect CSS button isn’t hard these days – just Google it and you’ll come across tons of button generators. Most of them let you simply copy and paste the code. But if you’re looking for something a bit more unique or want some creative inspiration, there’s no better place than CodePen.io. Below, I’ve curated 40+ awesome CSS button examples straight from CodePen. Heads up: the page might take a little longer to load if your internet connection is slow.
Ajax Multiple Image Upload-Resize with jQuery and PHP
If you are looking for multiple image uploader that doesn’t require flash plugin, here’s script that does it for you, it will nicely upload multiple image files and resize them using jQuery and PHP. User can easily add as many files before uploading and a nice progress bar lets you see the progress of the upload, but please note: progress bar requires modern browsers to function.
Quick jQuery Form Validation
If you want a quick validation of your form without using any validation plugin, this jQuery snippet could do the trick. This snippet will prevent form submit and change field border color to red, unless user corrects the invalid or empty fields.
$(document).ready(function() {
$("#my_form").submit(function(e) {
//loop through each required field and simply change border color to red for invalid fields
$("#my_form input[required=true], #my_form select[required=true], #my_form textarea[required=true]").each(function(){
var proceed = true;
$(this).css('border-color',''); //reset border color
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
//alert("Field is empty");
proceed = false; //set do not proceed flag
}
//check invalid email
var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
if(proceed){ //everything looks good
return; //submit form
}
e.preventDefault();
});
});
});
Usage
Just set your form id to “my_form” and add required attribute to each input field you want to validate, as shown in example below.
Ajax File Upload with PHP, HTML5 File API and jQuery
Ajax file uploader is useful web tool, which is actually very easy to create with jQuery and PHP, and with new HTML5 FileReader API support, we can do client side file validation before even uploading the file to server. Today we are going to combine all these web features to make an Ajax based file uploader, which can be easily integrated into any HTML forms.