So one thing I am now using jquery regularly for is form validation. Previously, form validation used to mean a lot of script writing, not to mention a fair amount of dread.

Now it’s quite painless.

My current usage of that plugin is pretty basic until I get a better handle of it. But one thing that I have been requested a number of times, is to add validation for a phone number - which is not included in that plugin. I’m not sure this is the “right” or best way to do it - but it does work.

The functions are basically the same as those provided here with some minor modifications and altered to be used with the jquery plugin.

First of course you include the jquery javascript file:
<script language="javascript" type="text/javascript" src="/js/jquery.min.js"></script>

Then the validation plugin:
<script type="text/javascript" src="/js/jquery.validate.pack.js"></script>

Then you add the function to check the phone number:
<script type="text/javascript">
$.validator.addMethod("phone", function(strPhone) {
var digits = "0123456789";
var phoneNumberDelimiters = "()- ext.";
var validWorldPhoneChars = phoneNumberDelimiters + "+";
var minDigitsInIPhoneNumber = 10;
s=stripCharsInBag(strPhone,validWorldPhoneChars);
return (isInteger(s) && s.length >= minDigitsInIPhoneNumber);
}, "Please enter a valid phone number");

Some “helper” functions:
function isInteger(s)
{ var i;
for (i = 0; i < s.length; i++)
{
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}
function stripCharsInBag(s, bag)
{ var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++)
{
// Check that current character isn't whitespace.
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}

Then the line that makes the jquery run:
$(document).ready(function() {
$("#myform").validate();
});
</script>

To use the jquery validation plugin - I was just adding “required” as a class to those fields that were required. Like this:
<input type="text" name="FirstName" class="required" />

You can check email structure by also adding the class “email”.
<input type="text" name="EmailAddress" class="required email" />

And now, using the code above, if you add the class “phone” - it will check a phone number.
<input type="text" name="PhoneNumber" class="required phone" />

(My code above allows for some additional characters beyond just numbers - so that it will accept parens around the area code - dashes or periods between the numbers and “e” “x” “t” characters as well - in case someone needs to include an extension.)

Typical disclaimer - like I said - I’m still a nub at jquery. There may be a better/easier way to do the above, so as always feel free to chime in if you know what that better/easier way is…

Updated 5/5/08 I do see a “phone” method in the “additional-methods.js” file… but I needed it do things a little differently… (like allowing extension numbers etc.)

Except when I implemented it, the drop down menus were showing up BEHIND the rest of the content instead of “above/over it”.

There was a lot of other things going on in the page, I have a simple example that demonstrates the issue.

I’m sure it makes sense somehow, if I had a better grasp of what “position: relative” does to the document - beyond that “position: relative” allows items INSIDE a relatively positioned block to be absolutely positioned WITHIN it (which is why I had done that). The side effect though is that it does that crazy thing with the menu.

Oh the HOURS and HOURS to figure that out…. /sigh.

Here is the same page - with just that one line (position: relative) removed.

I’ve now seen this problem crop up a few times. In one case, I was working with a design that I had not originally created and even though there were no “position: relative” in any of the css files - the only way to get the menu to be ABOVE the content was to explicitly declare “position: static” inside the div tag itself. (Even just declaring it in the css wouldn’t fix it - somewhere else it must have still been getting overridden)

While I’m at the point where I can’t even imagine designing a page using a table based layout anymore, I still get hit with some CSS sticking points that I just don’t get. So if you have more insight on this feel free to elaborate in the comments. I’m just so glad I was able to get the menu working!

So here’s the deal - if you have a form and an element in the form is named “submit” - if you try to call document.myform.submit() - you’ll end up getting the “submit is not a function” javascript error. (Because to javascript - “submit” is now that object element in your form - not a function)

So the simple solution is if you plan on using the javascript function submit() - do not name any of your form elements “submit”.

That’s all well and good except if you’re working on code that isn’t completely yours - and if the PHP code to process the form is specifically looking for $_POST['submit'] like so:

if (isset($_POST['submit'])) { // process form }

then you now have another problem.

This was the case I ran into with CubeCart recently. Most of the forms do not require a submit element to be in the form in order to process it - but a handful did. The design I was working on needed all the buttons designed and to look the same. So my options were:

1) Just use the regular input type=”submit” button on those forms. (Ok - but then the site is inconsistent)

2) search for all instances of (isset($_POST['submit']) in the code and change it to some other element I can add to the page… ie:

<input type="hidden" name="formsubmitted" />

and then in the code:

if (isset($_POST['formsubmitted'])) { // process form }

(Obviously this is not recommended in the case of CubeCart as it will make it really annoying to maintain/upgrade the cart!)

3) add that other “formsubmitted” element I noted above to the pages that need it - then towards the top of the MAIN index.php page (which is called with all pages on the store) add the following:

if (isset($_POST['formsubmitted'])) $_POST['submit'] = 1;

Thereby setting the value of $_POST['submit'] so it will process the form…

Another tip with using css-styled links for buttons that will submit forms in CubeCart - you don’t need to use document.FORMNAME.submit() - from any form you can use their “submitDoc(’FORMNAME’)” function like so:

<a href="javascript:submitDoc('FORMNAME');" class="myButtonStyle">Send Form</a>

Just make sure the form has a name (some of them don’t).

So first things first - since we’ll be passing values in the src path - we need to check for them and then pull them into our script using $_GET: (also we’ll say we’re making a image with header)

if (isset($_GET['cur']) && isset($_GET['goal']) && isset($_GET['height']) && isset($_GET['width']) ) {
header(”Content-type: image/png”);
//setting the values we’ll use in our script pulled in from GET
$height = trim($_GET['height']);
$width = trim($_GET['width']);
$goal = trim($_GET['goal']);
$current = trim($_GET['cur']);

Next - for the text to be displayed on the bar graph - we’ll want to say what percent towards the goal we are. (Or if the goal is reached - just say 100%)

if ($current > $goal) {
//if we've reached the goal - just max out current value and say 100% achieved
//if you don't mind text saying over 100% then you can remove the next two lines
$current = $goal;
$percent= "100%!";
} else if ($current == "" || $current == "0") {
//if no donations - just say 0%
$percent = "0%";
} else {
//otherwise calculate the percent to goal text
$percent = round(($current/$goal)*100) . "%";
}

Now lets start building our bar graph. First we create an image and assign a variable name so we can apply stuff to it. Then, to create colors we can use on our image, we use the ImageColorAllocate function in PHP - so that it understands it’s a color.

$im = @imagecreate($width,$height)
or die("Cannot Initialize new GD image stream");
$bg = imagecolorallocate($im,200,200,200); // grey
$fg = imagecolorallocate($im,255,0,0); //red
$text_color = imagecolorallocate($im, 0, 0, 0); //black

(Side note: The first color that is called with imagecolorallocate… this is the color which is used as the default background of the image even though it isn’t SPECIFICALLY “applied” to the image as such in any particular function.)

Now we need to calculate the “fill” box. The box I’m creating in this example grows UP. This part for some reason I had the toughest time trying to understand what the values were and how to calculate it. What “x” and “y” were in relation to my graphic. So now that I have a basic understanding of how it works, I’ll try to explain it in the way that I understand it.

We’re going to use the imagefilledrectangle function to create the box in our graphic that shows how many donations we have. PHP.net shows the function like this:

imagefilledrectangle ($image, $x1, $y1, $x2, $y2, $color)

x1 and y1 are coordinates on our image. It starts at 0 at the top and then works across our width for our x value, and down our height for y value. x1,y1 are coordinates of the left point of our rectangle, and x2,y2 are the coordinates of the right point which is on the opposite/diagonal side of our rectangle. If we wanted to fill in our image completely and our image was 20pixels WIDE and 100pixels HIGH: the top left of the image x,y coordinate value is 0,0. Then we tell it the second x,y coordinate - again we go across the full width of the image for the x value (20pixels) and go down the height of the image to get the y value (100pixels). And if that didn’t confuse you, I made a diagram that should make all that clear as mud:

In our thermometer/goal graph - that box is dynamic - so we need to calcuate that first x,y coordinate based on our donations. Specifically - the y coordinate - because that tells us how filled up our thermometer is. Here is how I calculate it. (Because you actually are still here even after my convoluted coordinate explanation I’ll spare you the explanation of how the calculation works and you can take my word for it that it will figure out the correct height based on the goal and current achieved donation values.)

$fill = $height-(($current/$goal)*$height);

And now we make our rectangle:

imagefilledrectangle($im, 0, $fill, $width, $height, $fg);

Now lets write on our picture what the percentage is. imagstring has a few parameters that get passed - first is of course the image variable, then a “font” number (default fonts are 1-5), then another x , y coordinate. This will be the top left corner of where the text will show up. For simplicity sake I just have it a little off the corner at the top., then our text (we defined this earlier), and then our text color - (also defined earlier)

imagestring($im, 3, 2, 2, $percent, $text_color);

Then we output our image to the browser:

imagepng($im);

Clean up our mess and close our “if” statement:

imagedestroy($im);
}

Here’s a demo.

Here’s the whole thing in one file (rename it with a .php extension).

Call it in your html like this:

<img src="goalgraph.php?cur=1650&goal=3000&width=30&height=100" alt="Help us get to our goal" />

Bonus Tip
Now position your bar graph over another image with css.
(I removed the text in that last example because it was too thin…)

When I first switched to them, they seemed great at the time. I was very happy. I even signed up as an affiliate and recommended them, sent clients to them. A few months after I signed up however, the problems began…

At first I got a threatening email from them saying my site was using too much CPU/Memory. I could not get any kind of helpful response via email so I finally called them. The guy I spoke to said it was a momentary spike - everything was fine - lets see if it happens again.

A few weeks (?) later, it happened again. Again, I called and was told to install wp-cache and that should fix the problem. So I did.

I had a few more back and forths with them. The end result was that starting in 2008 I think they changed their monitoring systems, from a threatening email - to simply taking your whole site down.

My site has not had a massive increase in posts, or visitors in a few years. In fact, because I’ve been so busy, posting here has been less and less, and number of visitors has roughly averaged the same or less.

Simply put, I wasn’t happy with their service anymore. In my previous post, people said “What do you expect when you pay ~$6 for hosting” (Actually I had paid more than that - but whatever). No matter what - if that’s the service you get with cheap hosting - so be it. But what happened next is inexcusable.

On their site, they say that if you’re not happy, you can get your money back… they ALSO say that if you are not happy within 30 days - you can get a full refund. Well, I’m not looking for a full refund, but since I paid for TWO YEARS up front, and the service obviously isn’t working for me anymore - I would like to get a prorated refund. This is standard policy with every host provider I have ever contacted. On their site the “30 day RISK FREE money back guarantee” wording - is COMPLETELY SEPARATE from their “Service guarantee”:

SERVICE GUARANTEE:
We guarantee that we’ll provide quality service:

* 99.9% Uptime Guarantee
* 24/7/365 Phone & Email Support
* Your satisfaction or your money back. (emphasis mine)

When I canceled I asked for my prorated refund, and I was told I would get nothing because I was canceling outside the 30-day window. Their friendly response:
You seem to miss one vital thing “30 day money back guarantee” and this applies within the 30 days “Your satisfaction or your money back.” not within 7 months.

They want to massively restrict CPU and take everyone’s site down - I guess, sure, thats what you get with cheap hosting - but to put up a VERY misleading “SERVICE GUARANTEE” - and keep hundreds of dollars for hosting I’m obviously not getting/using… This is a good business practice??

Whatever the restriction is on CPU usage - it was so tight that I had A LOT of problems getting my database off their system… I would try to export the database, and it wouldn’t let me… I had to manually export most of the rows for my posts and comments in small increments - and even then it skipped a few. It’s also interesting to note that if you browse around on their forums, you’ll see a bunch of people complaining of this problem.

People - be forewarned… This is not just cheap hosting… this is a BAD BUSINESS. I STRONGLY advise against hosting with them.

When my brother showed me his iPhone a few months ago, and I saw how cool it was, I definitely had gadget envy. The touch screen wasn’t as confusing as it looked on demo videos. The keyboard I found easier to use than I expected (and WAY easier than txt msg with only 13 buttons). My cell phone plan is up and quite frankly I’m unimpressed with any of the new Verizon phones…

So I was just wondering for anyone who stops by here - if you have an iPhone - do you like it? Why? Can you just throw it in your pocket easily enough? I use a PC - how does it do for syncing with the PC? Where do you store your address book - how well does it sync with the iPhone?

<input type="button" value="THERE REALLY ARE OTHER SEARCH ENGINES!"
onclick="location.href='http://www.yahoo.com'; return false" />

———————

I am SO SORRY. To anyone who followed my advice and signed up with HostICan - I’m sorry. I’m SO SORRY. A million times over. As well, I am SO SORRY that I am hosted with them. If nothing else it was a huge learning experience on what to check on with a host provider.

When I first switched to them I thought they were great. I loved them. Well… the honeymoon is DEFINITELY over!!

You may have noticed that sometimes when you come to my site a “warning” of sorts is up that says I’m using too much “CPU/Memory” on their servers. NEVER. NOT ONCE on any host did I over use too much CPU/Memory - certainly not on a regular day to day basis. And anytime I might have had a script that I was running, the host helped me pinpoint which script was causing the problem. (I’m haven’t put anything new like that on my sites for a long time). (This didn’t even happen the time that my site got slashdotted.)

Despite saying this on their website:

SERVICE GUARANTEE:
We guarantee that we’ll provide quality service:

* 99.9% Uptime Guarantee
* 24/7/365 Phone & Email Support
* Your satisfaction or your money back. (emphasis mine)

(Which, by the way, is NOT under the heading “30-day money back guarantee”) they still say they will not give me a refund / pro-rated or otherwise. (I paid for two-years up front when I signed up with them - and did so thinking that I would be able to get a refund (LIKE THEIR SITE SAYS) should things not work out.) So now I’ll be calling my credit card company to dispute the charge - and hopefully switch to a new host as soon as possible.

Ugh.

This by the way is the letter I’m sending my credit card company:

To Whom It May Concern:

I am writing to dispute a charge by HostICan on June 20, 2007 in the amount of $262.80. I had purchased hosting from them and paid for two years up front with the understanding that if I was not satisfied at any time with the service I would be able to receive a prorated refund.

The websites I have hosted with HostICan have been in service for 5+ years. I have been with a number of different host providers, and never had any trouble with CPU or Memory usage. Shortly after signing up with HostICan I noticed my sites would go down and in its place a “warning” message would come up saying that I was using too much CPU and/or memory resources on their servers. I contacted them and tried to understand why this was happening. They first suggested I wait and see if it happens again. It did. I contacted them again, and they suggested I use a specific plugin for my content management system that should help. I installed it. But nothing changed. I still saw my site going down.

They now say that I’ve “outgrown” the server I’m on and suggested I move to their more expensive plan which costs 5x more a month than what I’m paying now. My site hasn’t gotten significantly larger since when I first signed up with them, so I feel that this is not a fair assessment. I asked them to tell me the hardware configuration of the server I’m on, and I got two different answers. I asked them to verify/prove which answer was correct, and they could not.

When I asked about getting a prorated refund because I was not satisfied – I was told I would not get one because I was outside the 30-day guarantee. However, on their site, they specifically say that satisfaction is guaranteed. (Please see printout from their website included with this fax). The phrase “Your satisfaction or your money back” is listed before any mention of their “30-day money back guarantee”. If this is truly the case that you do not get a prorated refund – then I think their site is incredibly misleading. I took it to mean that if one cancelled within 30 days – all money would be refunded, and after that time, it would be a prorated refund, as is standard practice with other hosts I’ve contacted and hosted with.

As well, on their customer forums, it would seem that many other people are having a similar problem as I am. This leads me to believe there is a defect with either their servers or monitoring system. Instead of investigating the issue, they are belligerent and blame their customers.

Sincerely,….

I thought it would be interesting to mention that I’ve been having trouble posting this even because my site has been going up and down like a yo-yo.

*Please note - some of the customizations take a few things as assumptions - (for example how you have your permalinks set up, etc.) So if you use any of this, do so at your own risk (most especially the part about editing a core Wordpress file - I’m sure I’ll get heat for that from SOMEONE.) Your mileage may vary, and I don’t guarantee this will work with your setup, yadda yadda yadda…

1) Home Page
So we set this up as a page. The page had a custom template.

