Douglas on Web Applications

Better Rollover with CSS & jQuery

My third pass at a rollover and my favorite solution by far. This one uses minimal code, avoids flickering while also decreasing load times.

Basically create each image or button with active and over states next to one another. For for our example, side by side. We apply the image as a background, defining the width of the space as half our image (so only the active state shows). Then when the use hovers, we reposition the background to show the active state only.

 
  $(function() {
	$("#teasers div").hover(function() {
	  $(this).css('background-position', 'top right');
	}, function() {
	  $(this).css('background-position', 'top left');
	});
  });
 

Hide & Show Fileds and Labels in EXTJS 3.01

Code to hide and show both a field and label whenever a checkbox is select. Note as of 3.01 just hidden a field will cause its label to be hidden as well.

Before form rendering code add:

Ext.layout.FormLayout.prototype.trackLabels = true;

Checkbox that invokes the action:

xtype:'checkbox',
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Use an existing GCC as a template',
name: 'use-existing-gcc',
id: 'use-existing-gcc',
  onClick:function(el) {
	  if(this.getValue()==true) Ext.getCmp('field-to-toggle').show();
	  else Ext.getCmp('field-to-toggle').hide();
}

Incredibly Simple Tabs with jQuery

Whenever I need inline tabs, I find myself traveling down the same well trod paths. There are dozens of plugins but where they usually fail is in simplifying skinning. Solution:

1. Create each tab row as a graphic (so all tabs but the selected one in a row would look the same
2. Add images to page surrounding each as a DIV
3. Add a bit of jQuery to hide show appropriate tab & content on click

Here's the CSS:

 
<div id="tabs">
<div id="speakers"><img src="img/tabs-speakers.gif" width="724" height="41" alt="Speakers" /></div>
<div id="events"><img src="img/tabs-events.gif" width="724" height="41" alt="Speakers" /></div>
<div id="tabs-content">
<div id="speakers-content" class="tab-content">
 
Content for speakers
</div>
<div id="events-content" class="tab-content">
 
Content for events
</div>
</div>
</div>
 

Next, add the javascript:

var tabArray=new Array("speakers","events");
$(document).ready(function() {
   $('#events').hide();
   $('#events-content').hide();
   $('#tabs').click(function() {
	   $.each(tabArray, function(index, value) {
		   $('#'+value).toggle();
		   $('#'+value+'-content').toggle();
	   });
   });
});

Passing Arrays to PHP via AJAX

I've written on processing AJAX queries before but neglected discussing how to pass an array to PHP for processing. This is an example of getting all checked rows in an EXTJS grid and posting them to an awaiting PHP script.

First we have the users confirm they really want to process all checked records:

 
Ext.MessageBox.confirm('Confirm', 'Are you sure your want to email login info to all selected users?', confirmEmailUsers);
 

Now the jQuery method:

 
function confirmEmailUsers(btn){
   if(btn=='yes'){
	   var recArray=new Array();
	   var ids=new Array();
	   var recArray = mailqueueGrid.getSelectionModel().getSelections();
	   for (var i = 0 ; i < recArray.length ;i++) {
		  ids[i] = recArray[i].get('id');
	   }
	  $.ajax({
		type: "POST",
		dataType: 'json',
		url: '/cpsia/?c=form&m=processqueue',
		data: 'ids='+ids,
		success: function(msg){
			alert(msg)
		}
	  });
   }
}
 

Finally, the PHP script to processes it:

 
$ids = explode(",",$_POST['ids']);
foreach ($ids as $id) {
   echo $id .'';
}
 

EXTJS 3 Combo in Window Bug Fix

Issue:
Often after closing a window containing a from, upon relaunching the combo boxes do not expand correctly. This is a z-index problem. The simplest solution is to add this CSS to your stylesheet:

 
.x-combo-list{z-index:100000 !important;}
 

Read XML Files from Directory & Process

Read files in a directory. Ignore hidden files. Processed XML based on first couple characters of file name.

 
$xmlDirectory = opendir($this->xml_dir);
while($entryName = readdir($xmlDirectory)) {
	$dirArray[] = $entryName;
}
closedir($xmlDirectory);
 
$indexCount	= count($dirArray);
//Print ("$indexCount files<br>\n");
sort($dirArray);
for($index=0; $index < $indexCount; $index++) {
	if (substr("$dirArray[$index]", 0, 1) != "."){ // don't list hidden files
		if(substr("$dirArray[$index]", 0, 4)=='some'){
			$this->somefiletype_path= $this->xml_dir.$dirArray[$index];
			$this->doSomething();
		}else{
			//do something else
		}
	}
}
 

Convert String to MovieClip in Flash AS3

Pretty straightforward:

 
function doClick(e:Event):void {
    this[e.target.name].gotoAndStop('over')
}
 

Of course, in the case above you could actually just use:

 
e.currentTarget.gotoAndStop('over')
 

AS3 MovieClip Arrays & Loops

I'm often tasked with applying the same listeners & properties to multiple MovieClips in Flash. The easiest is to store the MovieClips in an array:

 
var navButtons=[navCompanyMC,navNewsMC...];
 

Then you can simply iterate over them:

 
var i=1;
for (i in navButtons) {
  doSomethingToClip(navButtons[i]);
}
 

Sample usage:

 
public function doBuild():void {
  var navButtons=[navCompanyMC,navNewsMC...];
  var i=1;
  for (i in navButtons) {
    registerEachButton(navButtons[i]);
  }
}
function registerEachButton(clip:MovieClip):void {
  clip.buttonMode=true;
  EventManager.addEventListener(clip,MouseEvent.MOUSE_OVER,doRollOver,false,0,true,true);
  EventManager.addEventListener(clip,MouseEvent.MOUSE_OUT,doRollOut,false,0,true,true);
  EventManager.addEventListener(clip,MouseEvent.CLICK,doClick,false,0,true,true);
}
function doRollOver(e:Event):void {
  //trace(e.target.name)
  e.currentTarget.gotoAndStop('over');
}
function doRollOut(e:Event):void {
  trace(e.target.name);
  e.currentTarget.gotoAndStop(1);
}
function doClick(e:Event):void {
  trace(e.target.name);
}
 

Cron Jobs in Linux through SSH

Moving to Mac means finally losing PUTTY for the native Terminal.

1. Login:

 
ssh myuser@mydomain.com
 

2. Edit crontab:

 
crontab -e
 

3. Add 1 or more cron jobs:

 
10 */2 * * * /var/www/html/somedir/?c=import
10 */14 * * * /var/www/html/somedir/?c=import
 

4. Save: Use keystrokes ctrl + e
5. Type "y" to accept changes
6. Ignore next screen and just click Enter
7. Check to see if new job is listed:

 
crontab -l
 

Here's a quick format reference:
at that interval.
* * * * * command to be executed
- - - - -
| | | | |
| | | | +----- day of week (0 - 6) (Sunday=0)
| | | +------- month (1 - 12)
| | +--------- day of month (1 - 31)
| +----------- hour (0 - 23)
+------------- min (0 - 59)

Flash AS3 - Calling a Method in a Parent Class

When loading a movie in a movie, here's an easy way to call a method within a parent class:

 
  if(this.parent != null){
    var parentObject:Object = this.parent as Object;
    parentObject.doShowMain()
  }