Tutorials – Webdevils

JQuery: .css()

The JQuery .css() method provides a function to set CSS properties and values for any element. The .css() method will also retrieve the value of any CSS poperty for any element.

To set a CSS property use of the of the following methods.

.css(property,value);

Using this system set the property as the first parameter and the value as the second. Both parameters should strings. Use the standard CSS property names, the same as used in your CSS style sheet. For example:

$('p').css('color', '#F00');

The line above would find all p tags on a page and set the color to red.

Sometimes you may want to set multiple properties at once. In these cases use this syntax.

.css({prop:value,prop:vlaue,...});

In this case pass one parameter, an object containing all of the properties and values to be set. Since property names set in the object can not contain special characters you’ll need to alternate property names. For example normally you would use background-color in your CSS style sheet. When using an object property list the – (hyphen) is not allowed. Instead use: backgroundColor. Notice I removed the unacceptable character and began the next word with an uppercase letter. For example:

$('p').css({lineHeight:'18px',letterSpacing:'0.1em'});

The example above sets the line height and letter spacing of all p elements.

Alternately, the CSS property name can be used as long as it is wrapped in quotes. For example the line above could alternatively be written as:

$('p').css({'line-height':'18px','letter-spacing':'0.1em'});

The value of any property may also be retrieved. For example, imagine you wanted the font-size of one element to match the font-size of another.

$('li').css('font-size', $('#headline').css('font-size') );

The line above sets the font size of all li elements to the same font-size as that of the element with the id name #headline.

JQuery: Getting Started

JQuery is a great tool for web development. It’s a Javascript framework that makes working with Javascript much easier. JQuery makes it easier to write code that works across platforms. JQuery simplifies all of the common Javascripts that may need to perform.

Download the JQuery library from Jquery.com. They archive different versions and provide a compressed (or minified) version and an un-compressed version. You can download the latest compressed version from the JQuery home page and it will work with all of the examples. Move this file into the directory where you will be working.

You can obviously place the jquery js file anywhere, as long as you provide the correct path to the file in your HTML document.

JQuery is very easy to use. Follow these steps:

Import the JQuery js file with the script tag
Set up another script tag for your own javascript.

For example:

<script type="text/javascript" src='jquery-1.4.4.min.js'></script>
<script type="text/javascript">
   // your own JS here
</script>

At this point you can use JQuery in your scripts. Notice, your scripts come second.

Many times you will want to wait for your document to load before applying your own JS. This important, because executing JS before the elements it acts on are loaded will cause your scripts to fail. JQuery provides the ready() event to easily work around this.

To set up the ready event use the following:

<script type="text/javascript" src='jquery-1.4.4.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
   // Scripts here execute after the page has loaded.
});
</script>

Flash AS3 Basics: Identifiers

Identifiers are the names that you invent to represent or identify elements in the program. Identifiers can be used to name MovieClip instances, Classes, Variables and Functions.

The program comes with many built elements that already have names. These are things like MovieClip methods like gotoAndStop() etc. You should avoid using these names as names for your own elements.

When creating Identifier names you should follow the following rules.

Names must begin with a letter (a,b,c etc) the underscore (_) or the dollar sign ($).
Names can contain any combination of letters, numbers and the underscore and dollar sign.
Avoid using names have already been used by the program.

Conventions

Identifiers are used fro various purposes. Following conventions while creating identifier names will help you keep them all straight.

In general identifiers should be kept lower case.

Class names: Class names always begin with an upper case letter. All of the built in classes follow this convention. For example MovieClip, Sprite and EventDispatcher all start with an uppercase letter.

Private Properties: A common convention is to start private properties with an underscore. For example: _index, _width, _height etc. The definitions for these might look like:

private var _index:uint;
private var _width:Number;
private var _height:Number;