By the way, to make a custom template for the page - all you need to do is create the template - which will probably look similar to your index.php, except with any modifications you want to make - and then at the top, above any other code, have the following code so that Wordpress knows it’s a custom page template:
<?php
/*
Template Name:CustomHomePage
*/
?>

So in this case - I wanted the top portion to be editable as a page… So where the content belonged I had this:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

Now to list news and events - I wanted to allow them the ability to post news and event items that didn’t have to show up on the home page. So I created a third category called “Show on home page”. So they could enter an event or a news item in - indicate if it was a news or event item by selecting the appropriate category - and then if they wanted to have it show up on the home page, they would also indicate it as being in the “show on home page” category… To display that list of “posts” I had this:
<?php
$pageposts = $wpdb->get_results ("SELECT * FROM wp_posts, wp_term_relationships WHERE wp_term_relationships.object_id = wp_posts.ID && wp_term_relationships.term_taxonomy_id = '4‘ && wp_posts.post_status = ‘publish’ && wp_posts.post_category = ‘0′ && wp_posts.post_type = ‘post’ order by post_date desc limit 3″);
foreach ($pageposts as $post):
setup_postdata($post);
?>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>
<small><?php the_time(’F jS, Y’) ?></small>
<?php the_content(’Read the rest of this entry »’); ?>
<?php endforeach; ?>

So that’s doing a custom query to the database. It so happens that “show on home page” category has an id of 4 (you can see each category’s ID by looking at the manage->categories page.) So you put that “4″ in where I have it in bold and red in the code…

This file gets uploaded to your theme directory. Then, to create a page using this template, create a new page (or “Write Page”) - and on the right hand side, you’ll see a box “Page Template” - your template should be in the list by what you named it at the top (in this example it would be “CustomHomePage”). The title for the page is what the page will be named.

Then, to get THAT page to show up as the “home” page - go to Options -> Reading - and where you see Front page displays: select “static page” - and for “front page” select the page you created.

2) Sidebar
So there were a few tricky things with the events. I wanted the user to be able to enter in all the information about an event, but to set the DATE of that event as the “date” of the “post” so it would show up chronologically - kind of like an events calendar. The problem is that Wordpress gives all posts with a date in the future a “post_status” of “future”… so if you’re looking for posts with a status of “publish” - you won’t find them. There was a plugin that I found that considered all posts with “future” status to be “publish” without making any core file modifications - but I found it also has a side effect of showing those “future” posts mixed in with my list of pages. I was concerned that this would cause too much confusion and opted instead to make a very minor change to one of the core files. (I’ve now gotten into the habit of keeping a log of any core file changes I make so that upgrades aren’t too stressful. If the changes are kept to a minimum -upgrading shouldn’t be too bad and the changes can be made again to the new updated files)

