Really Easy Field Validation with JQuery
by trilobita
Again JQuery has improved and simplified from the process outlined earlier in this blog
for form validation just add jquery.validate plugin and then in the code add:-
$("#commentForm").validate();or more likely you’ll have a more complex form so you’ll need to specify a few attributes
var validator = $("#health").validate({
rules: {
radiofield: "required",
textfield: "required",
email: {required: true,email: true},
name: "required"
},
messages: {
email: {
required: "Please enter a valid email address",
minlength: "Please enter a valid email address",
},
radiofield: "Please Select The number of items to Check"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent() );
},
})For the full documentation go to http://docs.jquery.com/Plugins/Validation
And don’t forget to handle the form with javascript disabled!
Tags: field validation, form, form checking, javascript, JQuery, validation
Posted in Development, JQuery, ajax, css, javascript, php, themes | No Comments »
Rounded Corners with JQuery
by trilobita
As with most things Jquery has simplified and improved the process.
For rounded corners just use the jquery plugin jquery.corner.js
and in your code:-
$('#id1, #id2 ul ').corner();and that’s it!
Tags: corners, css, javascript, JQuery, rounded
Posted in Development, JQuery, css, javascript | No Comments »
Trilobita Jello 3 column Wordpress theme
by trilobita
SUPERSEEDED, PLEASE SEE Trilobita Wordpress Theme
Here’s a theme for Wordpress. It is based on the Jello layout technique. This means that you get a fluid layout, but one that has a minimum and maximum width set. Yep your site will not go below a certain width or expand beyond your max width. Try it, the default setting is that this layout will not go below 700px or above 1000px. These values can be edited to suit your needs, as can the amount of fluidity.
The theme is also XHTML 1.0 transitional compliant and complies with the WAI AA standards and it’s widget friendly 
.
Let me know what you think.
There’s a default install showing what you get ‘out of the box’ at http://www.trilobita.co.uk/wordpress/
you can get the files below:-
Trilobita Jello 3 column Wordpress theme (.zip)
Posted in Development, css, themes, xhtml | No Comments »
Scroll bars, CSS and IE/Firefox
by trilobita
In IE the scroll bar gets placed inside the element that requires the scroll. In firefox the scrollbar is placed outside said element. Bizarrely it seems that IE is the compliant browser on this issue. Anyway to fix the problem of your scroll bars covering your content you can add the following conditional css to your files.
#divid1 is the element that has overflow: auto; defined.
<!--[if IE]>
<mce:style type="text/css"><!
#divid1{padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 20 : 5);}
-->
<!--[endif]-->
Tags: browsers, css, html
Posted in Development, css | No Comments »
Really easy field validation
by trilobita
SUPERSEEDED PLEASE SEE ‘Really Easy Field Validation with JQuery‘
from http://tetlaw.id.au/view/javascript/really-easy-field-validation
Include the scripts
<script src="prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="validation.js" type="text/javascript"><!--mce:1--></script>
use the class attribute to specify the type of validation
<input id="field1" class="required validate-number" name="field1" />
You then activate validation by passing the form or form’s id attribute like this:
<script type="text/javascript"><!--mce:2--></script>
options for the class attribute are listed below
- required (not blank)
- validate-number (a valid number)
- validate-digits (digits only)
- validate-alpha (letters only)
- validate-alphanum (only letters and numbers)
- validate-date (a valid date value)
- validate-email (a valid email address)
- validate-url (a valid URL)
- validate-date-au (a date formatted as; dd/mm/yyyy)
- validate-currency-dollar (a valid dollar value)
- validate-selection (first option e.g. ‘Select one…’ is not selected option)
- validate-one-required (At least one textbox/radio element must be selected in a group – see below*)
Tags: form checking, javascript, validation
Posted in Development, JQuery, css, javascript, php, xhtml | No Comments »
rounded corners with css and javascript
by trilobita
SUPERSEEDED, PLEASE SEE Rounded Corners with Jquery
original at http://www.ruzee.com/blog/ruzeeborders.
Source files at http://www.ruzee.com/files/ruzeeborders-0.16.1.zip
Steps
1. include the following scripts on your page
<script src="cssquery2-p.js" type="text/javascript"><!--mce:0--></script>
<script src="ruzeeborders.js" type="text/javascript"><!--mce:1--></script>
2.include the following javascript on your page in the <head></head> section
RUZEE.Borders.add({
"div#divid,div#anotherdivid, blockquote, #left ul, p#contact" : {
borderType:"simple",
cornerRadius:8,
shadowWidth:0
}
});
window.onload=function(){
RUZEE.Borders.render();
};be sure to replace “div#divid,div#anotherdivid, blockquote, #left ul, p#contact” with the element id or tags that you want to be rounded
Tags: corners, javascript
Posted in Development, css, javascript, xhtml | No Comments »
