Redconservatory

Tracing or printing using console.log

With Actionscript, it’s easy to see what’s what with

trace("my statement");

The equivalent in Javascript is console.log(“my statement”). You can test out the most basic example:

1. Open Firebug.
2. Type console.log(“hello!”) in the console on the right,
3. Press Run.
4. View results.

Another way to write statements to the console is by writing to the console inside of script tags:

<script type="text/javascript">
console.log('hello!');
</script>

This is useful for testing out jQuery selectors:

<script type="text/javascript">
 $(document).ready(function() {
 $('#my_button').click(function() {
console.log("you clicked the button!");
});
 </script>

Super simple jQuery form validation

Lately I have been using jQuery validate for my forms I build.

There are many options and a lot of documentation to read, but here is a quick way to get up and running.

First, inside the <head></head> tags, add jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Then add jQuery validate:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>

Then, inside of the <body></body> tags, add a form:

<form id="my_form" action="" method="post">
 <label>First Name</label>
 <input id="my_firstname" class="required" minlength="2" />
 <label>Last Name</label>
 <input id="my_lastname" class="required"
minlength="2" />
 <label>Email</label>
 <input id="my_email" class="required email"/>
 </form>

Here are some things to remember about the form:

  1. The form tag must have an id attribute.
    Here it’s #myform.
  2. For fields that are required, add class=”required”.
  3. For fields that need a minimum amount of characters, add minlength=”amount”.

Then add your jQuery block to activate the validation inside of your head tag:

<script type="text/javascript">
 $(document).ready(function() {
 $('#my_form').validate();
 })
 </script>

View the complete sample.

Note: All the errors with jQuery validate have a class=”error”. You can style this class to (both input and label) however you would like.

JQuery in Internet Explorer

This week I completely broke an existing jQuery slider on a site I was working on. Fortunately I got some help fixing what I did and I learned a few things:

What to do with your bad selector

I had a selector that used to work in the jQuery function but then it stopped. However, switching the selector in question to:

position: relative;

- helped put my selector back into the normal flow. This is when I discovered that my selector lacked Internet Explorer’s hasLayout. Adding a simple: 

zoom: 1

– to my Internet Explorer-specific stylesheet nicely fixed my problem

Using Internet Explorer’s Developer’s Toolbar

Weirdly, when you have Layout in Internet Explorer, it reads as

has Layout -1

– in the Developer’s Toolbar. I personally find this completely unintuitive but that’s when you know that you do have Layout.

jQuery basics: writing html with jQuery

To write html with jQuery, use the .html() method:


$("document").ready(function() {
$("div").html("This html was written with jQuery");
});

This example writes a paragraph tag with a class of “green” with the above text, inside any <div> that occurs on the web page.


View an example.

jQuery basics: adding a class

It’s simple to add a class to any tag in jQuery, the following adds a class to the first paragraph:

$("document").ready(function() {
	$("p:first").addClass("green");
	});

See the example.