Archive for May, 2008

Proportional Scaling Calculator

Tuesday, May 13th, 2008

I’m sure this has been done before since it’s pretty simple - I just couldn’t find it quick enough when I needed it. And since it is so simple, it was easier to just create my own personal little calculator than dig around, find one, bookmark. (or worse yet, do the math on a little sticky note next to my computer) ;P

This calculator will let you enter in the original width and height of an image (or document, video or whatever). Then you enter the width (or height) of the size you need it scaled to (down or up). And it will tell you what the other side needs to be.

For example: I have an 800×600 image - I need it scaled down to fit in a 256 width area… what height will I need to make it? This tool will answer your question.

Proportional Scaler Calculator

Phone number validation with jquery

Saturday, May 3rd, 2008

One of the things I’ve been playing around with a lot recently is jquery. Why I didn’t jump on this bandwagon sooner, I’m not sure, but I am kicking myself for it. So I am still a bit of nub on the jquery front - but I like to think I pick things up quickly. :D

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.)

Suckerfish Dropdown navigation going behind content

Saturday, May 3rd, 2008

Awhile back, I had a project where I created a nice clean (X)HTML page including navigation using UL and LI tags. A few months later the client decided they wanted to add a dropdown menu to the navigation. No problem, I thought. We just add the embedded lists to the navigation - style it with CSS - and use the Suckerfish dropdown menu technique. Easy Peasy.

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!