bavotasan.com » Scripts

8 jQuery Plugins to Improve the Way your Forms Look

c.bavota — Tue, 13 Apr 2010 19:55:38 +0000

When it comes to forms, every browser displays inputs, select drop downs and buttons differently. You can style certain elements using CSS but things like radio buttons and checkboxes are determined by the browser. Luckily, there are some cool jQuery plugins available that help you add a little bit more style to your forms.

Here are a list of jQuery plugins that can help get your forms looking a bit more impressive:

jqTransform

jqTransform allows you to skin form elements with color changes on both mouse rollover and mouse click event.
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Example:

Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
http://www.emblematiq.com/lab/niceforms/

Example:

Uniform

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
http://pixelmatrixdesign.com/uniform/

Example:

jNice

jNice helps you create custom looking form elements that function like normal form elements using jQuery and CSS.
http://plugins.jquery.com/project/jNice

Example:

jQuery FormOne

jQuery FormOne (aka JQF1) claims to be the most complete form styling plugin and it does seem to cover all the bases.
http://www.azurem.com/jqf1/

Example:

CRIR

CRIR styles only radio buttons and checkboxes. It does a cool job of it but you will still need to use CSS to style other elements of your form.
http://www.chriserwin.com/scripts/crir/index.php

Example:

jQuery Checkbox

jQuery Checkbox was designed to replace the default checkboxes with super awesome switches. It also works with radio buttons.
http://widowmaker.kiev.ua/checkbox/

Example:

File Style

File Style allows you to choose an image to replace the default browse button when using a file input field.
http://www.appelsiini.net/projects/filestyle

Example:

Force WordPress to use the Latest Version of jQuery

c.bavota — Fri, 02 Apr 2010 15:20:43 +0000

If you’re using WordPress 2.9.x, then the latest version of jQuery included is 1.3.2. What if you want to take advantage of new features in version 1.4, like delaying an animation queue or binding multiple event handlers? You can easily add a link in your header to the latest version, but that might end up conflicting with some plugins or themes.

The best approach would be to use the following piece of code to let WordPress know that you want to load the current version instead.

Place this into your theme’s functions.php file:

function current_jquery($version) {
        global $wp_scripts;
        if ( ( version_compare($version, $wp_scripts -> registered[jquery] -> ver) == 1 ) && !is_admin() ) {
                wp_deregister_script('jquery'); 
 
                wp_register_script('jquery',
                        'http://ajax.googleapis.com/ajax/libs/jquery/'.$version.'/jquery.min.js',
                        false, $version);
        }
}
 
add_action( 'wp_head', current_jquery( '1.4.2' ) ); // change number to latest version

If jQuery is updated, all you have to do is change the version number when calling the function.

Reference: Binary Bonsai

Simple Voting for WordPress with PHP and jQuery

c.bavota — Fri, 18 Dec 2009 17:58:03 +0000

This tutorial is no longer up-to-date. Please check out A Better Voting System for WordPress for a more secure and efficient approach.

I needed to create a simple way for site members to vote on a post and the few scripts I found didn’t really work how I needed them to. So I decided to whip something together myself. I developed a pretty basic script using PHP and jQuery to allow members who are signed in to click on a simple link to add their vote to a post.

First you need to add this to your header.php file between the tags. If you notice that you already have the call somewhere else in your header.php file, just delete it.



<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".vote a").click(
function() {
var some = jQuery(this);
var thepost = jQuery(this).attr("post");
var theuser = jQuery(this).attr("user");
jQuery.post("/vote.php", {user: theuser, post: thepost}, 
function(data) {
var votebox = ".vote"+thepost+" span";
jQuery(votebox).text(data);
jQuery(some).replaceWith('Voted');
});
});
});	
script>

When a member clicks on the vote link, the above code will get the post ID and the member’s user ID and send it to a file called vote.php using a post method. The vote.php file will perform everything we need to add the vote.

So let’s create a file called vote.php and add it to your theme’s directory.


$file = dirname(__FILE__);
$file = substr($file, 0, stripos($file, "wp-content") );
 
require( $file . "/wp-load.php");
 
$currentvotes = get_post_meta($_POST['post'], 'votes', true);
$currentvotes = $currentvotes + 1;
 
$voters = get_post_meta($_POST['post'], 'thevoters', true);
if(!$voters) $voters = $_POST['user']; else $voters = $voters.",".$_POST['user'];
 
update_post_meta($_POST['post'], 'votes', $currentvotes);
update_post_meta($_POST['post'], 'thevoters', $voters);
 
echo $currentvotes;
?>

Once the information is posted to vote.php two custom fields are created. One to count the vote and one to add the voter to a list so that they can’t vote again.

Add the code below to your functions.php file, or create a functions.php file if your theme does not have one.

// voting function
function voting($id) {
global $user_ID;
$currentvotes = get_post_meta($id, 'votes', true);
$voters = get_post_meta($id, 'thevoters', true);
$voters = explode(",", $voters);
foreach($voters as $voter) {
	if($voter == $user_ID) $alreadyVoted = true;
}
 
if(!$currentvotes) $currentvotes = 0;
echo '.$id.'">'.$currentvotes.'';
if($user_ID && !$alreadyVoted) echo '
.$id.'" user="'.$user_ID.'">'.__("Vote").'';
if($user_ID && $alreadyVoted) echo '
'.__("Voted").'';
echo '
';
if(!$user_ID) echo '.get_bloginfo('url').'/wp-login.php?action=register">'.__('Register').' '.__('to vote').'.
';
}

Let’s add some CSS to style our voting box.

.vote {
	padding: 5px 0;
	background: #eee;
	border: 1px solid #ddd;
	width :50px;
	text-align: center;
	margin: 10px auto;
	}
 
	.vote a, .vote span.voted {
		cursor: pointer;
		margin-top: 5px;
		padding-top: 5px;
		border-top: 1px solid #ddd;
		display: block;
		}
 
	.vote span.voted {
		cursor: default;
		}

Now all you need to do is add the following within the WordPress loop to have the voting box appear.

 voting($post->ID); ?>

Test it out below:

0
Vote

Backup, Backup, Backup!

c.bavota — Sun, 07 Jun 2009 17:04:38 +0000

Over the past couple of weeks I have helped out many people who have been hacked. There are many ways in which you can protect your site, but the most important thing is having a recent backup from before you were hacked.

There are many plugins available for WordPress that will help you make a backup of your database. Click here to see them all. I use WP-DB-Backup on many of my client’s sites. It has the option to backup to your server or your desktop. I suggest doing both. You can never have too many backups. I always save my backups in multiple places, and I also keep two or three previous backups, just in case.

If you are not using WordPress, there are many scripts out there that can help you with making a database backup. If your server has PHPMyAdmin installed, you can make manual backups very easily. But whatever you do, be certain to backup your database often.

Backing up your database is extremely important but so is backing up your site. Doing both regularly will not stop hackers from attacking you, but it will make it easier for you to repair the damage they make.