Stephen Rushing

This tool allows you to select a block of HTML, then customize CSS selectors for each of the child elements. The resulting block of CSS is considered “modular”, in that the corresponding HTML must follow a particular structure. Yes, this is already the basic concept behind CSS selectors, but stylesheet selectors tend to be much more vague and unorganized. This allows you to control and recognize the scope of styles much more easily.

• View the sample
• Download jQuery.selectorInspector

This tool also makes use of jQuery.paneSizer.

This plugin was created to be used with jQuery.selectorInspector. The following example has not been simplified to showcase paneSizer.

This tool could use considerable improvement  on following the mouse, but I was having some glitches using the UI resizables from jQuery.

• View the sample
• Download jQuery.paneSizer

You may have seen this before…you have select dropdowns that are set to a certain width in accordance to the design. Anyone using IE will click the dropdown, and if any of the option items are wider than the select element’s width, they’re cutoff. This can be extremely hindering where you have a select dropdown of products or resources that all begin with the same ~20 characters. Some people just want to see the full option, too.

I’ve only found one, semi-elegant solution, and that is resizing the select container to “width:auto” on the focus event, and setting it back to its original size on the blur (unfocus) event. You also need to toggle the position to absolute and set its position so it shows up in the correct spot.

I created jQuery.selecteSizer to do this automatically on all specified selects.

Example Usage

if(j.browser.msie){
j("select").selecteSizer();
}

• View the sample
• Download jQuery.selecteSizer