So, in order to change the status of those posts - and get them to show up normally, I edited wp-includes/post.php, at about line 667, and changed this line:
$post_status = 'future';
to this instead:
$post_status = 'publish';

Now, in order to pull out JUST the next 3 upcoming events, I again did a custom post query. (in my sidebar.php template file)
<?php
//first set up what is the current date/time
$now = gmdate('Y-m-d H:i:59');
$pageposts = $wpdb->get_results ("SELECT * FROM wp_posts, wp_term_relationships WHERE wp_term_relationships.object_id = wp_posts.ID && wp_term_relationships.term_taxonomy_id = '3‘ && wp_posts.post_status = ‘publish’ && wp_posts.post_category = ‘0′ && wp_posts.post_type = ‘post’ && wp_posts.post_date_gmt > ‘”.$now.”‘ order by post_date asc limit 3″);
foreach ($pageposts as $post):
setup_postdata($post);
?>
<h3><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>
<p class=”date”><?php the_time(’F jS, Y’) ?></p>
<?php the_excerpt(); ?>
<?php
// to find out if there ARE any future events being displayed, I set this variable up so I can test for it later…
$nextevents = true; ?>
<?php endforeach; ?>
FYI - That “3″ in red/bold… that’s the category ID for my events category.

So that’s all well and good - but what if it’s a slow month and there aren’t any future events yet. I don’t want that bar to empty… So I figure I’ll show the last (just past) event instead…
<?php
//if no future events show last (1) event
if (!isset($nextevents)) {
$now = gmdate('Y-m-d H:i:59');
$pageposts = $wpdb->get_results ("SELECT * FROM wp_posts, wp_term_relationships WHERE wp_term_relationships.object_id = wp_posts.ID && wp_term_relationships.term_taxonomy_id = '3‘ && wp_posts.post_status = ‘publish’ && wp_posts.post_category = ‘0′ && wp_posts.post_type = ‘post’ && wp_posts.post_date_gmt < ‘”.$now.”‘ order by post_date asc limit 1“);
foreach ($pageposts as $post):
setup_postdata($post);
?>
<h3><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>
<p class=”date”><?php the_time(’F jS, Y’) ?></p>
<?php the_excerpt(); ?>
<?php endforeach; ?>
<?php } ?>

Those two things were probably the toughest. I do wish there was a setting in Wordpress somewhere so I can turn that setting posts in the future to PUBLISH instead of future. But I don’t think there’s a hook for it. Maybe they’ll add it in - and a plugin can be written to do that - so that no core modifications are necessary…

3) Fun with navigation
So the next trick was getting the subnavigation to work the way we wanted. There was some main nav items (pages) and some of them would have subnavigation. If the page did have subnavigation, we wanted to make the main page part of the list of pages under that main heading. So for example… Here is some main nav items:

About the museum - Donations - Photo Gallery

About the museum has the following sub pages: (Directions - Membership) But when you click on the “About the museum” main navigation - we want that page to be the “default” first page… so in the sub nav area you’d have:

About the muesum
Directions
Membership

Otherwise, I think it wouldn’t be clear how you get to that first (top-level) page…

But I don’t ALWAYS want to show that main nav item in the sub navigation… Photo Gallery is only one page - there’s no need for subnavigation on that page at all… (will probably make more sense if you go see the finished version of the site and click around on the pages…)

In any case, this is how I did the subnavigation. Using a trick I’d posted about before - I get the list of subpages this way: (This goes at the very top of my header.php template file)

<?php
$page = $wp_query->post;
$parent_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE ID ='$page->post_parent;'");
if(!$parent_id) $parent_id = $post->ID;
?>

But now I also need to know if the page I’m on has subpages at all… and I need the name and the title of the parent page.. (you’ll see why and how I use this shortly)

<?php
$getasubpage = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_parent = '$parent_id'");
$hassubpages = false;
if ($getasubpage) {
$hassubpages = true;
$parentpage = $wpdb->get_row("SELECT post_title, post_name FROM $wpdb->posts WHERE ID = '$parent_id'");
}
?>

Now where I want to list our subnavigation:

<ul id="subnav">
<?php if(wp_list_pages("child_of=".$parent_id."&echo=0")): ?>
<li<?php if ($parent_id == $post->ID) { echo ' class="current_page_item"'; } ?>><a href="<?php echo "/".$parentpage->post_name."/"; ?>"><?php echo $parentpage->post_title; ?></a></li>
<?php wp_list_pages("title_li=&child_of=".$parent_id."&sort_column=menu_order&depth=1");?>
<?php endif; ?>
</ul>