Since the ability to post to firebug’s console has been available, I’ve loved taking advantage of it. I created this debug function in order to trace errors to the Flash console with trace(myMsg), and to the Firebug console with ExternalInterface.call(”console.log”, myMsg). Here are the parameters localTrace accepts and their defaults:
localTrace(localTrace(traceMsg, debugMode=1, debugLvl=1, jsAlert=false);

• traceMsg is the message you want to send to the console.
• debugMode is the debug status of the referencing object.
• debugLvl is the priority of the error message.
• jsAlert tells the function whether or not to show the message as a javascript alert.
  (useful if your browser does not have a console)

traceMsg is the only required parameter, meaning you can use this function by just calling localTrace(”test message”).

Example Usage

In the referencing timeline actions or class, add an import line for the function.

import com.esiteful.debug.localTrace;

Create a variable called debugMode and set it to something between 1-5 (you can use however many numbers you’d like, but I generally don’t use more than 5).

var debugMode:int = 3;

Now make a call to localTrace(). I usually have a trace at the top of each of my functions so I know when they’re fired, but I obviously don’t always want these to show, so I give them a debug level or 2 (or higher, depending on their repetitivity).

I give error message that are caught in a try/catch a priority of 1. So, here’s a sample of debugging a simple function.

import com.esiteful.localTrace;
var debugMode=3;
function awesomeLogic(logicString){
try{
localTrace("[awesomeLogic("+logicString+")]“, debugMode, 2);
//put your logic here
}catch(err:Error){
localTrace(”Error at awesomeLogic\n”+err, debugMode, 1);
}
}

I couldn’t get the above quotes to show up correctly for the life of me…guess it’s about time to look for a good code container for these examples…

If this function is part of a class, I would change the messages include that (e.g. “className.awesomeLogic”).

There you have it! Of course, all suggestions on debugging are welcome.

Download com.esiteful.debug.localTrace.

With tables being viewed as improper, overly-complicated structural markup, it surprises me sometimes how many divs and whatnots are required to achieve certain effects. It’s not efficient for us to create 6 divs for every container we want with rounded corners, when one or two would do for a rectangle. Even two divs can be somewhat complicated for clients unfamiliar with html, and we all know they still want to add pretty content.

jQuery.meshtml will replace or insert-into any element with a block of html (e.g. your complicated container markup). Here’s a quick sample:


var baseHtml = "<div>{$mesh}</div>";
var meshSettings = {base:baseHtml, replace:true};
j('.container-box').meshtml(meshSettings);


With replace set to true, the targeted elements will be replaced. Otherwise it will insert your block of html inside of the target elements.

What makes this more useful than the built in replaceWith, wrap, wrapInner and other methods is that our markup can be much more complicated, and we define exactly where we want the variable(s). By default, the variable name is “mesh”. Notice “{$mesh}” in baseHtml above. We can also define multiple variable names and what elements/content those reference. The keyword for the current element being inspected is “each”. See a more complex example of using meshtml below:

• Complex Example Using jQuery.meshtml
  Be sure to view the source to see how it’s done.
• Download jQuery.meshtml

Note that you can use my getNodeHtml function so that you aren’t stuck with moving the innerHTML of the elements around. View the source of the complex example to see how.

A great article on creating your own jQuery plugins/functions.
http://www.learningjquery.com/2007/10/a-plugin-development-pattern

Here’s a quick sample. Serves well as a base…

jQuery.fn.functionName = function(options, callback){
var settings = {
setting: "a",
callback: null
};
if (options) {
jQuery.extend(settings, options);
}
var jQueryParent = this;
var objIdx = 0;
this.each(function(){
jQueryChild = jQuery(this);
//put all your goodies here
//execute the callbacks
if (settings.callback != null) {
settings.callback(this);
}
objIdx++;
});
if (callback != null) {
callback(jQueryParent);
}
return jQuery(this);
}

Quick tip on jQuery hover event. There is a gotcha you may also run into, which is similar to one I’ve found in Actionscript 3.0…obj.hover(function(){}) works as expected in Firefox and IE. Binding the mouseover event seems to get different results in FF and IE.

I was unable to unbind the hover event with obj.unbind(”hover”) and obj.unbind(”mouseover”), so I did some searching around and came across this post. Apparently, the hover() method binds to the mouseenter and mouseleave events, so I just needed to unbind those. Oddly, I haven’t seen those events anywhere in the jQuery event docs, along with several other properties and methods. I’m not sure where an actual complete reference is if their site doesn’t even have it…

To use this class you’ll need the “com” folder in the same folder as your .fla, and the createScrollerPane() function.

• Download the example: com.esiteful.display.ScrollerPane


import com.esiteful.display.ScrollerPane;
function createScrollerPane(paneTarget){
stage.frameRate = 31; // for smoother scrolling
var myScrollerPane:ScrollerPane=new ScrollerPane();
myScrollerPane.target=paneTarget;
myScrollerPane.maskArea=new Rectangle(0, 0, 300, 200);
myScrollerPane.scrollSpeed=4;
myScrollerPane.scrollSpeedMax=80;
myScrollerPane.btnScrollUp=btn_up;
myScrollerPane.btnScrollDown=btn_down;
myScrollerPane.btnScrollLeft=btn_left;
myScrollerPane.btnScrollRight=btn_right;
myScrollerPane.start();
}


Pass the instance name of the object you want to scroll to createScrollerPane(). For example:

createScrollerPane(mc_slide_content);

I’m not sure if it needs to be modified to work with constantly changing the scroll target. It may act funky, or get really slow.

Remember that context is important too, so if you’re adding all of this code to the actions frame on the root timeline, your function call will look more like this:

createScrollerPane(mc_accordian.mc_slide1.mc_slide_content);

I will keep this post updated as the ScrollerPane class changes.

Sometimes my handler function traces the event target as one of the child objects of the actual button, making the button lose focus and triggering the MOUSE_OUT event. I was using the following code:

movieOnStage.buttonMode = true;
movieOnStage.useHandCursor = true;
movieOnStage.addEventListener(MouseEvent.MOUSE_OVER, btnHandler);
movieOnStage.addEventListener(MouseEvent.MOUSE_OUT, btnHandler);
movieOnStage.addEventListener(MouseEvent.CLICK, btnHandler);
function btnHandler(evt:MouseEvent):void{
trace("btnHandler("+ evt +") triggered by "+evt.target.name);
if(evt.type==MouseEvent.MOUSE_OVER){
}else if(evt.type==MouseEvent.MOUSE_OUT){
}else if(evt.type==MouseEvent.CLICK){
}
}
Using object.mouseEnabled property on some of the offending sub clips looked like the first solution, but I really don’t want to specify that on every sub clip. Talk about static.

So, I noticed the MouseEvent had ROLL_OVER and ROLL_OUT events. Using those got rid of the focus issues I was having, but I didn’t know what the difference was.

Most AS3 button examples I see are using the MOUSE_OVER and MOUSE_OUT events, so maybe this will save someone some time when they run into the same issues.

For those interested, I did a little searching on the reason for this. From the docs:

“The purpose of the rollOver event is to simplify the coding of rollout behaviors for display object containers with children. When the mouse leaves the area of a display object or the area of any of its children to go to an object that is not one of its children, the display object dispatches the rollOver event. This is different behavior than that of the mouseOver event, which is dispatched each time the mouse enters the area of any child object of the display object container, even if the mouse was already over another child object of the display object container.”

More info on the MouseEvent:

• flash.events.MouseEvent

I often have issues getting dynamic text to show up at all when I want to animate it in some way. If the text field is created statically, you just have to embed the font in the properties dialog. Here’s how to do it with text fields created dynamically…

1. Add the desired font to your library and export it as a class. I’ll use Arial for this example.
   1. Right click on the library item and choose “Linkage”.
   2. Make sure Export for ActionScript and Export in first frame are checked.
   3. The Base class field should be “flash.text.Font”.
   4. The Class field should be the name of your font (”Arial”). Not sure how this works with spaces, but I would not use them just to be safe.
2. Create your TextFormat.
   1. var myFormat = new TextFormat();
   2. myFormat.font = new Arial().fontName; //use the font class name
   3. myFormat.color = 0xA2BCD5;
   4. myFormat.size = 12;
3. Create your TextField.
   1. var myTF:TextField = new TextField();
   2. myTF.selectable = false;
   3. myTF.embedFonts = true;
   4. myTF.defaultTextFormat = showOnHomeFormat;
   5. myTF.setTextFormat(showOnHomeFormat);
   6. myTF.text = “Here is my text!”;
4. Create a sprite container for the text field.
   Note: This is only necessary for animating the text or making it a button.
   1. var mySprite:Sprite = new Sprite();
   2. mySprite.addChild(myTF);
5. Add the sprite to the stage.
   1. root.addChild(mySprite);

For a more complete list of TextFormat/TextField properties and methods, visit the following links:

• flash.text.TextField
• flash.text.TextFormat